Angular.js

Angular表达式

  语法：  {{ 表达式 }}

  作用：  在当前位置“输出”该表达式的值

 表达式中可以执行哪些式子？

(1)算术运算： +-*/都可以，++和--不行！

(2)比较运算： 都可以！

(3)逻辑运算： 都可以！

(4)三目运算： 都可以！

(5)赋值运算： 直接赋值(=)可以，+=等运算赋值表达式不可以！

(6)特殊运算： 不可以！

(7)调用string的方法和属性： 都可以！

(8)创建新对象： 直接量语法可以！但不能使用new关键字！

(9)创建数组：直接量语法可以！但不能使用new关键字！

 

5.Angular中声明变量——Model数据

  有两种方式可以声明Model变量：

  (1)使用ngInit指令声明

1)ngInit指令可以声明为HTML元素的属性或样式

2)ngInit指令声明的Model变量可以先使用再声明

3)ngInit指令可以一次声明多个Model变量，用分号隔开即可

4)ngInit指令可以声明哪些类型的Model变量：

       number、string、boolean、对象、数组、对象的数组

    注意：使用ngInit定义Model变量时不能使用new关键字；此方法把View和Model混杂在一起，不推荐使用！

  (2)使用Controller创建Model变量——推荐使用  

    创建Module <= 创建Controller <= 创建Model变量

    注意：新版本的Angular要求控制器必须声明在一个模块中！

    具体步骤：

    1)声明一个自定义的模块(module)

         angular.module('模块名', [ ])

    2)在当前AngularJS应用中注册自定义模块

ng-app="模块名"

    3)在自定义模块中创建Controller函数，其中创建Model数据

$scope.模型变量名 = 值;

    4)在View中创建Controller对象的实例，指定其作用范围

<ANY ng-controller="控制器名">...控制器的有效范围...</ANY>

    5)在控制器的作用范围内输出Model变量

可以使用{{}}输出Model变量的值

 

 

1.使用MVC模式

 

  1)自定义模块

 

  2)ngApp中注册自定义模块

 

  3)模块中创建Controller，其中声明Model数据

 

  4)在view中创建Controller实例

 

  5)在Controller范围内输出Model数据

 

1.$scope和$rootScope

  (1)每个控制器的实例都对应一个作用范围对象，即$scope

  (2)在控制器中声明的Model数据，必须保存在一个作用范围内

  (3)一个HTML中可以声明多个控制器实例，每个控制器都有自己的作用范围，这些范围内的数据彼此隔离不会互相影响，可以由不同开发人员来编写

  (4)为了在多个控制器间共享数据，可以将Model数据保存在一个“全局作用范围内”——$rootScope——整个AngularApp中有且只有一个$rootScope对象，且此对象是所有的$scope的父作用域对象

  (5)作用域对象间可以实现继承，只需要将某个控制器实例声明在另一个控制器实例的有效作用域内部即可。

 

（补充）ng模块中提供的指令

  1)ngSrc：解决img等标签的src属性中包含{{}}产生的404问题

语法： <img ng-src="路径/{{表达式}}"/>

  2)ngClick:  为元素绑定监听函数(不是全局函数，而是Model函数)

语法： <ANY ng-click="模型函数()">

注意： 使用$scope.模型函数名 = function(){}格式来声明模型函数。提示：传统的onXxx事件句柄都有一个对应的ngXxx版本。

  3)ngStyle:  赋值为一个Model对象，用于为当前元素指定样式

语法： <ANY ng-style="模型对象"></ANY>

  4)ngShow/ngHide: 通过display：none/block来控制当前元素是否显示

语法： <ANY ng-show/hide="表达式"></ANY>

  5)ngDisabled:  赋值为true/false，可以控制当前元素是否禁用

语法： <ANY ng-disabled="表达式"></ANY>

  6)ngChecked:  赋值为true/false，可以控制当前元素是否选中

语法： <ANY ng-checked="表达式"></ANY>