angularJs 1.6.1 + ui-router + requireJs整合

angularJs 1.6.1 + ui-router + requireJs整合项目ypei

文档结构：

1. ypei/index.html

<div ui-view="main" class="main" id="main"></div>
<script src="lib/require.js" data-main="js/main" type="text/javascript" charset="utf-8"></script>

2.ypei/js/main.js,启动文件

paths:里面放的是将要加载的文件，如果仅仅只是在paths中定义，而后面的文件中没有引用，requireJs也不会加载该文件；所以，在paths中定义后，还需要你规定在什么时候加载定义的文件。

shim:如果没有采用AMD规范编写,但是有需要用requireJS加载它们的话，必须先定义它们的特征。

angular.bootstrap(document.getElementById("main"),['app']);这句话是表示手动启动angularJs,如果自动启动的话需要在静态页面标签中添加“ng-app=''或ng-app=‘app'"

(function(require) {
    var requireMain = require.config({
        //baseUrl: 'script', //模块根路径配置
        paths: {//用于映射不存在根路径下面的模块路径,相对于baseUrl的
            angular: "../lib/angular",
            uiRouter: "../lib/ui-router",
            loginApp:"../modules/login/loginCtrl",
            regApp:"../modules/reg/regCtrl",
            regApp2:"../modules/reg2/regCtrl2",
            listApp:"../modules/list/listCtrl",
            personApp:"../modules/person/personCtrl",
            detailApp:"../modules/detail/detailCtrl",
            //app:"app",//同名都是app,并且和main同路路径的可以省略路径步骤
            myService:"service"
        },
        shim: {//配置脚本/模块外面没有使用RequireJS的函数依赖并且初始化函数。
            angular: {
                //deps: ['jquery'],
                exports: "angular"
            },
            uiRouter: {
                deps: ['angular'],
                exports: "uiRouter"
            }
        }
    });
    requireMain(['angular',"app"], function (angular) {
        angular.bootstrap(document.getElementById("main"),['app']);
    });
})(require);

3.ypei/js/app.js，路由文件

define(['angular','uiRouter','loginApp','regApp','regApp2','listApp','personApp','detailApp']......这个时候，就会把这些main文件paths中定义的模块文件加载到静态文件中去，如果不写这些参数，

var app = angular.module('app', ['ui.router','loginApp','regApp'.....中的这些模块都会报没有定义的错误提示。

define(['angular','uiRouter','loginApp','regApp','regApp2','listApp','personApp','detailApp'],function(angular){
    var app = angular.module('app', ['ui.router','loginApp','regApp','regApp2','listApp','personApp','detailApp']);

    app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider) {

        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('/', {
                url: '/',
                views: {
                    'main': {
                        templateUrl: 'modules/login/login.html',
                        controller: 'loginCtrl'
                    }
                }
            })
            .state('reg', {
                url: '/reg',
                views: {
                    'main': {
                        templateUrl: 'modules/reg/reg.html',
                        controller: 'regCtrl'
                    }
                }
            })
            .state('reg2', {
                url: '/reg/reg2',
                views: {
                    'main': {
                        templateUrl: 'modules/reg2/reg2.html',
                        controller: 'regCtrl2'
                    }
                }
            })
            .state('list', {
                url: '/list:id',
                views: {
                    'main': {
                        templateUrl: 'modules/list/list.html',
                        controller: 'listCtrl'
                    }
                }
            })
            .state('person', {
                url: '/person',
                views: {
                    'main': {
                        templateUrl: 'modules/person/person.html',
                        controller: 'personCtrl'
                    }
                }
            })
            .state('detail', {
                url: '/list/detail?:id',
                views: {
                    'main': {
                        templateUrl: 'modules/detail/detail.html',
                        controller: 'detailCtrl'
                    }
                }
            });
    }]);
});

4.ypei/modules/login/loginCtrl.js

define(['angular','uiRouter','myService'],function(angular) {
    angular.module('loginApp', ['ui.router', 'myService'])
        .controller('loginCtrl', ['$scope', '$state', function ($scope, $state) {
            $scope.login = function () {
                $state.go("list");
            }
        }]);
});

其他的模块的controller也是雷同的写法，就不一一粘帖了。

网上找到个更好的，可参考：

http://blog.csdn.net/yo548720570/article/details/41047309

http://blog.csdn.net/w1014074794/article/details/50097837