AngularJS入門教學之模組化操作用法範例-js教程-PHP中文網

AngularJS入門教學之模組化操作用法範例

高洛峰

發布： 2016-12-08 11:08:40

原創

980 人瀏覽過

本文實例講述了AngularJS模組化操作用法。分享給大家供大家參考，具體如下：

在前面幾節教程中，代碼比較少，為了方便說明問題筆者將控制器代碼都寫在了HTML頁面中，實際上這並不是什麼好的程式設計習慣，而且可維護性差。通常的做法都是將處理業務邏輯的程式碼寫在一個單獨的JS檔案中，然後在HTML頁面中引入該檔案。

然而這樣會帶來新的問題，我們的控制器全都定義在全局的命名空間中，假設我們有一個公共的JS文件，在登錄頁面和密碼修改頁面都引入這個JS，A開發人員和B開發人員英雄所見略同，控制器的命名都是UserController，這樣就會導致命名衝突。而且我們在新增一個控制器的時候總是要擔心是不是已經有了一個同名的控制器，程式碼的擴充性是不是很差呢？

AngularJS中的模組能夠很好的解決這個問題，接下來我們來看看AngularJs怎麼處理命名衝突問題。

程式清單1. tutorial04_1.html

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_1</title>
</head>
<body>
<div ng-controller="UserController">
 用户名：<input type="text" ng-model="name" placeholder="用户名"/>
 密码：<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名：{{name}}</p>
 <p>您输入的密码：{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

登入後複製

程式清單2.tutorial04_2.html

<!DOCTYPE html>
<html ng-app="pwordMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_2</title>
</head>
<body>
<div ng-controller="UserController">
 密码：<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="changePwrd()">提交</button>
 <p>您输入的密码：{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>

登入後複製

我們有登入頁tutorial04_1. html和修改密碼頁面tutorial04_2.html，控制器程式碼都寫在tutorial04.js中，在這兩個頁面中都定義了相同的控制器UserController。

var loginMod = angular.module("loginMod", []);
loginMod.controller("UserController",function($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登录");
  }
 }
);
var pwordMod = angular.module("pwordMod", []);
pwordMod.controller("UserController",function($scope,$log)
 {
  $scope.pword="123456";
  $scope.changePwrd = function()
  {
   alert("修改密码");
  }
 }
);

登入後複製

透過這行程式碼定義模組，第一個參數為模組名。第二個參數是一個數組，為可選，如果指定該參數則建立新的模組，不指定則從配置中檢索。

var loginMod = angular.module("loginMod", []);

登入後複製

透過controller函數將一個控制器，第一個參數為控制器名稱，第二個參數為控制器實現部分。

然後在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"來指定頁面中的控制器屬於哪個模組。

在瀏覽器中運行頁面可以看到，不同頁面呼叫不用模組中的UserController控制器：

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

AngularJS入門教學之模組化操作用法範例