[AngularJS] 使用AngularAMD动态加载Service

前言

使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Controller。本篇文章以此为基础,介绍如何使用AngularAMD来动态加载Service,让SPA的启动过程更加轻量化,用以提升使用者的操作体验。并且也透过这样挂载式的设计,让项目功能更加模块化,增加开发与维护的工作效率。主要为自己留个纪录,也希望能帮助到有需要的开发人员。

安装

本篇文章以「使用AngularAMD动态加载Controller」的范例程序为基础,为其附加动态加载Service的功能。进入本篇的开发步骤之前,开发人员可以先依照上一篇文章的步骤来建立基础架构。

动态加载Controller范例:点此下载

开发Service

取得基础架构之后,在工作文件夹内新增一个UserRepository.js档案,用来定义动态挂载的Service:UserRepository物件。

首先要在UserRepository.js里面加入下列require+AngularAMD语法,用来将UserRepository.js包装成为可以动态加载执行的AMD格式模块,并且注入AngularAMD所提供的app对象用来提供动态注册Servive的功能。(相关require.js的使用介绍,可以参考:require.js的用法 - 阮一峰的网络日志)

define(["app"], function (app) {

});

接着在UserRepository.js里,加入下列这个使用JavaScript面向对象语法写出来的UserRepository类别,后续会使用这个UserRepository类别来提供系统服务的功能。(相关JavaScript面向对象语法的介绍,建议参考:JavaScript 设计模式 - Stoyan Stefanov)

// class
var UserRepository = (function () { // constructors
function UserRepository() { // users
this.users = new Array();
this.users.push({ name: "Clark", address: "Taipei" });
this.users.push({ name: "Jeff", address: "Kaohsiung" });
this.users.push({ name: "Jammy", address: "Taipei" });
} // methods
UserRepository.prototype.getUserByName = function (name) { // result
var result = null;
for (var key in this.users) {
if (this.users[key].name == name) {
result = this.users[key];
}
} // return
return result;
}; // return
return UserRepository;
})();

最后在UserRepository.js里面加入下列程序代码,使用AngularAMD所提供的app对象把UserRepository类别动态注册成为Angular的一个服务。这个动态把UserRepository类别动态注册成为Angular的服务的程序代码定义,会在UserRepository.js这个AMD格式档案被加载后执行。(相关AngularAMD所提供的动态注册功能,可以参考:AngularAMD:Creating a Module - marcoslin)

// register
app.service("UserRepository", [UserRepository]);

加载Service

完成Service的开发工作之后,接着就要在Controller里使用上个步骤所建立的UserRepository。首先编辑工作文件夹内既有的about.js,并且将其中require语法的宣告定义,修改为下列的程序内容。在这段程序中"UserRepository"字符串,代表的意义是使用require.js的功能,去动态加载UserRepository.js这个AMD格式档案。

  • about.js

    define(["UserRepository"], function () {
    //...
    });

动态加载UserRepository.js之后,系统就会依照程序代码定义,将UserRepository类别注册成为Angular的一个服务。这时开发人员就可以修改about.js里面的Controller宣告,使用Angular语法取得UserRepository服务来提供Controller使用。

  • about.js

    // controller
    return ["$scope", "UserRepository", function ($scope, UserRepository) { // properties
    $scope.title = "This is About page";
    $scope.user = UserRepository.getUserByName("Clark");
    }];
  • about.html

    <h1>{{ title }}</h1>
    <h1>{{ user | json }}</h1>
    <br/>
    <button ui-sref="home">Home</button>

执行

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

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

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

范例下载

范例档案:点此下载

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

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

    [AngularJS] 使用AngularAMD动态加载Controller 前言 使用AngularJS来开发Single Page Application(SPA)的时候,可以选用AngularU ...

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

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

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

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

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

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

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

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

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

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

  7. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

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

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

  9. 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

随机推荐

  1. Java 线程 — AbstractQueuedSynchronizer

    锁 锁就是一种状态,比如互斥锁:同一时间只能有一个线程拥有,可以使用一个整型值来标志当前的状态 0:表示没有现成占有锁 1:表示锁已经被占用 AbstractQueuedSynchronizer 实现 ...

  2. ssh(sturts2_spring_hibernate) 框架搭建之struts2

    一.struts2完整流程的逻辑(整体的概述) 首先,用户在地址栏中输入你的项目访问路径,然后这个请求会发送到服务器,之后服务器发现在web.xml中配置了一个filter过滤器,并且这个过滤器需要对 ...

  3. ASP.NET中使用DataGrid控件按照条件显示GridView单元格的颜色

    问题描述: 我在做一个关于信用卡管理系统时遇到一个问题:信用卡内金额低于100元时,数字颜色显示为红色,其余显示为绿色 之前,尝试了修改成为模板列以及转换成Reapeater控件,甚至用了Jquery ...

  4. 【博客美化】04.自定义地址栏logo

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  5. Docker之Linux Namespace

    Linux Namespace 介绍 我们经常听到说Docker 是一个使用了Linux Namespace 和 Cgroups 的虚拟化工具,但是什么是Linux Namespace 它在Docke ...

  6. OFA & OMF

    OFA OFA(Optimal Flexible Architecture)是Oracle设计的一种文件系统目录结构,目的在于简化多个Oracle产品版本维护.OFA的核心是两个环境变量:ORACLE ...

  7. annotation-config vs component-scan – Spring Core--转

    原文地址:http://techidiocy.com/annotation-config-vs-component-scan-spring-core/ <context:annotation-c ...

  8. 自制jQuery标签插件

    在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件.最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控.初步在IE6 7 8, ...

  9. Android基于mAppWidget实现手绘地图(九)–如何处理地图对象的touch事件

    为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...

  10. Windows 下搭建 Ruby 开发环境

    1.从http://rubyinstaller.org/downloads/下载“rubyinstaller-2.1.5-x64.exe”. 2. 双击下载的程序进行安装,勾选如下图的选项.默认安装目 ...