返回首页
当前位置: 主页 > 网络编程 > Jsp实例教程 >

AngularJS与RequireJS集成方案

时间:2015-04-05 22:28来源:知行网www.zhixing123.cn 编辑:麦田守望者

关于angularjs、requirejs的基础知识请自行学习

一、简单事例的项目目录如下:
-index.html

-scripts文件夹

–controller文件夹

— mianController.js

— controller1.js

—controller2.js

–directives文件夹

—mainDirective.js

—directive.js

–app.js

–router.js

–main.js

二、首页
首先你的index.html大概如下

<!doctype html>
<!-- <html xmlns:ng="//angularjs.org" id="ng-app" ng-app="webApp"> -->
<htmls>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head>

<body>
<!--其他html内容-->
<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
</body>
</html>
在首页index.html只需要引入requireJs库文件,并且指明入口函数main.js,采用手动启动angularjs应用,所以这里不用为首页添加ng-app=’webApp’。

三、配置mian.js
require.config({
paths:{
//一些库文件
'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
//js文件
'bootstrap': "../scripts/bootstrap",
'app': "../scripts/app",
'router': "../scripts/router"
.....以及其他的js文件,这里省略
},
shim:{
'angular':{
exports:'angular'
},
'angular-route':{
deps:['angular'],
exports: 'angular-route'
}
},
deps:['bootstrap'],
urlArgs: "bust=" + (new Date()).getTime() //防止读取缓存,调试用
});

关于require.config()中的配置大概如下(依照自己的项目情况,这里我简单配置了),

所以总体上说main.js这个文件做的事情就是:由requirejs异步载入所有文件

注意到其中的deps:['Bootstrap'],就是告诉我们要先加载bootstrap.js文件。

四、手动启动angularjs应用
而bootstrap.js就是我用来手动启动angularjs应用的,代码如下

define(['require',
'angular',
'angular-route',
'jquery',
'app',
'router'
],function(require,angular){
'use strict';
require(['domReady!'],function(document){
angular.bootstrap(document,['webapp']);
});
});
这里依赖于app.js和router.js,我们看看这两个文件分别做什么

五、网站路由设置
我们这里使用ui-router。所以我们的router.js应该是这样的,主要是用来定义路由的,关于ui-router的配置请自行查看相关知识,这里就简单略过

define(["app"],
function(app){
return app.run([
'$rootScope',
'$state',
'$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams
}
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider){
//用于改变state时跳至顶部
$uiViewScrollProvider.useAnchorScroll();
// 默认进入先重定向
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
//abstract: true,
url:'/home',
views: {
'main@': {
templateUrl: '../view/home.html'
}
}
})
})

六、angular.module
这时先看看平时我们在写angularjs应用是这样写的

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

app.controller("foo",function($scope){});
app.directive(...)
所以我们的app.js应该是这样的

define(["angular",
'mainController',
'mainDirective'
],function(angular){
return angular.module("webapp",['ui.router','ngStorage','ngSanitize','webapp.controllers','webapp.directive']);
})

其中我们的app.js中依赖的mainController和mainDirective主要是用来加载angular的控制器和指令

七、控制器
我们的mainController.js是这样的

define(['controller1','controller2'],function(){});
主要用来加载各个控制器(所有的控制器都将在这个文件中被加载),除此之外再不用做其他,因为我们可以有很多个控制器文件,按照具体需要进行添加。

controller1.js文件(其他控制器controller2文件类似)

define(['../scripts/controller/module.js','jquery'],function(controllers,$){
'use strict';
controllers.controller('controller1',function($scope){
//控制器的具体js代码
})
})
其中依赖module.js

而module.js如下

define(['angular'], function (angular) {
'use strict';
return angular.module('webapp.controllers', []);
});
八、指令
同理mianDirective.js也类似。参考控制器

------分隔线----------------------------
标签(Tag):AngularJS RequireJS
------分隔线----------------------------
推荐内容
猜你感兴趣