requirejs按需加載angularjs文件

時間 2019-11-09

標籤 requirejs 按需加載 angularjs 文件欄目 JavaScript 简体版

原文原文鏈接

以前分享了一篇用ocLazyLoad實現按需加載angular js文件的博客.原本當時想會使用一種方法就好了.可最近恰好有時間,在網上查找了一下requirejs實現angular js文件按需加載的資料.方案以下:javascript

項目的主結構以下圖:html

1.index.html是最外層的頁面,頁面代碼以下:java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>require angularjs</title>
</head>
<body>
<a href="#module1">module1</a><br/>
<a href="#module2">module2</a>
<div style="height: 30px;width: 100px">{{str}}</div>
<div id="container" ui-view></div>
<script data-main="main.js" src="require.js" id="main"></script>
</body>
</html>

　　2.頁面中的script標籤中,會首先引用require.js這個文件,而後再去引用main.js這個文件,main.js主要是一些關於require的config信息,代碼以下:node

    var config = {
        baseUrl: './',           //依賴相對路徑
        paths: {                    //若是某個前綴的依賴不是按照baseUrl拼接這麼簡單，就須要在這裏指出
            domReady:'domReady',
            angular: '../node_modules/angular/angular',
            app:'app',
            router:'../node_modules/angular-ui-router/release/angular-ui-router'
        },
        shim: {                     //引入沒有使用requirejs模塊寫法的類庫。例如underscore這個類庫，原本會有一個全局變量'_'。這裏shim等於快速定義一個模塊，把原來的全局變量'_'封裝在局部，並導出爲一個exports，變成跟普通requirejs模塊同樣
            'router': {
                deps: ['angular'],   //依賴什麼模塊
                
            },
            'angular': {
                exports: 'angular'
            }
        }
    };
    require.config(config);
    // deps:['webapp']
    require(['domReady','app','angular'],function(){
        angular.bootstrap(document, ['webapp'])//這裏會去執行app.js這個文件
    })

　　3.接下來進入app.jsangularjs

/**
 * Created by Administrator on 2016/7/28.
 */
define(['router'], function () {
    var app = angular.module('webapp', ['ui.router']);
    app.config(
        function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('module1');//若是沒有指定路由,會默認訪問module1
            $stateProvider.
            state('module1', {
                url:"/module1",
                // controller: 'ctr1',            //這裏若是寫了controller,那麼在加載module1.js時,js文件裏面的console.log()會運行兩次
                templateUrl: 'module1/module1.html',
                resolve: {
                    loadCtrl: ["$q", function($q) {
                        var deferred = $q.defer();
                        //異步加載controller／directive/filter/service
                        require([
                            'module1/module1'
                        ], function() { deferred.resolve(); });
                        return deferred.promise;
                    }]
                }
            })
            .state("module2",{
                url:"/module2",
                // controller: 'ctr2',
                templateUrl: 'module1/module2.html',
                resolve: {
                    loadCtrl: ["$q", function($q) {
                        var deferred = $q.defer();
                        //異步加載controller／directive/filter/service
                        require([
                            'module1/module2'
                        ], function() { deferred.resolve(); });
                        return deferred.promise;
                    }]
                }
            })
        });
    app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
        app.register = {
            //獲得$controllerProvider的引用
            controller : $controllerProvider.register,
            //一樣的，這裏也能夠保存directive／filter／service的引用
            directive: $compileProvider.directive,
            filter: $compileProvider.register,
            service: $provide.service
        };
    })
    return app;
});

　　4.module1.js代碼以下:web

define(['app'],function(app){
    app.register
        .controller('ctr1', function($scope){
            $scope.str = 'home page';
            console.log('page1')
        })
})

　　5.module2.js代碼以下:bootstrap

define(['app'],function(app){
    app.register
        .controller('ctr2',function($scope){
            $scope.str = 'local page';
            console.log('page2')
        })
})

　　6.module1.html代碼以下:promise

<div ng-controller="ctr1">
    這是tp1
    <div id="navigator" style="width: 100%;height: 40px;line-height: 40px">
        <a href="http://www.cnblogs.com/">博客園首頁</a>
        <a href="http://www.cnblogs.com/Ricky-Huang/">Ricky的首頁</a>
        <a href="http://i.cnblogs.com/EditPosts.aspx?opt=1">新隨筆</a>
        <a href="http://msg.cnblogs.com/send/Ricky_Huang">聯繫我</a>
        <a href="http://www.cnblogs.com/Ricky-Huang/rss">訂閱他</a>
        <a href="http://i.cnblogs.com/">管理</a>
    </div>
</div>

　　7.module2.html2代碼以下:app

<div ng-controller="ctr2">
    這是tp2
    {{str}}
</div>

　　到了這一步,咱們運行index.html文件,咱們獲得以下效果:(右圖是控制檯輸出)dom

點擊module2能夠盡心正常切換,並且也能夠看到js文件確實動態加載了;

注意:module1.js,module1.html,module2.js,module2.html折四個文件所有在module這個文件夾裏面

相關標籤/搜索

每日一句

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