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>