Angular.js入门

Angular.js是一款优秀的前端MVVM（Model View View Model）框架。诞生于2009年，后来被谷歌收购。

版本
目前最新的版本是Angular.js4.0，但本文中使用的为1.5.3，基本是通用版本。
主要是因为angularjs在2.0使用typescript的语法编写。typescript也可以说成是C#语言编写后再通过转编译成js代码的一个编译器。

初始化

• ng-app
  在html标签中添加这个属性可以直接初始化angular.js，当然只是简单的应用。

    
{{ 2+3 }}

在网页中显示：

5
花括号中数据会被angular识别，进行处理。

如果要进行进一步的操作，就必须要给它取个名字：ng-app="app"。
然后，js中初始化

    var app=angular.module('app',[]);

[]中是这个app的注入依赖，当需要额外的功能时可以添加，但空数组必须存在。

作用域

在angular中有全局作用域，以及局部作用域；

• 全局作用域通过run方法进行声明；

app.run(function($rootScope){
    $rootScope.box = '我是全局的属性'; //定义一个全局的作用域        
})

这种写法下传入的形参必须写死：$rootScope。
另外一种写法：

app.run('$rootScope',function(root){
    root.box = '我是全局的属性'; //定义一个全局的作用域
})

这种方式下，形参就可以随意书写;

• 局部作用域
  Angular中的局部作用域需要通过初始化一个控制器来实现；
  先在html中绑定控制器;

然后在初始化控制器;

app.controller('wrapper', ['$scope',function(scope){
    scope.name = '67';
    scope.yui = 890;
    scope.color = 'red';
}])

也可以写成：

app.controller('wrapper',function($scope){
    scope.name = '67';
    scope.yui = 890;
    scope.color = 'red';
})

与函数作用域相同，如果这个局部作用域中找不到这个属性或者方法时，它就会先在父级作用域中查找，然后一级一级往上，在全局作用域中查找；

ng-model

表单中的变量通过ng-model来声明

{{value}}

这样改变表单值的同时，P标签的文本内容同时也改变了

ng-repeat

可以遍历我们的dom结构
首先，写个数组：

item就是这个数组的每一项；

    {{item.name}}---{{item.age}}

结果就是这样：

• 1---18
• 2---18
• 3---18
• 4---18

如果数组值都是一样的

就必须在后面加入track by $index

    {{item}}

结果：

• 1
• 1
• 1
• 1
• 1
• 1
• 1
• 1

ng-click

绑定点击事件执行的函数

显示

ng-show

传入布尔值，是否显示元素。