关于angular通过require调用第三方插件的问题

参考文献列表

问题背景

通过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文件写的就是模块

回到我们自己的文件写法。

http://beginor.github.io/2014/11/17/load-angularjs-with-requirejs.html (被这个文件误导了)

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一致。

关于angular通过require调用第三方插件的问题

问题背景

下面写正确的思路。

推荐阅读更多精彩内容