angular js+require+spring boot+spring mvc+mybatis实战演练demo

在工作闲暇之余，想把很久没用的技术拿来用一下，遇到很多问题，最终还是通过各种手段搭建起来了这个demo。

1.require.js的使用

/**
 * require.js异步载入所有文件，手动启动angularjs应用
 */
require.config({
	baseUrl: 'static/js',
	paths:{
		"angular":"./vender/angularjs/angular",
		"bootstrap":"./vender/bootstrap/bootstrap",
		"bootstrapDate":"./vender/bootstrap/bootstrap-datetimepicker",
		"moment":"./vender/moment/moment-with-locales",
		"angularRoute":"./vender/angularjs/angular-route",
		"angularResource":"./vender/angularjs/angular-resource",
		"jquery":"./vender/jquery/jquery-1.9.1.min"
	},
	
	shim:{
		angular:{
			exports:"angular"
		},
		angularRoute:{
			deps:['angular']
		},
		angularResource:{
			deps:['angular']
		},
		bootstrap:{
			deps:['jquery']
		},
		bootstrapDate:{
			deps:['bootstrap','moment']
		}
	},
	
	urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存，调试用 
});

define(["routes"], function () {  
    //使用bootstrap方法启动Angular应用  
    angular.bootstrap(document, ["app"]);  
});

'use strict';

define([ 
	'angular',
	'bootstrapDate', 
	'angularResource', 
	'angularRoute', 
	'controllers/index',
	'services/index' 
	], function(angular) {
	return angular.module('app', [ 'ngRoute', 'ngResource', 'controllers',
			'services' ]);
})

2.angular的路由（采用的angular自带的路由）

define(['app'],function(app){
	app.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
		//angularjs1.6.x版本号后路由出现的问题(多了一个感叹号)
		$locationProvider.hashPrefix('');
		$routeProvider.when('/home',{
			templateUrl: 'static/template/home.html',  
            controller: 'HomeController',
            controllerAs:'homeCtrl'
		}).when('/user',{
			templateUrl: 'static/template/userinfo.html',  
            controller: 'UserController',
            controllerAs:'userCtrl'
		}).otherwise({
			redirectTo:'/home'
		});
	}]);
});

3.项目目录结构

4.运行效果