[AngularJS] 使用AngularAMD动态加载Controller

时间：2022-09-01 20:30:08

[AngularJS] 使用AngularAMD动态加载Controller

前言

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

本篇文章介绍如何使用AngularAMD来动态加载Controller，让SPA的启动过程更加轻量化，用以提升使用者的操作体验。主要为自己留个纪录，也希望能帮助到有需要的开发人员。

[AngularJS] 使用AngularAMD动态加载Controller

安装

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

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

bower install angularAMD

[AngularJS] 使用AngularAMD动态加载Controller

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

bower install angular-ui-router

[AngularJS] 使用AngularAMD动态加载Controller

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

[AngularJS] 使用AngularAMD动态加载Controller

开发app.js

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

[AngularJS] 使用AngularAMD动态加载Controller

接着需要在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的用法 - 阮一峰的网络日志)

// bootstrap

define(["angular", "angularAMD", "angular-ui-router"], function (angular, angularAMD) {

    // ......

});

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

// 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";
    
    }];
    
});

[AngularJS] 使用AngularAMD动态加载Controller

开发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>

[AngularJS] 使用AngularAMD动态加载Controller

执行

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

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

[AngularJS] 使用AngularAMD动态加载Controller

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

[AngularJS] 使用AngularAMD动态加载Controller

范例下载

范例下载：点此下载

[AngularJS] 使用AngularAMD动态加载Controller的更多相关文章

  1. &lbrack;AngularJS&rsqb; 使用AngularAMD动态加载Service

    [AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...

  2. &lbrack;AngularJS&rsqb; 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

  3. ExtJs 通过分析源代码解决动态加载Controller的问题

    通过分析源代码解决动态加载Controller的问题 最近在研究ExtJs(4.2.0)的MVC开发模式,具体Extjs的MVC如何使用这里不解释,具体参见ExtJs的官方文档.这里要解决的问题是如何 ...

  4. AngularJS&plus;RequireJs实现动态加载JS和页面的方案研究【上】

    1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...

  5. AngularJS&plus;RequireJs实现动态加载JS和页面的方案研究【中】

    3.动态加载的内容: home.js [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.co ...

  6. angularJS配合bootstrap动态加载弹出提示内容

    1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascript/#popovers 2.自定义p ...

  7. AngularJS&plus;RequireJs实现动态加载JS和页面的方案研究【下】

    about.js: [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.controller( ...

  8. AngularJS &plus; ui-router &plus; RequireJS异步加载注册controller／directive／filter／service

    一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...

  9. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

随机推荐

  1. 在mvc中实现图片验证码的刷新

    首先,在项目模型(Model)层中建立一个生成图片验证码的类ValidationCodeHelper,代码如下: public class ValidationCodeHelper { //用户存取验 ...

  2. &lbrack;HackerCup Round1 2&rsqb; Autocomplete &lpar;Trie&rpar;

    题目链接:https://www.facebook.com/hackercup/problems.php?pid=313229895540583&round=344496159068801 题 ...

  3. NPOI&plus;ExcelReport

    分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility (续2篇-模板导出综合示例)   自ExcelUtility类推出以来,经过项目中的实际使用与不断完 ...

  4. Windows 8实例教程系列 - 数据绑定基础实例

    原文:Windows 8实例教程系列 - 数据绑定基础实例 数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...

  5. eclipse环境下，java操作MySQL的简单演示

    首先先通过power shell 进入MySQL 查看现在数据库的状态(博主是win10系统) 右键开始,选择Windows powershell ,输入MySQL -u用户名 -p密码 选择数据库( ...

  6. Nodejs学习笔记（十五）--- Node&period;js &plus; Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  7. Android开发——Toast知识

    Toast.makeText(this, "内容", Toast.LENGTH_SHORT).show(); 直接显示一个Toast,第三个参数是时间的长短,还有一个Toast.L ...

  8. 剑指Offer——回溯算法解迷宫问题（java版）

    剑指Offer--回溯算法解迷宫问题(java版)   以一个M×N的长方阵表示迷宫,0和1分别表示迷宫中的通路和障碍.设计程序,对任意设定的迷宫,求出从入口到出口的所有通路.   下面我们来详细讲一 ...

  9. vs2015下编译duilib的几个问题

    duilib下载地址在github 用vs2015打开,提示升级工程,确认后继续. 编译,UIGifAnim.cpp 323行报错 1>Control\UIGifAnim.cpp(324): e ...

  10. django 跨域解决方案

    使用django-cors-headers模块 github:https://github.com/ottoyiu/django-cors-headers 官方文档中有详细说明 简要配置 1.安装 p ...

相关文章