原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。
上一部分中，我们引入了spring-boot，此时项目的结构应该如下：
Paste_Image.png
[ps: 我更改了一下jdk的配置，换成了工作空间配置的jdk。]
接着，继续。
- step 1
参考我的另一篇文档:点击这里。参考之后，你的项目已经引入了angularJS，并已经成功引入到index.html中。此时项目结构如下：
Paste_Image.png
bower_components中报的错误先忽略。此时index.html中也已经引入了bower_components中的插件。接着要做的事情就是在index.html中引入ng-app，并创建angular config.js配置路由。
-
step 2
在index.html中的body标签上添加ng-app属性，并声明一个ui-view。如下：
Paste_Image.png
-
step 3
创建如下目录及文件(app.js、config.js、login.html、login.js、dashboard.js、dashboard.html):
![Uploading Paste_Image_958484.png . . .]
对应的内容分别如下：
- app.js>原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。
经过上半部分的一步步搭建，我们的项目中已经集成了spring boot。下面再一步步的介绍如何把angularjs引入项目，并且配置一个简单的路由、控制器以及如何使用gulp自动把下载的angular插件引入index.html。
目前，我们的项目结构如下：
Paste_Image.png
[ps: 我更改了一下jdk的配置，换成了工作空间配置的jdk。]
- step 1
参考我的另一篇文档:点击这里。之后，你的项目已经引入了angularJS，并已经成功引入到index.html中。此时项目结构如下：
Paste_Image.png
bower_components中报的错误先忽略。此时index.html中也已经引入了bower_components中的插件。接着要做的事情就是在index.html中引入ng-app，并创建angular config.js配置路由。
-
step 2
在index.html中的body标签上添加ng-app属性，并声明一个ui-view。如下：
Paste_Image.png
-
step 3
创建如下目录及文件(app.js、config.js、login.html、login.js、dashboard.html、dashboard.js):
Paste_Image.png
内容分别如下：
1.app.js
'use strict';
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngMessages',
'ngSanitize',
'ngAria',
'ngMaterial',
'md.data.table',
'ui.router',
'ui.validate',
'ui.codemirror',
'angularMoment',
'chart.js',
'once',
'angular-loading-bar',
'angular.filter',
'LocalStorageModule'
])
.run(function($rootScope, $state, $stateParams, $window, $http, $mdDialog) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
2.config.js
'use strict';
angular.module('myApp').config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider.state('login', {
url : '/login',
data : {
authorities : [],
title : '登录',
},
views : {
'main@' : {
templateUrl : 'views/login.html',
controller : 'LoginCtrl',
}
}
})
.state('index', {
url: '/index',
views : {
'main@' : {
templateUrl : 'views/dashboard.html',
controller : 'DashboardCtrl',
}
}
});
});
3.login.html
<div layout="row" layout-align="center center">
<md-card flex-sm="100" flex-gt-sm="60" flex-gt-md="40">
<form name="form" novalidate ng-submit="login($event)">
<md-card-content>
<h2 class="md-title">用户登录</h2>
<p class="error" ng-show="authenticationError">用户登录失败，请检查输入</p>
<div class="inset"></div>
<md-input-container class="md-block"> <label>用户名</label>
<input type="text" name="username" ng-model="username" required
md-maxlength="20" ng-pattern="/^[0-9a-zA-Z_]*$/">
<div ng-messages="form.username.$error">
<div ng-message="required">请输入用户名</div>
<div ng-message="pattern">用户名只能包含英文字母、数字和下划线</div>
<div ng-message="md-maxlength">用户名不能多于20个字符</div>
</div>
</md-input-container> <md-input-container class="md-block"> <label>密码</label>
<input type="password" name="password" ng-model="password" required
md-maxlength="20">
<div ng-messages="form.password.$error">
<div ng-message="required">请输入密码</div>
<div ng-message="md-maxlength">密码不能多于20个字符</div>
</div>
</md-input-container> </md-card-content>
<md-card-actions layout="row" layout-padding
layout-align="space-between center"> <md-checkbox
ng-model="rememberMe" class="md-primary">保持登录</md-checkbox> <md-button
type="submit" class="md-primary md-raised">登录</md-button> </md-card-actions>
</form>
</md-card>
</div>
4.login.js
'use strice';
angular.module('myApp')
.controller('LoginCtrl', function($scope, $state) {
console.log('登录页面');
$scope.login = function(event) {
console.log(event);
$state.go('index');
}
})
5.dashboard.html
首页
6.dashboard.js
'use strict';
angular.module('myApp')
.controller('DashboardCtrl', function($scope) {
console.log('dashboard');
})
- step 4
最后，不要忘了将新建的这几个js文件手动引入到index.html中(注意不要引入的位置不要放在bower指定的位置)。
运行项目: Run As-> Spring Boot App,启动后访问localhost:8080，可以看到如下结果:
Paste_Image.png
路由跳转到了login。接着直接点击登录，即可跳转到首页。至此，maven集成的spring boot + angular就成功搭建！
补充：
- spring boot项目启动方式也可以采取命令行启动：
mvn spring-boot:run - 后端依赖的拓展，直接在pom.xml中进行添加即可，maven会自动下载所需要的依赖jar包，例如:spring-security等等。提供一个网址，用以查询依赖jar包的坐标:点这里
- 前端angular插件的引入，可以直接向bower.json中添加依赖，利用
bower install下载所需的插件，再利用gulp命令执行自定义的htmltask，将插件引入index.html中。需要特别注意的是，使用angular的插件，引入之后，一定要在module()中将模块注入。
网友评论