AngularJS与RequireJS集成方案

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

1、简单例子的品类目录如下:

-index.html

-scripts文件夹

   –controller文件夹

      — mianController.js

      — controller1.js

      —controller2.js

   –directives文件夹

      —mainDirective.js

      —directive.js

   –app.js

   –router.js

   –main.js

 

二、首页

第3你的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文件。

4、手动运营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(){});

根本用来加载各种控制器(全数的控制器都将在那么些文件中被加载),除外再不要做任何,因为大家能够有不可胜举个控制器文件,根据现实需求开始展览添加。

controller一.js文本(别的控制器controller二文件类似)

 

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也就像。参考控制器

九、其他

相关文章