前端架构:Angular与requirejs集成实践

这几天angular与requirejs、browserify的集成弄的博主头好晕,今天终于成功集成了requirejs,现写些心得体会在这里。

核心思想:angular加载时有一定的顺序,必须依次加载(按照先后顺序)angular,angular-route,module模块,service模块,controller模块,而且requirejs里面的define([......],function(){})加载顺序就很没谱了(毕竟requirejs是异步加载),因此要思路是:

1、先建个angular-bootstrap.js文件(网上都爱这么起名)

这个文件是把需要使用的相关js文件一股脑全部加载进去

1 define(["angular",
2     ‘domReady!‘,
3     "angular-route",
4     "app",
5     "app-ng/service/test.service",
6     "app-ng/controller/test.controller"
7     ],function(angular,document){
8         angular.bootstrap(document,["data"]);//此处data是module的名称,也就是ng-app的名称
9     })

这部同等于在页面上写ng-app=‘data‘,即页面可不写。

2、app.js---创建module

1 define(["angular",‘angular-route‘],function(angular){
2     return angular.module("data",[‘ngRoute‘]);
3 })

这里的angular在shim中要定义exports,要不然会粗错哦

3、service层---处理各种业务逻辑与数据持久化

1 define([‘app‘],function(app) {
2     app.factory(‘DataFactory‘,function($http){
3         var service = {};
4         .......
5         return service;
6     });
7 });

这里有个特别有意思的现象,引入service后里面执行顺序很奇葩,具体等我过两天整理清楚了再放上来

4、controller层---与页面双向绑定

1 define([‘app‘,‘app-ng/service/test.service‘],function(app) {
2     app.controller(‘mainController‘, function($scope,$http,DataFactory) {
3         $scope.formData = {};
4         .....
5       )};
6 )};

5、在页面的js中,require([‘angular-bootstrap‘])即可

 1 //requirejs配置
 2 shim: {
 3         ‘angular-route‘:[‘angular‘],
 4         "angular":{
 5             exports:"angular"
 6         },
 7         "app":{
 8             exports:‘app‘
 9         }
10     },
11     paths: {
12         ‘domReady‘: ‘../bower_components/domReady/domReady‘,
13         ‘angular‘: ‘../bower_components/angular/angular‘,
14         ‘angular-route‘:‘../bower_components/angular-route/angular-route‘,
15         ‘app-ng‘:‘./angular‘,
16         ‘app‘:‘./angular/app‘
17     },

好啦,基本就是这样,我是个懒人,连微博、朋友圈都只看不发的主儿,能写这么多博客已经狠难得了。。。O(∩_∩)O~

时间: 2024-10-15 19:43:51

前端架构:Angular与requirejs集成实践的相关文章

【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

 说在前面 好几天没更新这个系列文章了,这段时间还是在研究这块东西,遇到的各种奇葩问题,最后写完,只是调试就花了两天,果然发现在和大神之间的距离越来越远,在加上大部分时间在追求自己的梦想,梦想同样也是遥遥无期啊!一直在思考星星的那句话,人到底该不该追求梦想,做个咸鱼到底好不好的,吃吃喝喝睡睡的,反正最近感悟挺多,抽时间写个文章,好好和大家聊聊,把我的心里话告诉大家,程序员不容易,寻梦者更难啊!比如,这个所谓的pc网站的前端框架,这对一个做后台而且还是多年一直在做C#.JAVA没怎么写脚本的我来说

基于angularJS和requireJS的前端架构

1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HTML标记等,最受欢迎的莫过于它的双向数据绑定. 1.2.requireJS描述:requireJS是来解决传统的页面加载script标记操作,通过其初始化配

基于AngularJS的企业软件前端架构[转载]

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能

没有最好,选择最适合自己的前端架构

前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模的公司.项目给出了相应的前端技术选择方案. 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法. RequireJS,前端技术发展分水岭 在五六年前,移动端还没有兴起,我们没有什么选

好的前端架构

p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 翻译自:www.sitepoint.com 翻译人员:前端开发whqet,意译为主,不当之处欢迎大家指正. 译者说:临近期末,大部分的基础教学内容已经讲解完毕,在进行比较大型的项目训练之前,如果能让学生了解甚至遵循一些前端开发的编码规范将会是一件非常有意义的事情.因此,本博客准备于近期整理一个编码规范与最佳实践的系列文章,包括html.css.javascript.jquery.php等,希望能

如何挑选适合的前端框架(去哪儿网前端架构师司徒正美)

前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模的公司.项目给出了相应的前端技术选择方案. 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法. RequireJS,前端技术发展分水岭 在五六年前,移动端还没有兴起,我们没有什么选

使用模块化思维和模板引擎搭建前端架构(require+underscore)

require.js 介绍: 是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量. 官网:http://www.requirejs.cn/    (PS:如果没接触过,刚开始看都是一头蒙蔽的,建议看下菜鸟教程) 新手教程:http://www.runoob.com/w3cnote/requirejs-tutorial-1.html 优点:可完成团队协作.模块复用.单元测试等等一系列复杂的需求 undersco

WEB前端开发电商网站前端架构

课程介绍通过一个垂直电子商务网站,介绍前端架构搭建和实现的步骤和方法,以及在这个过程中我们需要做什么才能帮助项目最终从设计走向实现.课程提纲第1章 前端架构知识准备认识前端架构,了解前端架构技术.产品设计和发布.数据分析和优化的基础第2章 前端架构设计了解前端架构的组织方式.页面层次的架构组织.架构设计和组件化方案等.第3章 前端架构实施了解架构的实施.优化思路,如何实施自动化.通过蛋糕电商网站讲解,分析案例.如何图解设计和交互图.如何从目录入手搭建基本架构.如何从页面层次进行架构搭建和最后项目

web富客户端应用下,前端架构问题。

前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前端来做了..  前端的业务逻辑变得很复杂 有的时候甚至 比后端的更复杂.(当然这个也跟写接口的人水平有关...) 在这样的背景下面,如果还是以前那套 页面里面写js 或者哪里有效果写哪里的话.无论是实现,还是后面的维护都是一个很大的问题.. 所以,我觉得富客户端web应用,很有必要组建一个自己的前端