Angular JS

Angular JS 是一个JavaScript框架。他可以通过

表达式

AngularJS 表达式的写法为：“{{ message }}”。
AngularJS 表达式作用和ng-bind 指令相似，将数据绑定到HTML。
AngularJS 表达式可以包含文字、运算符和变量.
AngularJS 表达式不支持条件判断，循环及异常。
AngularJS 表达式支持过滤器。

下面来一下如何定义不同的数据类型：

1. 数字

   
   
        
        
   乘积： {{ a * b }}
        
   乘积：  
   
    
   

2. 字符串

   
   
        
   姓名： {{ guo + " " + hh }}
        
   姓名： 
   
    
   

3. 数组

   
   
   
        
   第二个值为 {{ arr[1] }}
        
   第二个值为 
   
    
   
   

4. 对象

   
   
        
   姓名： {{ name.guo +" "+ name.hh}}
        
   姓为 
   
    
   
   

应用

AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

例如：

 
名: 

姓: 



姓名: {{firstName + " " + lastName}}
 

 

作用域 Scope

概述

Scope 的主要作用是连接HTML（视图）和控制器，Scope在AngularJS的应用组成中属于 模型 ，scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

    
    
{{welcome}}
    点我   

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
$rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。

{{surname }} 姓家族成员:


    
{{surname }} {{n}} 

控制器 ng-Controller

AngularJS 控制器 控制 AngularJS 应用程序的数据；是常规的 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

外部文件中的控制器

相当于JavaScript外部js文件，引用方法如下：

过滤器

过滤器可以理解为：自己封装的一个方法，用来对某个表达式或指令进行操作。

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

Angular JS 提供了几个简单的过滤器如下：

过滤器	描述
currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

    
输入过滤:

    


    

        

        {{ (i.name | uppercase) + ', ' + i.country }}
        
    

自定义过滤器

    姓名: {{ name | custom }}

$watch 服务

$watch服务持续监听数据上的变化，更新界面。调用方法如下：

$scope.$watch('', function() {  });

自定义服务

创建了自定义服务，并连接到应用上后，就可以在控制器，指令，过滤器或其他服务中使用它。如下实例代码：octal 为服务名，func为该服务的方法名，我们就可以通过octal.func()来调用。

20 的 8 进制是:

{{oct}}