AngularJS 是一个基于 MVC 处理模式,实现了 MVVM 数据双向绑定的用于开发动态 web
项目的 JavaScript 框架。以其数据和展现分离、MVVM、MVC、DI 等强大的特性活跃于前
端开发市场,是前端敏捷开发使用的主流的必须掌握的框架之一。
AngularJS 就是因为对传统的 HTML 进行了功能的扩展,所以在一定程度上,实现了软件
开发过程中前后端的架构级别的分离——也就是软件前后端分离架构模型。
同时将前端的内容展示、业务功能处理、数据交互有组织的进行了规划,让前端 HTML 更加
适合如今的企业级平台的 web 软件开发
网页中引入 Angular 之后,程序运行时会自动查找 ng-app 指令并从这个入口开始加载编
译并解释执行。. 基础语法结构
开始深入学习 AngularJS 之前,先简单认识 AngularJS 中的各个部分都是怎么定义和使
用的,方便解决后续学习过程中的一些困扰。
ng-app
Angular 应用运行的入口指令,常规情况下,是写在我们前端项目的入口文件的根标签上
的,用于在项目启动的时候引导 Angular 应用
angular.module(..)
Angular 是通过模块来管理我们前端项目中的数据的,通常情况下一个项目中会包含各种
各样的数据,如管理员、会员、商品列表、商品、新闻列表、新闻、公告等等
模块时需要在应用启动的时候就需要加载的,所以 Angular 在设计的过程中对于入口指令
进行了改造可以绑定一个值,这个值就是系统的主模块
基本指令
指令是 Angular 中使用比较多的一个部分,Angular 中的内置指令都是 ng-开头的一种
特殊的语法结构,如:ng-app 等,常见的基本指令如下:
ng-app=”myApp”:程序运行的入口,通过名称绑定一个模块
ng-init:用于在程序运行的过程中,初始化一些变量的数据的操作
ng-model=”param”:数据绑定的指令,主要用于表单元素上的数据绑定
ng-bind:数据绑定的指令,用于将变量的数据显示到页面上,用于替代 mustache 语法的
ng-controller:控制器指令,用于在页面中指定控制器作用范围,通常作为属性出现
ng-[event]:事件指令,用于在页面中发生某些事件时调用指令的函数
基本语法
var app = angular.module(“name”, []):用于定义一个 angular 的模块
name 是模块的名称
[]中可以添加其他的模块
app.controller(“name”, function() {}):用于定义一个 angular 的控制器
name 是控制器的名称
function(){}是这个控制器要处理功能的函数
$scope 作用域
$scope 是放在控制器函数中的一个参数。这个参数不需要传值,而是 angular 自动赋值
在操作的过程中$scope 就相当于一个容器,可以在$scope 上声明变量或者函数,$scope
上的变量和函数会自动和视图页面中的变量进行绑定,称为$scope 挂载数据。
$rootScope 作用域
$rootScope 是 AngularJS 的根作用域,也是全局作用域,放在控制器函数中的一个参
数,参数不需要传值,angular 会自动赋值,挂载在$rootScope 上的数据,会被 Angular
应用中的所有模块下的子模块和控制器公用。
run()函数
配合$rootScope 使用,用于声明和初始化全局数据【当前模块下所有的组件可以访问的
数据】
app.run(function($rootScope) { // 处理代码})
$scope.$watch()
挂载在$scope 上,用于监控数据的变化
监控单个变量:$scope.$watch(“name”, function() {// 处理代码})
监控多个变量:$scope.$watch(“name1 + name2 + ..” + function() {})
angular 事件处理
AngularJS 中的事件操作,由于它自己虚拟 DOM 结构所以不支持普通事件,通常通过它自
己的事件指令来调用通过$scope 挂在到控制器中的函数执行完成,事件指令其实就是对于
常见事件的封装,以 ng-开头,加上事件名称即可,如鼠标单击事件 ng-click
事件 ng-click=”fn”,这里的 fn 必须是挂载在$scope 作用域上的函数。