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();
}]);
});