这几天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