①采用MVC的设计模式
符合当前互联网的发展趋势:职责的细分
模块化开发:提高代码复用率 降低测试难度 维护方便
②双向数据绑定
是angularJS区别于其他框架的一个重要特性
③依赖注入
通过注入某些服务或者对象 直接调用
④模块化设计
ng框架本身就是符合模块化设计,使用框架结合模块、控制器、服务等来实现模块化开发
2.基础语法:{{expression}} 可执行括号中的表达式 将结果输出到innerHtml中
3.表达式:算术运算(除++,--),比较运算,逻辑运算,三目运算,特殊运算(获取对象属性方法)
4.使用AngularJS的步骤:
(1)引入angular.js文件
(2)某个父级元素声明ng-app属性
(3)子元素中可以使用angular相关内容了
(1)ng-app标示一个angular模块的范围,只有此范围内的angular内容才会被处理
(2)一个页面中只能声明一次ng-app,若有多块表达式需要处理,把ng-app声明在包含它们的父元素中
(3)为了让网页通过HTML校验程序,可以对所有的angular指令前添加data-
(4)ng-app属性要么不声明值;若声明了值,则script中必须声明此名称所对应的module:
<xx ng-app="moduleName">
angular.module( 'moduleName', [ ] );
5.Angular中的Model
Model:模型,就是应用中的数据,如:数字、字符串、数组、对象....
声明Model数据有两种方式:
(1)<xx ng-init="变量名=变量值;"> —— 不推荐使用!把model混合在html/view中
(2)使用Controller初始化Model数据 —— 推荐使用!
angular.module(...).controller("ctrlName", function($scope){
$scope.变量名 = 值; //为当前控制器声明model数据
$scope.变量名 = 值;//....
$scope.变量名 = function(){.....}; //....
})
注意: //model数据的任何修改都会被angurlar同步更新到view
6.ng的MVC具体用法
Model View Controller
①声明模块
var app = angular.module("myApp",['ng']);
②注册模块
ngApp指令: ng-app="myApp"
③声明控制器
app.controller("myCtrl",function(){})
④使用控制器
ngController指令:ng-controller='myCtrl'
⑤在控制器的回调函数中,注入$scope对象,指定模型数据:
$scope.name = 'Michael' ;
$scope.age = 20;
⑥显示
{{}} 或者ng指令:ng-bind=‘';此指令可以防止闪动问题
$scope 作用域控制对象,将模型数据和视图建立联系的桥梁
初始化数据:
ngInit
$scope对象
<ANY ng-repeat="tmp in set(model)"/>
<ANY ng-repeat="(key,value) in set(model)"/>ng-repeat让该元素重复生成
ngIf 让HTML支持选择(判断)
<ANY ng-if='表达式'/>