前言：之前也斷斷續續接觸了angular的相關內容，也沒有加以實施運用。AngularJS 使得開發現單一頁面應用程序變得更加容易。今天剛好做完了一個angular小demo，藉此把之前的學習筆記整合了一下。
指令
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
<body ng-app="lacy">
<div class="demo1">
<input type="text" ng-model="name"/>
<p>你輸入的是 <span>{{name}}</span></p>
</div>
</body>此時控制檯報錯。爲什麼？
由於ng-app在html裏面我用；lacy命名，但在腳本里面並沒有定義所以出了錯。把代碼中的ng-app=”lacy”改爲ng-app=”“就不再報錯。
當網頁加載完畢，AngularJS 自動開啓。
ng-app 指令告訴 AngularJS，
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。
ng-init 指令初始化 AngularJS 應用程序變量。
<body ng-app="" ng-init="user='lacy'">
<div class="demo1">
<input type="text" ng-model="name"/>
<p>你輸入的是 <span>{{name}}</span></p>
<p ng-bind="user"></p>
</div>
</body>ps： HTML5 允許擴展的屬性，以 data- 開頭。AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名爲 <span data-ng-bind="firstName"></span></p>
</div>AngularJS 表達式寫在雙大括號內：{{ expression }}
等價於ng-bind
<p>{{1+1}}</p>
<p>{{name+user}}</p>
<p ng-bind="name+user"></p>AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
<body ng-app="myApp" ng-init="user='lacy'" ng-controller="myCtrl">
<div class="demo1">
<input type="text" ng-model="name"/>
<p>你輸入的是 <span>{{name}}</span></p>
<p ng-bind="user"></p>
<p>{{1+1}}</p>
</div>
</body>
<script src="Common/js/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name = 'google';
})
</script>
ng-repeat 指令會重複一個 HTML 元素
<li ng-repeat="x in names">{{x}}</li> $scope.names = ['a','b','c']自定義指令
.directive 函數來添加自定義的指令
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive
你可以通過元素名、屬性、類名、註釋（E,A,C,M）方式來調用指令：
<div my-zhi-lin></div>
<div class="my-zhi-lin"></div>
<my-zhi-lin></my-zhi-lin>app.directive('myZhiLin',function(){
return{
//restrict : 'E',
template : '<h1>這是我自定義的指令哈哈哈哈</h1>'
}
})