一 项目介绍
使用BootStrap制作导航,使用AnglularJS实现导航切换页面路由功能,并演示AngularJS通过$http服务和Spring Boot提供的REST服务,最后演示用指令封装jQuery UI的日期选择器
二 实战
1 新建Spring Boot项目,依赖如下:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
准备好Bootstrap、AngularJS、JQuery、jQueryUI相关资源到src/main/resource/static下,结构如下:
2 制作导航
<!DOCTYPE html>
<html lang="zh-cn" ng-app="actionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实战</title>
<!-- Bootstrap的CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="jqueryui/jquery-ui.min.css" rel="stylesheet">
<style type="text/css">
.content {
padding: 100px 15px;
text-align: center;
}
</style>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--使用Bootstrp定义的导航,并配合AngularJS的路由,通过路由名称#/oper和#/directive切换视图-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/oper">后台交互</a></li>
<li><a href="#/directive">自定义指令</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="content">
<!--页面载入地方-->
<ng-view></ng-view>
</div>
<script src="js/jquery.min.js"></script>
<script src="jqueryui/jquery-ui.min.js"></script><!--为我们定制指令所用-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js-action/app.js"></script><!--为我们定义了模块和路由-->
<script src="js-action/directives.js"></script><!--自定义指令-->
<script src="js-action/controllers.js"></script><!--控制器定义-->
</body>
</html>
3 模块和路由定义
//定义模块actionApp,并依赖于路由模块ngRoute
var actionApp = angular.module('actionApp',['ngRoute']);
//配置路由,并注入$routeProvider来配置
actionApp.config(['$routeProvider' , function($routeProvider) {
// /oper为路由名称
$routeProvider.when('/oper', {
controller: 'View1Controller', //路由控制器名称
templateUrl: 'views/view1.html', //视图的真正地址
}).when('/directive', {
controller: 'View2Controller',
templateUrl: 'views/view2.html',
});
}]);
4 控制器的定义
//定义控制器View1Controller,并注入$rootScope、$scope、$http
actionApp.controller('View1Controller', ['$rootScope', '$scope', '$http', function($rootScope, $scope,$http) {
//使用$scope.$on监听$viewContentLoaded事件,可以在页面内容加载完成后进行一些操作
$scope.$on('$viewContentLoaded', function() {
console.log('页面加载完成');
});
$scope.search = function(){ //在scope内定义一个方法search,在页面上通过ng-click调用。
personName = $scope.personName; //获取页面上定义的ng-model="personName"的值
$http.get('search',{ //向服务端地址search发送get请求。
params:{personName:personName} //增加请求参数
}).success(function(data){ //请求成功回调
$scope.person=data;//将服务端返回的数据data通过$scope.person赋值给模型person,这样页面视图上可以通过{{person.name}}来调用,且模型person值改变后,视图是自动更新的。
});;
};
}]);
actionApp.controller('View2Controller', ['$rootScope', '$scope', function($rootScope, $scope) {
$scope.$on('$viewContentLoaded', function() {
console.log('页面加载完成');
});
}]);
5 View1的界面
<div class="row">
<label for="attr" class="col-md-2 control-label">名称</label>
<div class="col-md-2">
<input type="text" class="form-control" ng-model="personName"><!--定义数据模型personName-->
</div>
<div class="col-md-1">
<button class="btn btn-primary" ng-click="search()">查询</button><!--调用控制器方法-->
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="list-group">
<!--访问控制器的scope里定义的person模型,模型和视图是绑定的-->
<li class="list-group-item">名字: {{person.name}}</li>
<li class="list-group-item">年龄: {{person.age}}</li>
<li class="list-group-item">地址: {{person.address}}</li>
</ul>
</div>
</div>
6 服务端代码
6.1 服务端传值对象
package com.wisely.ch7_7;
public class Person {
private String name;
private Integer age;
private String address;
public Person() {
super();
}
public Person(String name, Integer age, String address) {
super();
this.name = name;
this.age = age;
this.address = address;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
6.2 控制器
//模拟一个查询,即接受前台传入的personName,然后返回Person类,因为
//使用的是@RestController,且返回值类型是Person,所以Spring MVC会自动将对象
//输出为JSON
package com.wisely.ch7_7;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@SpringBootApplication
public class Ch77Application {
@RequestMapping(value="/search",produces={MediaType.APPLICATION_JSON_VALUE})
public Person search(String personName){
return new Person(personName, 32, "hefei");
}
public static void main(String[] args) {
SpringApplication.run(Ch77Application.class, args);
}
}
7 自定义指令
//定制一个封装jqueryui的dataPicker的指令
actionApp.directive('datePicker',function(){ //指令名为datePicker
return {
restrict: 'AC', //属性指令和样式指令
//使用link方法来定义指令,在link方法内可使用当前scope、当前元素及元素属性
link:function(scope,elem,attrs){
//初始化jqueryui的dataPicker
elem.datepicker();
}
};
});
8 View2页面
<!--使用属性形式调用指令-->
<div class="row">
<label for="attr" class="col-md-2 control-label">属性形式</label>
<div class="col-md-2">
<input type="text" class="form-control" date-picker>
</div>
</div>
<!--使用样式形式调用指令-->
<div class="row">
<label for="style" class="col-md-2 control-label">样式形式</label>
<div class="col-md-2">
<input type="text" class="form-control date-picker">
</div>
</div>
三 运行
1 演示后台交互
2 演示自定义指令