如何將angularJs項目與requireJs集成

時間 2019-11-11

標籤如何 angularjs 項目 requirejs 集成欄目 AngularJS 简体版

原文原文鏈接

關於angularjs、requirejs的基礎知識請自行學習javascript

1、簡單事例的項目目錄以下：html

-index.htmljava

-scripts文件夾jquery

--controller文件夾angularjs

--- mianController.jsweb

--- controller1.jschrome

---controller2.jsbootstrap

--directives文件夾緩存

---mainDirective.jsapp

---directive.js

--app.js

--router.js

--main.js

2、首頁

首先你的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'。

3、配置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，咱們看看這兩個文件分別作什麼

5、網站路由設置

咱們這裏使用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'
                                }
                            }
                        })                       
})

6、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的控制器和指令

7、控制器

咱們的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', []);
 });

8、指令

同理mianDirective.js也相似。參考控制器

9、其餘

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。