关于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大概如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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应用的，代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
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的配置请自行查看相关知识，这里就简单略过

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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应用是这样写的

?
1
2
3
4
var app = angular.module("xxx",["xxx"]);
app.controller("foo",function($scope){});
app.directive(...)

所以我们的app.js应该是这样的

?
1
2
3
4
5
6
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是这样的

?
1
define(['controller1','controller2'],function(){});

主要用来加载各个控制器（所有的控制器都将在这个文件中被加载）,除此之外再不用做其他，因为我们可以有很多个控制器文件，按照具体需要进行添加。

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

?
1
2
3
4
5
6
define(['../scripts/controller/module.js','jquery'],function(controllers,$){
????'use strict';
????controllers.controller('controller1',function($scope){
????????//控制器的具体js代码
????})
})

其中依赖module.js

而module.js如下

?
1
2
3
4
define(['angular'], function (angular) {
????'use strict';
????return angular.module('webapp.controllers', []);
?});
回到顶部

八、指令

同理mianDirective.js也类似。参考控制器

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: AngularJS与RequireJS整合 http://www.chhua.com/web-note5206

相关笔记

更多