AngularJS（一）——從零開始AngularJS
阿新 • • 發佈：2019-02-09
雖然已經使用了不短的時間 ，但對於 AngularJS 的瞭解還很淺，也沒有系統的學習過，下面慢慢來，系統的梳理一遍 AngularJS ，順帶學習點之前幾乎沒有自己寫過的 filterdirective service 等等。廢話少說，第一篇就來看看如何開始使用AngularJS 。
簡單來說，只需兩步，就能用上高階大氣上檔次的基於 MVC 的 AngularJS ：
1.index.html：
<!doctypehtml> <html lang="zh-cmn-Hans"> <head> <base href="../"> <!-- 這裡我們省略了各種<meta>標籤 --> <title>Learn AngularJS</title> </head> <body ng-app="LearnModule" ng-cloak> <div ng-controller="FirstController"> <!-- 通過{{}}形式取$scope.person.name並渲染 --> <p>My Name Is {{person.name}}.</p> </div> <div ng-controller="SecondController"> <p>There Is {{money}} Money.</p> </div> <script src="angular-1.3.15/angular.js"></script> <script src="index.js"></script> </body> </html>
2.index.js：
//宣告module
var app =angular.module("LearnModule", []);
//宣告第一個controller
app.controller("FirstController", [ //指定需要注入的模組
"$scope",
function($scope) {
$scope.person = {};
$scope.person.name = "Lucy";
}
]);
//宣告第二個controller
app.controller("SecondController", [
"$scope",
"$filter",
function($scope, $filter) {
$scope.money = $filter("currency")(12.5);
}
]);注意以下三點：
1.在一個 html 頁面中只允許存在一個module ，可以在一個 module 下宣告多個controller ，通過在 html 中使用 ng-controller指令來指定使用哪個 controller 。
2.在宣告 controller 時用到了AngularJS 的依賴注入特性，通過 [] 中的字串形式顯式宣告我們依賴哪些模組，並在 [] 中最後的 function 中傳入，當然，function($scope,$filter) 中的引數名都是可以自定義的，但原則上與注入名稱相同。
3. $scope 物件在 AngularJS 中充當資料模型（M），但與傳統的資料模型不一樣，
完。
參考資料：
《AngularJS 權威教程》 作者：Ari Lerner 譯者：趙望野 徐飛 何鵬飛