//只要引用main和require.js实践—–入口文件main.js
实例化require.js并配置各种js的路径以及依赖关系，初始化整个项目
/**
* 入口文件
*/
require.config({
baseUrl: "js/",
paths: {
"jquery": "libs/jquery203",
"angular" : "libs/angular.min",
"angular-route" : "libs/angular-route.min",
"angular-sanitize" : "libs/angular-sanitize.min",
"app" : "controllers/app",
"loadingInterceptor" : "controllers/loadingInterceptor",
"run_stateCtrl" : "controllers/run_stateCtrl",
"route" : "routes/appRoute"
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route':{
deps: ["angular"],
exports: 'angular-route'
},
'angular-sanitize':{
deps: ["angular"],
exports: 'angular-sanitize'
}
}
});
require(['jquery','angular','angular-route','angular-sanitize','app','loadingInterceptor','route','run_stateCtrl'],function ($,angular){
$(function () {
angular.bootstrap(document,["myApp"]);//初始化整app
})
});实践—–建立angular.module 即app.js
建立angular.module，所有的操作都是在angular.module的基础上进行的
/**
* 建立angular.module
*/
define(['angular'], function (angular) {
var app = angular.module('myApp', ['ngRoute','ngSanitize','ajaxLoading']);//引入需要以来的模块
return app;
});实践—–建立路由
不同的模块被加载进主视图，并绑定控制器
/**
* 路由
*/
define(['app'], function(app){
return app.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'js/views/run_state.html',
controller: 'run_stateCtrl'
})
.when('/xq', {
templateUrl: 'js/views/xq.html',
controller: 'xqCtrl'
})
.otherwise({ redirectTo: '/' });
}])
});实践—–模块控制器
被路由绑定的模块控制器，控制着当前模块的业务流程
define(['app'], function(app){
return app.controller('run_stateCtrl', ['$scope','$rootScope','$http', function ($scope,$rootScope,$http) {
$rootScope.headTitle = $rootScope.title = "hello,angular!";
$rootScope.appName = $rootScope.span = "angular侧导航";
$scope.getMore = function(){
angular.element('.state').text('正在运行')
};
$http.get('./json/215145.json').
success(function(data) {
$scope.branchs = data.branchs;
});
}])
});感谢各位的阅读！关于“angular.js+require.js如何构建模块化单页面应用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
文章标题：angular.js+require.js如何构建模块化单页面应用
网站路径：http://njwzjz.com/article/ieojop.html
