Angular JS 入门

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。scope 是模型,scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。ng-controller 指令定义了应用程序控制器。

AngularJS 指令

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

2.ng-init 指令初始化应用程序数据。

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

4.ng-repeat 指令会重复一个 HTML 元素(循环)

<body>
    @*声明作用域*@
    <div ng-app="myApp" ng-controller="myCon">
        <input type="text" ng-model="name" />
        计算： {{5+5}}
        {{name}}
        <div ng-init="price=5;count=4">
            @*初始化值*@
            结果：{{price * count}}
        </div>
        <div ng-init="price=6;count=7">
            <input type="text" ng-model="price" />@*绑定值到控件*@
            <input type="text" ng-model="count" />
            结果:{{price*count}}
        </div>
        <div ng-init="point=[1,2,3,4]">
            <ul>
                <li ng-repeat="x in point">{{x}}</li>@*循环输出*@
            </ul>
        </div>
        <div>
            <input type="text" ng-model="spname" />
            <span>您输入了：{{spname}}</span>
        </div>
        <form name="myForm">
            Email:<input type="email" name="mailAddress" ng-model="text" />
            <span ng-show="myForm.mailAddress.$error.email">非法邮箱地址</span>
        </form>
        <div>
            <input type="text" ng-model="gname" />
            {{greeting}}
            <input type="button" ng-click="sayHello()" value="点我" />
        </div>
        <div ng-controller="zsCon">
            <span>{{lastName}}:家族成员</span>
            <ul>
                <li ng-repeat="t in  lNames">{{t}}{{lastName}}</li>
            </ul>
        </div>
    </div>
    <br />

</body>

<script>
    var app = angular.module("myApp", []);
    app.controller('myCon', function ($scope) {
        $scope.spname = "haha";
    });
    app.controller('myCon', function ($scope) {
        $scope.gname = "peter";
        $scope.sayHello = function () {
            $scope.greeting = 'Hello,' + $scope.gname + "!";
        }
    });
    app.controller('zsCon', function ($scope, $rootScope) {
        $scope.lNames = ["白起", "孙武", "孙膑"];
        $rootScope.lastName = "战神";
    })
</script>