angular学习笔记

1.ng的四大特征：
①采用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对象

7.ngRepeat用法有两种
 <ANY ng-repeat="tmp in set(model)"/>
<ANY ng-repeat="(key,value) in set(model)"/>ng-repeat让该元素重复生成


ngIf 让HTML支持选择（判断）
<ANY ng-if='表达式'/>