整個項目搭建流程?? 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(); }]); }); ?

?

轉載于:https://www.cnblogs.com/lixiaoni/p/6898744.html

總結

以上是生活随笔為你收集整理的AngularJS+RequireJS集成环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。