Angular Modules 模組就像一個模型
你玩過模型嗎?
什麼模型?
像是鋼彈啊,之類的啊…
唷,有啊有啊
那問你唷,那你組這個模型是不是一個一個零件慢慢組合的啊?
是啊,那跟這個主題Angular Modules有什麼關係嗎...?
當然有,Angular Modules就像模型一樣,把需要的功能零件一個一個個組合起來
唷,還不是很清楚,可以詳細點說明嗎?
那我們用實際例子來說吧
(JS Bin:https://jsbin.com/cixadaluru/3/edit?html,js,output)
首先我們來建立一個叫做angAPP的Module(這裡需注意ng-app為ng-app=“angAPP")
並使用angular.module(name, requires)的方法去產生Module
Source:
var angAPP = angular.module('angAPP',[]);
好了,之後我們在我們的View加入等等我們要的畫面零件
(這邊需要注意ng-controller=“angCtrl”,此行下一段會提到)
Source:
<form ng-controller=“angCtrl">
<input type="number" ng-model="num1">
<span>+</span>
<input type="number" ng-model="num2">
<span>=</span>
{{num1 + num2}}
</form>
那好,之後我們要給num1,num2初始值
首先,建立Controller給它使用,在設定初始值
並使用.controller(name, constructor)的物件方法去產生Model
(參考資訊:https://docs.angularjs.org/api/ng/type/angular.Module)
(這裡需注意Controller的名稱跟上段的ng-controller=“angCtrl”需要是一樣的唷)
Source:
angAPP.controller('angCtrl', function($scope){
$scope.num1 = 90;
$scope.num2 = 10;
});
這樣就完成了,你看看吧,有沒有像模型或積木一樣
有耶,真的是逐層建立起來的說
那後面我們會在簡易介紹一些AngularJS Directives方面的東西,讓你稍微有點概念