[AngularJS] 使用AngularAMD动态加载Controller

时间 2019-11-18

标签 angularjs 使用 angularamd 动态加载 controller 栏目 AngularJS 繁體版

原文原文链接

[AngularJS] 使用AngularAMD动态加载Controller

前言

使用AngularJS来开发Single Page Application(SPA)的时候，能够选用AngularUI Router来提供页面内容切换的功能。可是在UI Router的使用情景里，须要开发人员将每一个State所使用的Controller预先加载以后，才能正常的切换页面内容。这也就表明开发人员所创建的SPA，必需要在启动的当下，就先将整个SPA所用到的Controller都预先加载到浏览器之中。而这样的预先加载全部Controller备用的动做，在大型的项目中很容易形成浏览器效能上的负担，进而影响使用者的操做体验。html

本篇文章介绍如何使用AngularAMD来动态加载Controller，让SPA的启动过程更加轻量化，用以提高使用者的操做体验。主要为本身留个纪录，也但愿能帮助到有须要的开发人员。git

AngularAMD

安装

AngularAMD使用bower来发布套件本体与其相依套件。而要使用bower必需要先安装Node.js、接着安装npm、最后安装bower，完成安装步骤以后，开发人员就可使用bower来下载套件。相关bower的安装步骤，能够参考下列资料：github

Gulp, Grunt, Bower以及npm - 黑暗线程

安装完bower以后，开发人员就能够创建一个新的文件夹做为工做文件夹。接着开启命令提示字符CD到这个工做文件夹以后，输入下列指令，就可使用bower来取得AngularAMD套件本体与其相依套件。npm

bower install angularAMD

而由于后续范例须要使用AngularUI Router这个Angular套件，来提供页面内容切换的功能，因此还须要使用下列指令，使用bower来取得AngularUI Router这个套件。gulp

bower install angular-ui-router

完成上列步骤后，开启工做文件夹能够看到多出来一个bower_components文件夹，而这个文件夹内摆放了angularAMD套件本体、以及angular、require.js、angular-ui-router这三个套件。bootstrap

开发app.js

完成安装步骤后，在工做文件夹内新增一个app.js档案，用来定义系统运行时的相关参数、还有必要的启动程序代码。浏览器

接着须要在app.js里面加入require.js的设定参数，用来定义系统运行时使用的套件路径、以及套件之间的相依性。(相关require.js的使用介绍，能够参考：require.js的用法 - 阮一峰的网络日志)网络

require.config({
    paths: {
        // angular
        "angular": "bower_components/angular/angular",

        // angular-ui
        "angular-ui-router": "bower_components/angular-ui-router/release/angular-ui-router",

        // angularAMD
        "angularAMD": "bower_components/angularAMD/angularAMD",
        "ngload": "bower_components/angularAMD//ngload"
    },
    shim: {         
        // angular
        "angular": { exports: "angular" },

        // angular-ui
        "angular-ui-router": ["angular"],

        // angularAMD
        "angularAMD": ["angular"],
        "ngload": ["angularAMD"]
    }
});

完成require.js设定以后，在同一个app.js里，加入下列require语法用来加载项目使用的套件。(相关require语法的使用介绍，一样能够参考：require.js的用法 - 阮一峰的网络日志)app

// bootstrap
define(["angular", "angularAMD", "angular-ui-router"], function (angular, angularAMD) {        
    // ......
});

接着在require语法内，使用下列ui-router+angularAMD语法，来定义系统内ui-router的路由设定、以及默认的开启路径。(相关ui-router语法的使用介绍，能够参考：学习 ui-router管理状态 - bubkoo)ide

// routes
var registerRoutes = function($stateProvider, $urlRouterProvider) {

    // default
    $urlRouterProvider.otherwise("/home");

    // route
    $stateProvider

        // home
        .state("home", angularAMD.route({
            url: "/home",
            templateUrl: "home.html",
            controllerUrl: "home.js"
        }))

        // home
        .state("about", angularAMD.route({
            url: "/about",
            templateUrl: "about.html",
            controllerUrl: "about.js"
        }))
    ;           
};

最后，一样在require语法内，使用下列angular+angularAMD语法，来启动系统里的angular套件，这就完成了系统的运行参数、启动程序代码的相关设定。(相关angular的使用介绍，建议参考：AngularJS 建置与执行 - Shyam Seshadri, Brad Green)

// module
var app = angular.module("app", ["ui.router"]);

// config
app.config(["$stateProvider", "$urlRouterProvider", registerRoutes]);

// bootstrap
return angularAMD.bootstrap(app);

开发Template、Controller

创建定义运行参数与启动程序代码的app.js以后，就能够着手使用angular+require语法，来创建系统内ui-router所要切换使用的页面样板(Template)、以及页面控制(Controller)。(相关angular的使用介绍，建议参考：AngularJS 建置与执行 - Shyam Seshadri, Brad Green)

home.html

<h1>{{ title }}</h1>
<br/>
<button ui-sref="about">About</button>

home.js

define([], function () {

    // controller
    return ["$scope", function ($scope) {

        // properties
        $scope.title = "This is Home page";
    }]; 
});

开发index.html

完成上列步骤以后，还须要创建index.html来作为整个Single Page Application(SPA)的程序进入点。在这个index.html里，最主要就是使用requirejs来加载与执行app.js，而且在body里面加入一个用来让ui-router摆放页面内容的div。

<!DOCTYPE html>
<html>
<head>    
    <!-- meta -->
    <meta charset="utf-8">

    <!-- title -->
    <title></title>

    <!-- script -->
    <script data-main="app.js" src="bower_components/requirejs/require.js"></script>
</head>
<body>
    <!-- content -->
    <div ui-view></div> 
</body>
</html>

执行

完成开发步骤后，就能够准备使用Chrome执行index.html来检视成果。可是在检视成果以前，必需要先参考下列数据开启Chrome的必要功能，后续就使用Chrome来正常的执行index.html。

Chrome内的本地网页，使用XMLHttpRequest读取本地档案 - 昏睡领域

执行index.html以后，会系统依照路由设定进入预设的Home页面。而使用Chrome的开发者工具，能够看到系统加载了Home页面的Template、Controller，而且显示在页面上。

点击Home页面的About按钮，会切换到About页面。这时一样从Chrome的开发者工具中，能够看到系统是在点击了About按钮以后，才去加载About页面的Template、Controller来显示在页面上，这也就是AngularAMD所提供的动态加载Controller功能。

范例下载

范例下载：点此下载