参考文献列表
- http://www.open-open.com/lib/view/open1413189699875.html
- https://www.sitepoint.com/using-requirejs-angularjs-applications/
- https://zhidao.baidu.com/question/371926516474026684.html
- http://beginor.github.io/2014/11/17/load-angularjs-with-requirejs.html (被这个文件误导了)
问题背景
通过requirejs使用angular来开发，需要引用第三方的一个弹窗插件，如ui-notification。见文章http://www.jianshu.com/p/cfc7e39cbbb5，那是通过webpack来使用的。
如果不引用第三方插件，只是angular写法，也没有问题。
html代码
<html lang="zh" ng-app="app" >
js写法
require.config({
paths:{
'angular':"./common/angular",
'ui-notification':"./common/angular-ui-notification.min",
'config':"./config",
'getUrl':"./getUrl",
'util':"./util",
'setLang':"./setLang",
'angular-route':"./common/angular-route",
'appstart':"./appstart"
},
shim: {
'angular': {
exports: 'angular'
},
'ui-notification':{
deps:['angular'],
exports:'ui-notification'
},
'angular-route': { deps: ['angular'] }
},
})
require(['angular'],function (angular) {
angular.module("app", []);
angular.module("app").controller('loginController', ['$scope',, function($scope) {
$scope.greeting = 'Hello, world!';
console.log(1)
}]);
})
现在引入ui-notification，一直报错。写法如下。
require(['angular','ui-notification'],function (angular) {
angular.module("app", ['ui-notification']);
angular.module("app").controller('loginController', ['$scope','Notification', function($scope,Notification) {
Notification("hello")
$scope.greeting = 'Hello, world!';
console.log(1)
}]);
})
一直报下面的错误:
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
一直一脸懵逼中。
后来找到这篇文章，
https://www.sitepoint.com/using-requirejs-angularjs-applications/
The Angular application cannot be bootstrapped using the ng-app directive as the required script files are loaded asynchronously. The right approach here is to use manual bootstrapping. This has to be done in a special file called main.js. This needs the file defining the Angular module to be loaded first. The code for this file is shown below.
大致意思是：当angular 所依赖的js文件异步加载时，它用ng-app指令是无法启动angular程序的。正确的方法是手动启动use manual bootstrapping。这不得不写在一个特殊的文件main.js。这需要先加载已定义angular module的文件。代码写法如下。
require(['app/ideasModule'],
function() {
angular.bootstrap(document, ['ideasApp']);
}
);
这里的ideasModule文件写的就是模块
回到我们自己的文件写法。
RequireJS 会自动加载脚本 scripts/main.js， 在 main.js 文件里面进行配置， 来动态加载 AngularJS ， 文件内容以及说明如下：
requirejs.config({
// 所有脚本的跟目录， 相对于 html
baseUrl: 'scripts',
paths: {
// angular 脚本的路径， 相对于 baseUrl
'angular': 'lib/angular/angular',
'angular-route': 'lib/angular/angular-route'
},
shim: {
// 需要导出一个名称为 angular 的全局变量， 否则无法使用
'angular' : { exports: 'angular' },
// 设置 angular 的其它模块依赖 angular 核心模块
'angular-route': { deps: ['angular'] }
}
});
完整的配置请看这里： [RequireJS Shim for AngularJS 1.3.0] //根本打不开(https://gist.github.com/beginor/e57e596be4040c404044)
有了上面的配置之后， 在文件的结尾添加下面的测试：
说明：这时候根本是加载不出来angular-route的。会报错的。
下面写正确的思路。
首先新建一个main.js文件，作为主入口
require.config({
paths:{
'angular':"./common/angular",
'ui-notification':"./common/angular-ui-notification.min",
},
shim: {
'angular': {
exports: 'angular'
},
'ui-notification':{
deps:['angular'],
exports:'ui-notification'
},
},
})
//上面是配置
//下面是手动启动app，但是启动前先加载app1.js文件。
//如果有多个controller文件，则可以依次放在数组中
require(['app1'],function () {
angular.bootstrap(document, ['app']);
})
再新建app1.js文件
注意:
define("app1",XXXX)中的app1必须和文件名一致(除了.js),否则一直会提示
angular is not defined
define('app1', ['angular','ui-notification'], function(angular) {
// 使用严格模式
'use strict';
// 定义 angular 模块
var app = angular.module('app', ['ui-notification']);
// 定义 DemoController ， 只定义一个属性 greeting 给界面绑定。
app.controller('loginController', ['$scope','Notification', function($scope,Notification) {
Notification("1hello")
$scope.greeting = 'Hello, world!';
}]);
return app;
});
注意：bootstrap处的app必须与app1中的module的app一致。
