首页 > 代码库 > 前端架构：Angular与requirejs集成实践
前端架构：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 =http://www.mamicode.com/ {};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~
前端架构：Angular与requirejs集成实践
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。