从零开始构建一个spring boot + angular web应用(2)

原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。

上一部分中，我们引入了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

 

    
    

        
        
用户登录
        
用户登录失败，请检查输入
        

         用户名
        
        

            
请输入用户名
            
用户名只能包含英文字母、数字和下划线
            
用户名不能多于20个字符
        
          密码
        
        

            
请输入密码
            
密码不能多于20个字符
        
         
         保持登录 登录 
    
    

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就成功搭建！

补充：

1. spring boot项目启动方式也可以采取命令行启动：mvn spring-boot:run
2. 后端依赖的拓展，直接在pom.xml中进行添加即可，maven会自动下载所需要的依赖jar包，例如:spring-security等等。提供一个网址，用以查询依赖jar包的坐标:点这里
3. 前端angular插件的引入，可以直接向bower.json中添加依赖，利用bower install下载所需的插件，再利用gulp命令执行自定义的htmltask，将插件引入index.html中。需要特别注意的是，使用angular的插件，引入之后，一定要在module()中将模块注入。