AngularJS+RequireJS集成环境

整个项目搭建流程   index开始页面  引入requireJS文件 和main.Js主要文件

<--index.html-->

　<div ui-view ></div><script src="assets/requirejs/require.js"></script> <script src="main.js"></script>

 

main文件是主要配置文件

<--main.js-->

require.config({

    baseUrl: '/',
    paths: {
        'angular': 'assets/angular/angular.min',
        'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',
        'angular-async-loader': 'assets/angular-async-loader/angular-async-loader'
    },
    shim: {
        'angular': {exports: 'angular'},
        'angular-ui-router': {deps: ['angular']}
    },
 urlArgs: "bust=" + (new Date()).getTime(),//防止缓存
    waitSeconds: 0
});

require(['angular', './app-routes'], function (angular) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
        angular.element(document).find('html').addClass('ng-app');
    });
});
app.js启动文件
<--app.js-->

define(function (require, exports, module) {
    var angular=require('angular');
    var asyncLoader = require('angular-async-loader');

    require('angular-ui-router');
    require('commonService');
    require('commonDirective');
    require('cropperDirective');

    var app=angular.module('app',['ui.router','commonService','commonDirective','cropperDirective']);
    asyncLoader.configure(app);
    module.exports = app;
})router路由配置文件 
<--router.js-->

define(function (require) {
    var app = require('./app');
　　// var basemngUrl='/pages/src/manage/'
    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
　　　　　　$stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home/home.html',
                // new attribute for ajax load controller
                controllerUrl: 'home/homeCtrl',
                controller: 'homeCtrl'
            })
            .state('users', app.route({
                url: '/users',
                templateUrl: 'users/users.html',
                // new attribute for ajax load controller
                controllerUrl: 'users/usersCtrl',
                controller: 'usersCtrl',
                // load more controllers, services, filters, ...
                dependencies: ['services/usersService']
            }));
    }]);
});

<--usersCtrl.js-->

define(function (require) {
    var app = require('../app');

    // dynamic load services here or add into dependencies of state config
    // require('../services/usersService');

    app.controller('usersCtrl', ['$scope', function ($scope) {
        // shortcut to get angular injected service.
        var userServices = app.get('usersService');

        $scope.userList = usersService.list();
    }]);

});