<html ng-app='myApp'><!-- 設定模組名稱為 myApp -->
<meta charset="utf-8">
<body ng-controller='myController'>
<p>Hello {{txt}}</p>
<p ng-bind=" 'Hi ' + txt"></p><!-- 未完成動作前無顯示內容 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script>
// 建立名稱為 myApp 的模組。第二個參數空陣列表示 "建立", 沒有給表示 "取得"
var myAppModule = angular.module('myApp', []);
// 設定 controller
myAppModule.controller('myController',
function($scope) {
$scope.txt = "John";
});
</script>
</body>
</html>- 以 ng-app 設定模組名稱。
- angular.module() 建立模組。
- 以模組的 controller() 設定控制器。
ng-bind 和 {{}} 都是設定 data-binding 的方式。ng-bind 的優點是 AngularJS 尚未處理完時，不會出現模版文字。
沒有留言:
張貼留言