首页 > 代码库 > 如何将angularJs项目与requireJs集成

如何将angularJs项目与requireJs集成

2024-07-26 20:08:54   220人阅读

关于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=http://www.mamicode.com/‘../scripts/lib/require.js‘ data-main=‘../scripts/main.js‘></script>>

在首页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也类似。参考控制器

九、其他

如何将angularJs项目与requireJs集成


联系
我们