木头人
2017-03-28 09:39:54
原精
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.运行效果
猜你喜欢
- AngularJS+Spring MVC+bootstrap实现用户的增删改查实例
- angularjs的指令入门
- JSP+Servlet+MySQL数据库增删改查
- bootstrap+brite实现的html5的联系人增删改查入门教程
- Spring JdbcTemplate框架搭建及其增删改查使用指南
- struts+spring+hibernate+extjs4入门实例demo源码分享,实现增删改查操作
- hibernate+springMVC增删改查
- Struts2开发最简单学生后台管理系统,实现基本的增删改查操作,适合struts2入门学习
- struts2框架通过jdbc实现增删改查实例,适合struts2入门学习
- Spring Boot整合JdbcTemplate极简入门实例
- java使用jdbc实现各种类型添加删除修改数据
- Javaweb注册登录、增删改查实现的简单通讯录系统
请下载代码后再发表评论
文件名:angular.zip,文件大小:1703.065K
下载
- /
- /angular
- /angular/.classpath
- /angular/.project
- /angular/.settings
- /angular/.settings/.jsdtscope
- /angular/.settings/org.eclipse.core.resources.prefs
- /angular/.settings/org.eclipse.jdt.core.prefs
- /angular/.settings/org.eclipse.m2e.core.prefs
- /angular/.settings/org.eclipse.wst.common.component
- /angular/.settings/org.eclipse.wst.common.project.facet.core.xml
- /angular/src
- /angular/src/main
- /angular/src/main/java
- /angular/src/main/java/com
- /angular/src/main/java/com/cn
- /angular/src/main/java/com/cn/stephen
/angular/src/main/java/com/cn/stephen/Application.java
- /angular/src/main/java/com/cn/stephen/component
- /angular/src/main/java/com/cn/stephen
- /angular/src/main/java/com/cn
- /angular/src/main/java/com
- /angular/src/main/java
- /angular/src/main
- /angular

WASDZZ LV13
2023年2月3日
a1677596408 LV23
2022年7月1日
9843637 LV9
2021年12月13日
Kentucky LV5
2021年7月16日
ssm123 LV9
2020年7月5日
cex12345 LV4
2020年6月5日
1358849392 LV21
2020年5月7日
dyt-123 LV7
2020年3月28日
pahirdin LV12
2020年1月26日
fsheng122 LV7
2019年12月26日

long123_356 LV8
2024年5月18日
飞呀飞呀飞不放 LV7
2023年8月25日
微信网友_6442588254851072 LV2
2023年4月21日
李亮 LV19
2023年3月6日
wxd1997 LV13
2022年11月4日
new_docker LV15
2022年8月5日
谢谢谢谢谢谢你 LV6
2022年7月19日
a1677596408 LV23
2022年7月1日
fengzhou888 LV5
2022年6月16日
WASDZZ LV13
2022年5月10日