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

依賴

使用bower管理項目依賴

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

安裝項目依賴

1.angular

bower install angular

2.angular-ui-router

bower install angular-ui-router

3.requirejs 詳細(xì)文檔

bower install requirejs

4.angular-async-loader

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

---

目錄結(jié)構(gòu)

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

調(diào)用

配置需要使用requirejs調(diào)用的模塊路徑和依賴（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 //超時時間 設(shè)為0即持續(xù)等待 })

初始化項目，啟動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; //作為模塊導(dǎo)出 })

路由中要定義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', []) //創(chuàng)建模塊.factory('asyncModule', function() {return '我的模塊'}) })

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。