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>
Categories: AngularJS