[AngularJS] 使用AngularAMD动态加载Service
2015-08-08 01:53
816 查看
[AngularJS] 使用AngularAMD动态加载Service
前言
「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Controller。本篇文章以此为基础,介绍如何使用AngularAMD来动态加载Service,让SPA的启动过程更加轻量化,用以提升使用者的操作体验。并且也透过这样挂载式的设计,让项目功能更加模块化,增加开发与维护的工作效率。主要为自己留个纪录,也希望能帮助到有需要的开发人员。AngularAMD
安装
本篇文章以「使用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。Chrome内的本地网页,使用XMLHttpRequest读取本地档案 - 昏睡领域
执行index.html之后,会系统依照路由设定进入预设的Home页面。而使用Chrome的开发者工具,可以看到系统加载了Home页面的Template、Controller,并且显示在页面上。
点击Home页面的About按钮,会切换到About页面。这时同样从Chrome的开发者工具中,可以看到系统是在点击了About按钮之后,才去加载About页面的Template、Controller、以及额外的UserRepository来提供服务,这也就是AngularAMD所提供的动态加载Service功能。
范例下载
范例档案:点此下载相关文章推荐
- angularjs三级联动
- angularJS 转换UTC时间及DateFormat问题
- 使用ASP.NET MVC和AngularJS的Web模块化管理
- AngularJS笔记20150807
- AngularJS 模板
- AngularJS应用的解析
- AngularJS
- 【angular】学习AngularJS 笔记(慕课网)【01】
- 【西祠日志】【17】初识AngularJS,下一代Web应用的前端
- 用angularjs在循环遍历中绑定ng-model(转载---CSDN博客 )
- Poj 2836 Rectangular Covering(状压DP)
- 关于angularJS绑定数据时自动转义html标签(转载-漆黑的小白)
- AngularJS Module类的方法
- 浅谈angularjs中指令的三种绑定策略
- AngularJS ,ASP.NET MVC – 新Web模块化开发
- AngularJS下的后台传值问题
- AngularJS下一些JS的属性
- angularjs 基本玩法 指令的基本结构
- angularjs 高级玩法 创建递归的模板 兼容IE浏览器
- angularjs 高级玩法 创建递归的模板