angualrjs+AMD規範示例（主要使用requirejs）-實現按需加載附源碼

時間 2019-11-30

標籤 angualrjs+amd angualrjs amd 規範示例主要使用 requirejs 實現按需加載源碼欄目 JavaScript 简体版

原文原文鏈接

一、背景說明css

最近一段時間，一直在研究angularjs及AMD、common規範等。但怎麼把angularjs有效的與AMD模塊組織結合在一塊兒使用，仍是值得深思。html

本人研究一段時間，爲了鞏固下研究成果，特地寫了一個demo，僅供參考。html5

二、使用技術點說明node

kendo：主要使用kendo開源一些組件（因爲本人對kendo研究比較多）jquery

angular：angular做爲基礎框架（MVC、DI、數據綁定、頁面路由、相關服務等）webpack

requireJS：AMD模塊加載器angularjs

bootstrap：主要使用它提供的一些樣式web

三、應用APP建立流程npm

app啓動流程以下，json

3.1 bootstrap

使用angular手動初始化啓動angular應用程序，等待頁面全部腳本加載完成後，找到html指定節點（默認是根節點），調用api/angular.bootstrap將模板編譯成可執行的、數據雙向綁定的應用程序

代碼以下，

angular.element(document).ready(function(){
                angular.bootstrap(angular.element("#incidentTest"), ['incident.app.module']);
            });

3.2 AMD模塊依賴實現方式

使用AMD規範實現模塊之間的依賴（加載器使用requirejs）。

　　這裏須要囉嗦二句，有些第三方js庫不符合AMD規範，如angularjs，所幸的是requirejs.config中有shim屬性，支持非AMD模塊加載

配置代碼以下，

require.config({
        //baseUrl: '',
        paths: {
            'angular': "../../../node_modules/angular/angular",
            'kendo': "../../../node_modules/kendo/LICENSE-2.0/kendo.ui.core.min",
            'jquery': "../../../node_modules/jquery/jquery-1.9.1.min"
 
        shim: {
            'angular': {
                deps: ['jquery'],
                exports: "angular"
            },
            'kendo': {
                deps: ['jquery', 'angular']
            }
     }
    });

　　AMD模塊定義以下，

define(['incidentappeal.module'],function(incidentappealModule){
})

3.3 angular模塊依賴實現方式

使用angularjs提供的依賴注入機制，管理全部模塊依賴

　　代碼以下，

//create ui.module
    angular.module("ui.module",
        [
            "ui.grid",
            'ui.grid.pinning',
            'ui.grid.resizeColumns',
            'ui.grid.saveState',
            'kendo.directives'
        ]);

3.4 模塊加載方式

使用requirejs框架實現對AMD及非AMD模塊載入

　代碼以下，

 requireIncidentApp(["module.management"], function () {
        //go to app
        requireIncidentApp(['angular', 'incident.app.module'], function (angular) {
        //...
            });
        })
    })

3.5 angular Module中的controller、指令、服務、過濾器實現

　　使用angular提供的對應的provider。注入到angular框架體系，根據ui-router提供的resolve屬性（若是有不明白resolve這個屬性的同窗，能夠本身去查查）實現按需加載功能。

　　每一個angular模塊提供可拓展的register屬性（裏面包括controller、directive、filter、factory、service），代碼以下，

workspaceModule.register={
                    controller:$controllerProvider.register,
                    directive:$compileProvider.directive,
                    filter:$filterProvider.register,
                    factory:$provide.factory,
                    service:$provide.service
                };

在每一個單獨的controller、directive、filter、factory、service中實現本身的註冊。代碼以下，

workspaceModule.register.controller("workspace",myController);
})

3.6 國際化實現方式

　　使用npm 安裝angular-translate

　　angularjs 國際化模塊提供國際化服務，其餘模塊首先要依賴國際化模塊，配置當前模塊字條文件（.json），實現對當前模塊的國際化。代碼以下，

angular.module("incidentcommon.localization.module",
        [
        "pascalprecht.translate",
        'incidentcommon.routeconfig.module'
    ]);

var incidentCommonLocalizationModule = angular.module('incidentcommon.localization.module');

    incidentCommonLocalizationModule.config([
        '$translateProvider',
        'constantRouteConfig'
        ,function (
            $translateProvider,
            constantRouteConfig
        ){
            $translateProvider.useStaticFilesLoader({
                files:[{
                    prefix:constantRouteConfig['translate'].prefix,
                    suffix:constantRouteConfig['translate'].suffix
                }]
            });
            $translateProvider.preferredLanguage(constantRouteConfig['translate'].preferredLanguage);
        }]);

    incidentCommonLocalizationModule.factory('T', ['$translate', function ($translate) {
        var Trans = function (key) {
            if (key) {
                return $translate.instant(key);
            }
            return key;
        };
        return Trans;
    }]);

    return incidentCommonLocalizationModule;

四、UI

4.1 單頁面應用（ui-router、state）

單頁面主要使用angular-ui-router技術，在workspace.module中實現。

ui-router中resolve屬性，在view加載以前，angular會先把resolve做爲view的一個依賴，按需加載配置的每一個AMD模塊，這樣，根據用戶瀏覽view的動做按需載入每一個view所須要的依賴，如controller、

directive、factory等，代碼以下，

workspace.left":route.resolve('workspace.left')；

  routeConfigs["workspace.left"] ={};
    routeConfigs["workspace.left"].controllerDeps ="";
    routeConfigs["workspace.left"].controller=["workspace/workspace.content.controller"];
    routeConfigs["workspace.left"].url ="workspace/workspace.content.html";

4.2 界面庫使用及引入方式

界面庫主要使用kendoui，使用kendo開源控件kendo.ui.core.js。另外加入一些kendo須要收費的控件，如angular-ui（ui-grid/ui-chart/ui-treeview）

　　引入方式，代碼以下，

angular.module("ui.module",
        [
            "ui.grid",
            'ui.grid.pinning',
            'ui.grid.resizeColumns',
            'ui.grid.saveState',
            'kendo.directives'
        ]);

4.3 樣式控制

css樣式直接在html引入，

<!--CSS -->
    <link href="../../styles/bootstrap/bootstrap.min.css" rel="stylesheet" />
   ...
    <link href="../../styles/styles.css" rel="stylesheet" />

4.4 表單驗證

　　html5/angular/kendo自帶的驗證方式

五、代碼框架結構圖

代碼框架結構圖以下(這裏只是一個簡單示意圖)，