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

最新推荐文章于 2024-07-27 11:14:35 发布

00u0o

最新推荐文章于 2024-07-27 11:14:35 发布

阅读量2.2k

点赞数

http://www.jianshu.com/p/46def544bd40

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

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()中将模块注入