调整路由模式

gulpfile.js

@@ -1,5 +1,6 @@
 var gulp = require('gulp');
 var loader = require('gulp-load-plugins')(); //按需加载插件，其他插件不用一个一个的引入
+var historyApiFallback = require('connect-history-api-fallback');
 
 var app = {
   srcPath: 'src/',
@@ -130,7 +131,10 @@ gulp.task('serve', function () {
   loader.connect.server({ //前端启动服务，源自于gulp-connect
     root: [app.distPath], //服务启动的根目录
     livereload: true, //即时刷新
-    port: 8000 //端口
+    port: 8000, //端口
+    middleware: function (connect, opt) {
+      return [historyApiFallback()];
+    }
   });
 });
 

package.json

@@ -9,6 +9,7 @@
   "author": "Fatboo",
   "license": "ISC",
   "devDependencies": {
+    "connect-history-api-fallback": "^1.6.0",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-concat": "^2.6.1",

src/app/app.js

@@ -1,20 +1,24 @@
-var app = angular.module('app', ['ng', 'ui.router', 'Views']);
-app.config(function ($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
-  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
-  $stateProvider
-    .state('index', {
-      url: '/index',
-      controller: 'IndexController',
-      templateUrl: 'app/views/index/index.tpl.html'
-    })
-    .state('info', {
-      url: '/info',
-      controller: 'InfoController',
-      templateUrl: 'app/views/info/info.tpl.html'
+angular
+  .module('app', ['ng', 'ui.router', 'Views'])
+  .config(function ($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
+    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
+    $stateProvider
+      .state('index', {
+        url: '/',
+        controller: 'IndexController',
+        templateUrl: 'app/views/index/index.tpl.html'
+      })
+      .state('info', {
+        url: '/info',
+        controller: 'InfoController',
+        templateUrl: 'app/views/info/info.tpl.html'
+      });
+    $urlRouterProvider.otherwise('/'); // 未找到指定的路由地址，重定向到home页
+    $locationProvider.html5Mode({
+      enabled: true,
+      requireBase: false
     });
-  $urlRouterProvider.otherwise('index'); //未找到指定的路由地址，重定向到home页
-  $locationProvider.html5Mode(false).hashPrefix('');
-});
-app.controller('AppController', function ($scope) {
-  console.log('应用初始化！');
-});
+  })
+  .controller('AppController', function ($scope) {
+    console.log('应用初始化！');
+  });

src/app/views/index/index.js

@@ -1,16 +1,24 @@
-app.controller('IndexController', function ($scope) {
-  console.log('我是首页控制器');
-  $scope.user = {
-    id: '01',
-    name: 'job',
-    age: 13
-  };
-  $scope.test = function () {
-    var id = $scope.user.id;
-    $scope.test2(id);
-  };
-  $scope.test2 = function (id) {
-    console.log(id);
-    $('.ui.modal').modal('show');
-  };
-});
+angular
+  .module('app')
+  .controller('IndexController', function ($scope, $http) {
+    console.log('我是首页控制器');
+    var fetchBlogConfig = function () {
+      $http.get('https://blog.coosom.com/setting/fetch').then(function (data) {
+        console.log(data);
+      });
+    };
+    fetchBlogConfig();
+    $scope.user = {
+      id: '01',
+      name: 'job',
+      age: 13
+    };
+    $scope.test = function () {
+      var id = $scope.user.id;
+      $scope.test2(id);
+    };
+    $scope.test2 = function (id) {
+      console.log(id);
+      $('.ui.modal').modal('show');
+    };
+  });

src/app/views/index/index.tpl.html

@@ -1,4 +1,4 @@
-<div ng-controller="IndexController" style="padding: 16px;">
+<div style="padding: 16px;">
   <p>首页</p>
   <p>id: {{user.id}}, name: {{user.name}}, age: {{user.age}}</p>
   <button class="ui primary button" ng-click="test()">测试</button>

src/app/views/info/info.js

@@ -1,3 +1,5 @@
-app.controller('InfoController', function ($scope) {
-  console.log('我是Info控制器');
-});
+angular
+  .module('app')
+  .controller('InfoController', function ($scope) {
+    console.log('我是Info控制器');
+  });

src/app/views/info/info.tpl.html

@@ -1 +1 @@
-<div ng-controller="InfoController">Info</div>
+<div>Info</div>