AngularJS 之应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body  ng-app="myApp">
    <form ng-controller="myController">
        <div>我的笔记</div>
        <textarea name="memo" id="" cols="30" rows="10" ng-model="mMemo" ></textarea>
        <p>剩余<span ng-bind="left()"></span>个字符</p>
        <div>
            <button name="save" ng-click="save()">保存</button>
            <button name="clean" ng-click="clear()">清除</button>
        </div>
    </form>
    <script>
        var app = angular.module('myApp',);
        app.controller("myController",function($scope){
            $scope.maxLen = 100;
            $scope.mMemo = "";
            $scope.left = function(){
                return 100 - $scope.mMemo.length;
            }
            $scope.save = function(){
                alert("Note saved");
            }
            $scope.clear = function(){
                $scope.mMemo = "";
            }
        });
    </script>
</body>
</html>
  

AngularJSHTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令, AngularJS 载入指令中的模块,并将 ng-app 作为应用的根进行编译。

应用的根可以是整个页面,或者页面的一小部分,如果是一小部分会更快编译和执行。