博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用requirejs使angularJS模块化开发
阅读量:7033 次
发布时间:2019-06-28

本文共 4135 字,大约阅读时间需要 13 分钟。

 首先,要用1.2以上的angular。。。因为这个原因浪费了我两天半的时间。。。
引用模块:angular-route
先加载require.js
index.html 

 
1  2  3  4     {<div></div>    {'TODO supply a title'}} 5     
6
7
8
9 10 11
12
13
14
15
16
17
18
19 20 21

main.js 

1 require.config({ 2     //配置angular的路径 3     baseUrl: "/assets", 4     paths: { 5         "angular": "js/angular/angular", 6         "angular-route": "js/angular/angular-route", 7         "angular-resource": "js/angular/angular-resource" 8   9  10  11     },12     //这个配置是你在引入依赖的时候的包名13     shim: {14         "jquery": {15             exports: "jQuery"16         },17         "angular": {18             exports: "angular"19         },20         "angular-route": {21             deps: ['angular'],22             exports: "angular-route"23         },24         "angular-resource": {25             deps: ['angular'],26             exports: "angular"27         }28     }29 });30 var app = 'app.js';  // 你的app模块31 define(['angular', app, 'angular-route'], function(angular, app, config) {32     angular.bootstrap(document, ['app']);  // 关键33 });
 注意 angular.bootstrap(document,['app']) 必须要手动渲染,因为变成异步加载angular了。
在第二个参数写上你的module名称,这里我起名叫app(在app.js中定义)
app.js(关键点,本人亲自改造,主要运用$routeProvider.when方法中的参数resolve加上$q服务返回deferred对象实现)
1 define([ 2     'angular', 3     'app/route/apply', // route 文件 4     // 's/md5', 5     'angular-route', 6     'angular-resource' 7 ], function(angular, config) { 8     var app = angular 9         .module('app', ['ngRoute', 'ngResource'])10         .config(function($routeProvider, $controllerProvider) {11             var router = function(config) {12                 return angular.extend({13                     resolve: {14                         delay: function($q, $rootScope) {15                             var defer = $q.defer();16                             require(config.require, function(s) {17                                 $controllerProvider.register(config.controller, s);18                                 defer.resolve();19                                 $rootScope.$apply();20                             })21                             return defer.promise;22                         }23                     }24                 }, config);25             };26             // 下面的循环请亲自修改成适合自己项目的路径27             for (var i in config) {28                 $routeProvider.when(i, router({29                     templateUrl: 'html/' + config[i].html + '.html',  // 加载的模板文件地址(同普通$routeProvider)30                     controller: i,31                     require: ['c/' + config[i].controller]  // 加载的controller文件,对应的就是require()函数中的第一个参数32                 }));33             }34             $routeProvider.otherwise({35                 redirectTo: '/login'36             });37         })38        39     return app;40 });

 接下来是上面需要用到的路由配置文件 

route.js 
1 define([], function() { 2     return { 3         "/": { 4             html: "apply/step1", 5             controller: "apply" 6         }, 7         "/step2": { 8             html: "apply/step2", 9             controller: "apply"10         }11     };12 });

 最后是控制器 (注意命名要和你的controller一致)

apply.js 
1 define(['angular'], function(angular) { 2     'user strict'; 3     return ['$log', '$http', '$scope', '$resource', 4         function($log, $http, $scope, $resource) { 5             $http 6                 .get('/data/option/apply') 7                 .success(function(data) { 8                     // console.log(data) 9                     angular.extend($scope, data);10                     $scope.data = data.default;11                 });12             // 注册13             $scope.save = function() {14                 var User = $resource('/users');15                 User.save($scope.data, function(rs) {16                     17                 });18             }19         }20     ];21 });

 

 
完成,写的文章不多所以不太好,见谅 

另外,由于是手动加载angular的module和异步加载controller,所以无需再html标签上写ng-app和ng-controller,controller名自动设置(即你的路由规则字符串) 

转载于:https://www.cnblogs.com/vegetbird/p/4103098.html

你可能感兴趣的文章
[javascript]图解+注释版 Ext.extend()
查看>>
我的前端工具集(七)div背景网格
查看>>
linux 下mongo 基础配置
查看>>
【Dubbo实战】 Dubbo+Zookeeper+Spring整合应用篇-Dubbo基于Zookeeper实现分布式服务(转)...
查看>>
JUnit单元测试中的setUpBeforeClass()、tearDownAfterClass()、setUp()、tearDown()方法小结
查看>>
java之jvm学习笔记六(实践写自己的安全管理器)
查看>>
Docker容器查看ip地址
查看>>
在PC端或移动端应用中接入商业QQ
查看>>
将python3.6软件的py文件打包成exe程序
查看>>
DataTable 排序
查看>>
大白话5分钟带你走进人工智能-第二十节逻辑回归和Softmax多分类问题(5)
查看>>
嵌入式系统在工业控制中的应用
查看>>
使用httpclient异步调用WebAPI接口
查看>>
c++ 类的对象与指针
查看>>
SSTI(模板注入)
查看>>
rbac models
查看>>
[2615]传纸条 sdutOJ
查看>>
类图标注的使用范例
查看>>
NumberFormat注解 DateTimeFormat
查看>>
[转载]PV操作简单理解
查看>>