[AngularJS] 使用AngularAMD动态加载Controller

前言

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

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

安装

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

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

bower install angularAMD

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

bower install angular-ui-router

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

开发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的用法 - 阮一峰的网络日志)

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

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

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

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

范例下载

范例下载:点此下载

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

  1. [AngularJS] 使用AngularAMD动态加载Service

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

  2. [AngularJS] 使用AngularCSS动态加载CSS

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

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

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

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

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

  5. AngularJS+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+RequireJs实现动态加载JS和页面的方案研究【下】

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

  8. AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service

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

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

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

随机推荐

  1. AJAX文件上传实践与分析,带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  2. Nodejs从有门道无门菜鸟起飞教程。

    这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不 ...

  3. 单纯形方法(Simplex Method)

    最近在上最优理论这门课,刚开始是线性规划部分,主要的方法就是单纯形方法,学完之后做了一下大M算法和分段法的仿真,拿出来与大家分享一下.单纯形方法是求解线性规划问题的一种基本方法. 线性规划就是在一系列 ...

  4. CSS布局:水平居中

    前言 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type=& ...

  5. JS包装对象

    一.包装对象 var s = "hello word"; s.len = 4; var t = s.len; //=>undefined 原因由于s是一个字符串,在执行第二行 ...

  6. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  7. WPF系列:画图

    Line 在两个坐标点之间画一条直线,通过四个属性设置它的起始和结束 <Line Stroke="Blue" StrokeThickness="3" X1 ...

  8. 使用archiver在nodejs下打包

    archiver是一个在nodejs中能跨平台实现打包功能的模块,可以打zip和tar包,是一个比较好用的三方模块. 使用前先安装archiver模块. npm install archiver 建立 ...

  9. 紫橙绿蓝的jQuery幻灯片切换

      效果展示 http://hovertree.com/texiao/jquery/77/ 看惯了左右切换的幻灯片,何问起向您推荐一个新颖的,旋转切换,通过点击按钮的相应区域可以使幻灯片以旋转的方式来 ...

  10. JavaBean 的小知识点

    /** * @author http://roucheng.cnblogs.com * @version 2016-05-08 */ public class Person { private Str ...