requirejs如何实现按需加载angularjs文件
小编给大家分享一下requirejs如何实现按需加载angularjs文件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
10多年专注成都网站制作，企业网站设计，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站设计,高端网页制作,对咖啡厅设计等多个领域，拥有丰富的网站建设经验。
项目的主结构如下图:
1.index.html是最外层的页面,页面代码如下:
require angularjs
module1
module2
{{str}}
2.页面中的script标签中,会首先引用require.js这个文件,然后再去引用main.js这个文件,main.js主要是一些关于require的config信息,代码如下:
var config = {
baseUrl: './', //依赖相对路径
paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
domReady:'domReady',
angular: '../node_modules/angular/angular',
app:'app',
router:'../node_modules/angular-ui-router/release/angular-ui-router'
},
shim: { //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量'_'。这里shim等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个exports，变成跟普通requirejs模块一样
'router': {
deps: ['angular'], //依赖什么模块
},
'angular': {
exports: 'angular'
}
}
};
require.config(config);
// deps:['webapp']
require(['domReady','app','angular'],function(){
angular.bootstrap(document, ['webapp'])//这里会去执行app.js这个文件
})3.接下来进入app.js
/**
* Created by Administrator on 2016/7/28.
*/
define(['router'], function () {
var app = angular.module('webapp', ['ui.router']);
app.config(
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('module1');//如果没有指定路由,会默认访问module1
$stateProvider.
state('module1', {
url:"/module1",
// controller: 'ctr1', //这里如果写了controller,那么在加载module1.js时,js文件里面的console.log()会运行两次
templateUrl: 'module1/module1.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'module1/module1'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
.state("module2",{
url:"/module2",
// controller: 'ctr2',
templateUrl: 'module1/module2.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'module1/module2'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
});
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同样的，这里也可以保存directive／filter／service的引用
directive: $compileProvider.directive,
filter: $compileProvider.register,
service: $provide.service
};
})
return app;
});4.module1.js代码如下:
define(['app'],function(app){
app.register
.controller('ctr1', function($scope){
$scope.str = 'home page';
console.log('page1')
})
})5.module2.js代码如下:
define(['app'],function(app){
app.register
.controller('ctr2',function($scope){
$scope.str = 'local page';
console.log('page2')
})
})6.module1.html代码如下:
这是tp1
博客园首页
Ricky的首页
新随笔
联系我
订阅他
管理
