AngularJS学习笔记（1）

一、AngularJS 是什么

    1.前端 JS 框架 

    2.为了克服HTML在构建应用（app）上的不足而设计的

    3.已收归 Google

二、AngularJS 的特点

    1.MVVM (Model-View-ViewModel)

    2.模块化

    3.双向数据绑定

    4.语义化标签

    5.依赖注入

三、AngularJS 怎么写

    0.从一个 AngularJS 实例开始   

<div ng-app="myApp" ng-controller="myCtrl">
    First name: <input type="text" ng-model="firstName"><br>
    Last name: <input type="text" ng-model="lastName"><br>
    <br>
    Name: {{firstName + " " + lastName}}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "Jackie";
        $scope.lastName= "Chan";
    });
</script>

    

     1.指令

    （1）在实例中，

        ng-app 指令初始化一个 AngularJS 应用程序。

        ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

         ng-controller 指令定义了应用程序控制器。

    （2）指令 是以 ng- 作为前缀的 HTML 属性；

    （3）AngularJS 通过指令来扩展 HTML。

    2.表达式

        （1）表达式写在双大括号内：{{ expression }}。

        （2）表达式把数据绑定到 HTML，表达式书写的位置将会"输出"数据。

        （3）所有表达式都在其所属的作用域内部执行，并有访问本地 $scope 的权限。

        （4）表达式可以包含文字、运算符和变量，但不允许任何流程控制功能（条件判断，循环及异常）。

        （5）表达式支持过滤器。

    3. 模块（Module）

        （1）模块定义了 AngularJS 应用

        （2）定义一个模块：

     

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

          

            angular.module() 方法接受两个参数：1.模块的名称，2.依赖列表 。

    4.控制器（Controller）

        （1）控制器用于控制 AngularJS 应用

        （2）定义一个控制器： 

    

    app.controller('myCtrl', function($scope) {
        $scope.firstName= "Jackie";
        $scope.lastName= "chan";
    });

            

        （3） AngularJS 使用 $scope 对象来调用控制器。

        （4）控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

        （5）控制器支持套嵌：

    <div ng-controller="ParentController">    
        <div ng-controller="ChildController">
            //...
        </div>
     </div>

（未完待续）