Angularjs的工程化
AMD規範和CMD規範
為什麼需要模組化管理工具
在編寫專案時可能需要載入很多js檔案,若b.js依賴a.js,且a.js比b.js大很多,那麼瀏覽器會讓b.js等待a.js載入完畢後再去執行b.js裡的內容;而即使d.js並不依賴a.js,b.js,c.js,也會等待這三個檔案均載入完畢才執行,為了讓瀏覽器能夠按需載入,提出了模組化管理工具。
<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript" src="js/b.js"></script>
<script type="text/javascript" src="js/c.js"></script>
<script type="text/javascript" src="js/d.js"></script>
AMD規範
全稱為Asynchronous Module Defined,即非同步模組管理,它透過使用依賴注入等方法完整描述了模組的定義、依賴關係、引用關係以及載入機制,AngularJS、RequireJS均是符合AMD規範的。
define函式
函式中有三個引數,前兩個引數可以省略,第三個引數是模組的具體實現本身。 當define函式執行時,它首先會非同步呼叫第二個引數中列出的依賴模組,當所有的模組被載入完成之後,如果第三個引數是一個回撥函式則執行,然後告訴系統模組可用,也通知了依賴於自己的模組自己已經可用。
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中:
module-name: 模組標識,可以省略。
array-of-dependencies: 所依賴的模組,可以省略。
module-factory-or-object: 模組的實現,或者一個JavaScript物件。
下面程式碼定義了一個alpha模組,並且依賴於內建的require,exports模組,以及外部的beta模組。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
};
});
案例
專案結構
案例
│ test.html
│
└─js
│ main.js
│ math.js
│ pi.js
│
└─lib
require.js
專案程式碼
test.html
<!DOCTYPE html>
<html>
<head>
<title>RequireJS學習</title>
</head>
<body>
<script data-main="js/main.js" src="js/lib/require.js"></script>
<!-- main.js是主入口檔案 -->
</body>
</html>
main.js
requirejs.config({
baseUrl: 'js', //所有js程式的根目錄
paths: {
//別名
"math": "math"
}
});
requirejs(["math"],
function(math){
alert(math.squre(8));
alert(math.area(10));
});
alert("hello");
math.js
define(["pi"], function(pi){
alert("我是math");
return {
"squre": function(number){
return number * number;
},
"area": function(r){
return pi.pi * r *r;
}
};
});
pi.js
define({
"pi": 3.1415926
})
專案說明
-
在html檔案中引包時需要同時指定require.js檔案和main.js檔案;
-
main.js是主入口檔案,只有主入口main.js能用requirejs,其他入口只能用define;
-
math.js用define定義模組,模組暴露的API用return返回;
-
main.js中如果有語句不需要依賴別人的語句,可以不寫在回撥函式里面,而現在很少有機會不在回撥函式中寫語句,即AMD和CMD越來越像。
CMD規範
全稱為Common Module Defined,即普通模組管理,其執行過程是懶式的。NodeJS、SeaJS、CommonJS、webpack均是符合CMD規範的。
define函式
define(function(require, exports, module) {
// 模組定義在此
});
AngularJS的工程化
angular-async-loader
angular-async-loader可以輕鬆解決ReuqireJS和AngularJS之間的粘合問題。angular-async-loader官網
安裝前端依賴
大體思路就是用RequireJS配置AngularJS專案,配置步驟如下。
-
進入專案資料夾,在命令列視窗執行下列指令,建立bower前端依賴檔案。
bower init
-
建立.bowerrc檔案並進行配置(先建立一個空文件,再在命令列用rename重新命名為.bowerrc),配置內容如下,配置後,用bower下載的模組會生成在assets資料夾下。
{ "directory" : "assets" }
-
安裝AngularJS。
bower install angular --save
-
安裝ui-router。
bower install angular-ui-router --save
-
安裝RequireJS。
bower install requirejs --save
-
安裝angular-async-loader。
bower install angular-async-loader --save
書寫三大檔案
三大檔案為app-routes.js、app.js、bootstrap.js。
在專案根目錄下分別建立ngApp資料夾、app-routes.js、app.js、bootstrap.js、index.html檔案。
bootstrap.js
bootstrap.js是RequireJS的入口檔案。
require.config({
baseUrl: '/',
//別名
paths: {
'angular': 'assets/angular/angular.min',
'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',
'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min'
},
//宣告paths中元素暴露的介面和依賴
shim: {
'angular': {exports: 'angular'}, //暴露的是angular
'angular-ui-router': {deps: ['angular']} //依賴的是angular
}
});
//核心入口
require(['angular', './app-routes'], function (angular) {
//當整個文件就緒之後
angular.element(document).ready(function () {
//angular.bootstrap是一個方法,表示啟動angular
angular.bootstrap(document, ['myapp']);
//透過類名新增ng-app指令,也可以透過attr來新增
angular.element(document).find('html').addClass('ng-app');
});
});
app.js
app.js中建立了app物件。
define(function (require, exports, module) {
//這是一個CMD規範的模組,模組的作用是向外暴露app整體
//AMD只能向外暴露json形式的API
//引入依賴
var angular = require('angular');
var asyncLoader = require('angular-async-loader');
require('angular-ui-router');
//建立app物件,app物件依賴ui.router
var app = angular.module('app', ['ui.router']);
// initialze app module for angular-async-loader
asyncLoader.configure(app);
//向外暴露
module.exports = app;
});
app-routes.js
app-routes.js中定義了路由,這裡採用了連續依賴,bootstrap.js依賴app-routes.js,app-routes.js依賴app.js。
define(function (require) {
//引入app物件
var app = require('./app');
//定義路由
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
template: '<h1>我是首頁!</h1>'
});
}]);
});
index.html
index.html是唯一的單頁面,但不表示只存在一個html頁面,其他頁面可作為模板存在,在index.html檔案中建立一個ui-view容器,然後用RequireJS語法引用入口檔案bootstrap.js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
測試系統
</title>
</head>
<body>
<ui-view></ui-view>
<script type="text/javascript" src="assets/requirejs/require.js" data-main="bootstrap.js"></script>
</body>
</html>
ngApp
ngApp裡可根據場景建立相應資料夾,存放編寫控制器、服務和指令等內容的js檔案。此處建立root資料夾和home資料夾。
root
RootCtrl.js
define(function (require) {
var app = require('app');
require('./rootService');
// dynamic load services here or add into dependencies of ui-router state config
// require('../services/usersService');
app.controller('RootCtrl', ['$scope', 'rootService', function ($scope, rootService) {
this.a = rootService.m;
}]);
});
rootService.js
define(function (require) {
var app = require('app');
// dynamic load services here or add into dependencies of ui-router state config
// require('../services/usersService');
app.factory("rootService", function () {
return {
m : 9
}
});
});
template.html
<div>
<header>
<h1>我是root的template檔案</h1>
{{rootCtrl.a}}
<nav>
<a ui-sref="root.home" ui-sref-active="cur">首頁</a>
</nav>
</header>
<ui-view> </ui-view>
<footer>我是footer</footer>
</div>
home
HomeCtrl.js
define(function (require) {
var app = require('app');
require('jquery'); //var $ = require('jquery');為什麼不用變數接收,因為jquery的原理就是給window物件新增屬性
require('jquery-ui');
app.controller('HomeCtrl', [function () {
this.a = 100;
$('.box').animate({ 'font-size': 100 }, 1000, function () {
$(this).css("color", "red");
$(this).draggable();
});
}]);
});
template.html
<div>
<h1>我是首頁。{{homeCtrl.a}}</h1>
<div class="box">你好</div>
</div>
jquery的引用
法一:
最簡單的方法就是在index.html上引用,這樣可以在全域性上使用$函式,缺點是不管頁面是否使用jquery,總是先會載入完畢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試系統</title>
<link rel="stylesheet" href="css/root.css" />
</head>
<body>
<ui-view></ui-view>
<script
type="text/javascript"
src="/assets/jquery/dist/jquery.min.js"
></script>
<script
type="text/javascript"
src="/assets/requirejs/require.js"
data-main="bootstrap.js"
></script>
</body>
</html>
法二:
也可以在bootstrap.js上起一個別名,使用RequireJS載入jquery。
require.config({
baseUrl: '/',
//別名
paths: {
'angular': 'assets/angular/angular.min',
'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',
'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min',
'jquery': 'assets/jquery/dist/jquery.min'
},
//宣告paths中元素暴露的介面和依賴
shim: {
'angular': {exports: 'angular'}, //暴露的是angular
'angular-ui-router': { deps: ['angular'] }, //依賴的是angular
'jquery': {exports: 'jquery'} //暴露的是jquery
}
});
然後在需要使用jquery的控制器中寫入如下程式碼。
define(function (require) {
var app = require('app');
var jquery = require('jquery');
app.controller('HomeCtrl', [function () {
jquery('.box').animate({ 'font-size': 100 }, 1000);
}]);
});
若要引入jquery的外掛,需要bower下載jquery-ui,然後改變bootstrap.js
require.config({
baseUrl: '/',
//別名
paths: {
'angular': 'assets/angular/angular.min',
'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',
'angular-async-loader': 'assets/angular-async-loader/dist/angular-async-loader.min',
'jquery': 'assets/jquery/dist/jquery.min',
'jquery-ui': 'assets/jquery-ui/jquery-ui.min'
},
//宣告paths中元素暴露的介面和依賴
shim: {
'angular': {exports: 'angular'}, //暴露的是angular
'angular-ui-router': { deps: ['angular'] }, //依賴的是angular
'jquery': {exports: 'jquery'}, //暴露的是jquery
'jquery-ui': { deps: ['jquery'] }, //依賴的是jquery
}
});
在控制器中寫入如下程式碼。
define(function (require) {
var app = require('app');
var $ = require('jquery');
require('jquery-ui');
app.controller('HomeCtrl', [function () {
this.a = 100;
$('.box').animate({ 'font-size': 100 }, 1000, function () {
$(this).css("color", "red");
$(this).draggable();
});
}]);
});
專案結構
專案
│ app-routes.js
│ app.js
│ bootstrap.js
│ index.html
│
├─assets
│ ├─angular
│ ├─angular-async-loader
│ ├─angular-ui-router
│ ├─jquery
│ ├─jquery-ui
│
├─css
│ root.css
│
└─ngApp
├─home
│ HomeCtrl.js
│ template.html
│
└─root
RootCtrl.js
rootService.js
template.html
注:在專案中使用ctrl+p,可以定位到目標檔案。