原創(chuàng)性聲明：本文完全為筆者原創(chuàng)痒给，請尊重筆者勞動力。轉載務必注明原文地址骏全。
上一部分中苍柏，我們引入了spring-boot，此時項目的結構應該如下：
[ps: 我更改了一下jdk的配置姜贡，換成了工作空間配置的jdk试吁。]
接著，繼續(xù)楼咳。
- step 1
參考我的另一篇文檔:點擊這里熄捍。參考之后，你的項目已經(jīng)引入了angularJS母怜，并已經(jīng)成功引入到index.html中余耽。此時項目結構如下：
Paste_Image.png
bower_components中報的錯誤先忽略。此時index.html中也已經(jīng)引入了bower_components中的插件苹熏。接著要做的事情就是在index.html中引入ng-app碟贾，并創(chuàng)建angular config.js配置路由。
-
step 2
在index.html中的body標簽上添加ng-app屬性轨域，并聲明一個ui-view袱耽。如下：
Paste_Image.png step 3
創(chuàng)建如下目錄及文件(app.js、config.js干发、login.html朱巨、login.js、dashboard.js枉长、dashboard.html):
![Uploading Paste_Image_958484.png . . .]
對應的內容分別如下：
- app.js>原創(chuàng)性聲明：本文完全為筆者原創(chuàng)冀续，請尊重筆者勞動力。轉載務必注明原文地址搀暑。
經(jīng)過上半部分的一步步搭建沥阳，我們的項目中已經(jīng)集成了spring boot跨琳。下面再一步步的介紹如何把angularjs引入項目自点，并且配置一個簡單的路由、控制器以及如何使用gulp自動把下載的angular插件引入index.html脉让。
目前桂敛，我們的項目結構如下：
[ps: 我更改了一下jdk的配置功炮，換成了工作空間配置的jdk。]
- step 1
參考我的另一篇文檔:點擊這里术唬。之后薪伏，你的項目已經(jīng)引入了angularJS，并已經(jīng)成功引入到index.html中粗仓。此時項目結構如下：
Paste_Image.png
bower_components中報的錯誤先忽略嫁怀。此時index.html中也已經(jīng)引入了bower_components中的插件。接著要做的事情就是在index.html中引入ng-app借浊，并創(chuàng)建angular config.js配置路由塘淑。
-
step 2
在index.html中的body標簽上添加ng-app屬性，并聲明一個ui-view蚂斤。如下：
Paste_Image.png -
step 3
創(chuàng)建如下目錄及文件(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">用戶名只能包含英文字母肖油、數(shù)字和下劃線</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构韵，可以看到如下結果:
路由跳轉到了login。接著直接點擊登錄趋艘，即可跳轉到首頁疲恢。至此，maven集成的spring boot + angular就成功搭建瓷胧！
補充：
- spring boot項目啟動方式也可以采取命令行啟動：
mvn spring-boot:run - 后端依賴的拓展显拳，直接在pom.xml中進行添加即可，maven會自動下載所需要的依賴jar包搓萧，例如:spring-security等等杂数。提供一個網(wǎng)址，用以查詢依賴jar包的坐標:點這里
- 前端angular插件的引入瘸洛，可以直接向bower.json中添加依賴揍移，利用
bower install下載所需的插件，再利用gulp命令執(zhí)行自定義的htmltask反肋，將插件引入index.html中那伐。需要特別注意的是，使用angular的插件，引入之后罕邀，一定要在module()中將模塊注入畅形。
