較大規模的angular單頁應用由于引用了大量的資源文件可能會導致在頁面加載速度較慢，然而這些資源并非都需要在首頁使用，這里我們可以使用了 RequireJs 和 angular-async-loader 來實現資源和angular模塊的異步加載，提高應用的加載速度和性能

依賴

使用bower管理項目依賴

Bower是一個客戶端技術的軟件包管理器，它可用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。（bower需要依賴 nodejs）

安裝項目依賴

1.angular

bower install angular

2.angular-ui-router

bower install angular-ui-router

3.requirejs 詳細文檔

bower install requirejs

4.angular-async-loader

bower install https://github.com/subchen/angular-async-loader.git

---

目錄結構

└── project├── js -- js目錄├── app.js -- 初始化app├── login.js -- 登陸頁控制器├── router.js -- 路由├── service.js -- 服務模塊└── productlist.json -- 測試數據├── template -- 模版html├── index.html -- 入口頁├── bootstrap.js -- 項目啟動器└── bower_components -- bower維護的插件

調用

配置需要使用requirejs調用的模塊路徑和依賴（bootstrap.js）

require.config({baseUrl:'./',paths:{'angular':'bower_components/angular/angular','angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min','service':'js/service.js'},shim:{'angular':{exports:'angular'},'angular-ui-router': {deps: ['angular']},'service':{deps: ['angular']}},waitSeconds: 0 //超時時間 設為0即持續等待 })

初始化項目，啟動angular（bootstrap.js）

//載入angular和路由 require(['angular','js/router'],function(angular){angular.element(document).ready(function(){angular.bootstrap(document,['app']); //angular加載完成后手動啟動angular}); })

初始化angular主模塊并配置異步加載模塊（js/app.js）

define(function(require,exports,module){var angular = require('angular'); //引入angularvar asyncLoader = require('angular-async-loader'); //引入異步加載模塊組件require('angular-ui-router')var app = angular.module('app', ['ui.router']); //定義app模塊asyncLoader.configure(app); //給app模塊配置異步加載module.exports = app; //作為模塊導出 })

路由中要定義controller所在文件位置（js/router.js）

$stateProvider.state('login', {url:'/login',templateUrl: "template/login.html",controllerUrl: "js/login", //controller所在文件位置controller: "login" //controller名稱 })

新建自定義模塊（js/service.js）

define(function(require) {var angular = require('angular'); //引入angularangular.module('app.service', []) //創建模塊.factory('asyncModule', function() {return '我的模塊'}) })

controler中異步加載模塊（js/login.js）

define(function(require) {var app = require('js/app') //引入js/app.js下的app模塊require('service'); //加載服務模塊的js文件 app.useModule('app.service'); //異步加載app.service模塊// 控制器中注入方法 app.controller('login',['$scope','asyncModule',function($scope,asyncModule){alert(asyncModule);}]);})

總結

以上是生活随笔為你收集整理的AngularJS 项目搭建--基于RequireJs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。