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，当然只是简单的应用。

<div ng-app>
    <p>{{ 2+3 }}</p>
</div>

在网页中显示：

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中绑定控制器;

<div class="wrapper" ng-controller="wrapper">

然后在初始化控制器;

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来声明

<input type="text" ng-model="value">
<p>{{value}}</p>

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

ng-repeat

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

<script>
    $scope.list = [{
    name: 1,
    age: 18
},{
    name: 2,
    age: 18
},{
    name: 3,
    age: 18
},{
    name: 4,
    age: 18
}]
</script>

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

<li ng-repeat="item in list">
    {{item.name}}---{{item.age}}
</li>

结果就是这样：

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

如果数组值都是一样的

<script>
   $scope.arr = [1,1,1,1,1,1,1,1]
</script>

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

<li ng-repeat="item in arr track by $index">
    {{item}}
</li>

结果：

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

ng-click

绑定点击事件执行的函数

<button ng-click="show()">显示</button >

ng-show

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

<div ng-show="visible"  class="box" style="width: 200px;height: 200px;><div>

最后写个函数

<script>
        $scope.visibel=true;
        $scope.show=function(){
            $scope.visibel=!$scope.visibel;
        }
</script>