最近在讀一本書《精通AngularJS》，覺得不錯，於是做一下筆記，方便記憶。
一個簡單的angular代碼：
<html><head> <script src="//cdn.bootcss.com/angular.js/1.2.28/angular.js"></script> <script type="text/javascript"> var HelloCtrl = function ($scope) { $scope.name = 'World'; $scope.getName = function() { return $scope.name; }; } </script></head><body ng-app><div ng-controller="HelloCtrl"> Say hello to: <input type="text" ng-model="name"><br> <h1>Hello, {{name}}!</h1> <h2>{{getName()}}</h2></div></body></html>
啟動並執行效果圖如下：
在body上綁定ng-app代表當前頁面body元素收到angular控制，ng-controller綁定的元素受到angular的控制器HelloCtrl控制，$scope是一個全域對象，可以再頁面上直接存取$scope的屬性和方法。
注意：上面這種寫法只適用於angular版本低於1.3的時候，高於1.3的話，需要寫成下面這樣：
<html><head> <script src="//cdn.bootcss.com/angular.js/1.3.17/angular.js"></script> <script type="text/javascript"> angular.module('app',[]).controller('HelloCtrl',function ($scope) { $scope.name = 'World'; $scope.getName = function() { return $scope.name; }; }) </script></head><body ng-app = 'app'><div ng-controller="HelloCtrl"> Say hello to: <input type="text" ng-model="name"><br> <h1>Hello, {{name}}!</h1> <h2>{{getName()}}</h2></div></body></html>
效果是等同的，只是多定義了一個模組app，更符合MVC的思想，建議採用下面這種方式。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
