AngularJS-2

1. AngularJS表达式

    <div ng-app="App3">
        <!-- 数字 -->
        <div ng-init="x = 5; y = 10.234"></div>
        <p>{{x * y}}</p>
        <p ng-bind="x * y"></p>
        <hr>
        <!-- 数组 -->
        <div ng-init="arr = [2, '3a', 4, 2, 'a']"></div>
        <p>第2个元素为：{{arr[1]}}</p>
        <p ng-bind="'第2个元素为：' + arr[1]"></p>
        <hr>
        <!-- 字符串 -->
        <div ng-init="name = 'a b c d'"></div>
        <p>{{name}}</p>
        <p ng-bind="name"></p>
        <hr>
        <!-- 对象 -->
        <div ng-init="user = {username:'root', password:'1'}"></div>
        <p>用户名：{{user.username}}，密码：{{user.password}}</p>
        <p ng-bind="'用户名：' + user.username + ', 密码：' + user.password"></p>
    </div>
    <script>
        angular.module("App3", []);
    </script>

运行结果：

2. AngularJS指令

ng-repeat：重复HTML元素

    <div ng-app="App4">
        <ul ng-init="users=[{name:'q1', password:'z1'}, {name:'w1', password:'x1'}]">
            <!-- ng-repeat:重复HTML元素 -->
            <li ng-repeat="x in users">{{x.name}}</li>
        </ul>
    </div>
    <script>
        angular.module('App4', []);
    </script>

自定义指令：.directive()函数

    <div ng-app="App4">
        <ul ng-init="users=[{name:'q1', password:'z1'}, {name:'w1', password:'x1'}]">
            <!-- ng-repeat:重复HTML元素 -->
            <li ng-repeat="x in users">{{x.name}}</li>
        </ul>
        <hr>
        <!-- 自定义指令 -->
        <wang-directive></wang-directive>
        <p wang-directive></p>
    </div>
    <script>
        var app = angular.module('App4', []);
        app.directive('wangDirective', function() {
            return {
                restrict : "EA",
                template : "<h1>自定义指令</h1>"
            };
        });
    </script>

注：
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

3. AngularJS作用域（scope）

1. 对于AngularJS应用来说，它的MVC分别指：M（模型，当前视图中的可用数据）、V（HTML）、C（JavaScript函数，添加或修改属性）
2. scope：应用在HTML（视图）和JavaScript（控制器）之间的纽带，它是一个JavaScript对象，有自己的属性和方法
3. 根作用域：$rootScope，它可以作用在ng-app指令包含的所有HTML元素中。既其作用域整个应用，是各个Controller中scope的桥梁，可用在各个controller中使用

    <div ng-app="App5" ng-controller="controller3">
        <input type="text" name="name" id="name" ng-model="name">
        <h1>{{root}}</h1>
        <button ng-click="fun()">点我</button>
    </div>
    <script>
        var app = angular.module('App5', []);
        app.controller('controller3', function($scope, $rootScope) {
            $scope.name = '惘';
            $rootScope.root = '顾';
            $scope.fun = function() {
                alert($scope.name + $rootScope.root);
            };
        });
    </script>