AngularJS 中的 模組(Module) 顧名思義就像是遊戲中的裝備一樣,除了可以自訂之外也可以拿別人寫好的 Module 嵌到自己的網頁使用
一般基本 Controller 用法
HTML
<form ng-controller="AgeCtrl">
<label>Age:</label>
<input ng-model="age">
你 {{age}} 歲
</form>
Javascript
function AgeCtrl($scope) {
$scope.age = '13';
}
這個功能很簡單,其實就是輸入年紀時會同步顯示你幾歲
改寫成自訂Module
module.js
// 定義一個module(name, requires)
// 傳入參數為 模組名稱及與該模組相依的模組
var ballApp = angular.module('BallApp', []);
// 如果init module 和使用是在不同檔案,可以直接使用 Module
// angular.module('BallApp');
// 新增 Controller
ballApp.controller('AgeCtrl', function($scope) {
$scope.age = '13';
});
HTML(注意:記得使用ng-app 加入module)
<!DOCTYPE HTML>
<html ng-app="BallApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="module.js"></script>
</head>
<body>
<form ng-controller="AgeCtrl">
<label>Age:</label>
<input ng-model="age">
你 {{age}} 歲
</form>
</body>
</html>