[AngularJS] Module: AngularJS 的模組
AngularJS 模組
AngularJS module可以將AngularJS 定義成各個模組，而各個module會有屬於各自的Controller。
新增一個 Module
使用AngularJS 的function angular.module 建立module。
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" 參數定義了在哪個HTML元素裡使用AngularJS 。
現在，加上AngularJS 的 controller。
新增一個 Controller
新增一個controller，並加入ng-controller指令。
<div ng-app="myApp" ng-controller="myCtrl">
{{Hello+Name}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.Hello = "你好!我是";
$scope.Name = "Berry";
});
</script>
新增一個 Directive
除了AngularJS內建的指令(Directive)外，也可以自行定義指令。
如下:
<div ng-app="myApp" hello></div>
<script>
var app = angular.module("myApp", []);
app.directive("hello", function() {
return {
template : "哈囉~"
};
});
</script>
使用JavaScript檔案中的Modules 及 Controllers
通常，AngularJS的module以及controller會被放置在JavaScript檔中，再呼叫使用。
現在，將module與controller分別拆到JS檔中。
分別建立myApp與myCtrl兩個JS檔:
myApp.js 內容:
var app = angular.module("myApp", []);
myCtrl.js 內容:
app.controller("myCtrl", function ($scope) {
$scope.firstString = "Hello";
$scope.secondString = "World";
});
HTML的module以及controller改為引用JS:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstString + " " + secondString }}
</div>
<script src="~/Scripts/myApp.js"></script>
<script src="~/Scripts/myCtrl.js"></script>
執行畫面:
