用Grunt搭建一个简易服务器，使用bower引入Angular UI Router，然后确认其运行正常

1 年 ago

科, 雅

2 minutes

这是关于http://qiita.com/mude/items/9126a49b4c55ab322a25的延续。

在AngularJS的开发中，常常会使用Angular UI Router来引入。此外，为了运行，我们还决定搭建一个简易服务器。

准备简易服务器

安装一个用于建立简易服务器的插件。

为了使用Node.js的HTTP服务器connect模块，需要安装grunt-contrib-connect模块。

有关grunt-contrib-connect，http://qiita.com/ginpei/items/6a3f870da2a9ec043627提供了详细的信息。

顺便提一句，上次我没有创建 package.json，这次就趁机创建一下。在开发目录中执行以下命令。

npm init

只需按下几次回车键，问题将保持默认状态，然后会生成一个package.json文件。

接下来，安装grunt-contrib-connect插件。

npm install grunt-contrib-connect --save-dev

为了使用这个插件，我们需要定义一个Grunt任务。

定义grunt任务。

使用grunt-contrib-connect来定义用于启动服务器的Grunt任务。

首先，安装grunt-cli以确保能够执行Grunt任务。我认为进行全局安装是可行的。

npm install grunt-cli -g

在编辑器中，将下面的描述内容保存为名为Gruntfile.js的文件到开发目录中。

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      hoge:{
        options: {
          base:'public',
          keepalive: true,
          port: 8080
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-connect');
}

参考になるGruntfile.jsの書き方は、http://js.studio-kingdom.com/grunt/doc/sample_gruntfileです。

在开发目录中执行”grunt connect”命令，根据”hoge”的设置启动connect模块。网站名称可以任意指定。

执行的时候就是这种感觉。

$ grunt connect
Running "connect:hoge" (connect) task
Waiting forever...
Started connect web server on http://localhost:8080

当在浏览器中访问 localhost:8080 时，应该会显示位于开发目录下的public文件夹内的index.html。通过这种方式，可以确认服务器正在运行。

获得UI Router

关于UI Router的详细信息，请参考以下链接：
http://qiita.com/sashimizakana/items/0b03131103a5cd01bfb

上次介绍了bower的使用，但是使用bower也能轻松安装UI Router。

bower install angular-ui-router --save

尝试使用UI Router

首先，在开发目录下创建一个名为views的文件夹，并创建home.html和sub.html两个文件。文件内容可以随意编写。

同样地，我们在开发目录中创建一个名为app.js的文件。其中内容如下所示。如果使用UI路由器，我认为这是一个传统的模块定义方式。

'use strict';

var myApp = angular.module('MyApp',['ngMaterial','ui.router']);

myApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/');

  $stateProvider.state('home',{
    url:'/',
    views:{
      panel:{
        templateUrl:'./views/home.html'
      }
    }
  }).state('sub',{
    url:'/sub',
    views:{
      panel:{
        templateUrl:'./views/sub.html'
      }
    }
  });
}]);

index.html的呈现大概是这样的。

<html lang="en" ng-app="MyApp">
  <head>
    <link rel="stylesheet" href="./components/angular-material/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <link rel="stylesheet" href="./hello.css">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body>
    <h1>Hello</h1>
    <div ui-view="panel"></div>

    <!-- Angular Material Dependencies -->
    <script src="./components/angular/angular.min.js"></script>
    <script src="./components/angular-animate/angular-animate.min.js"></script>
    <script src="./components/angular-aria/angular-aria.min.js"></script>
    <script src="./components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="./components/angular-material/angular-material.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

由于之前有处理过Angular Material，所以相关的JavaScript文件加载部分仍然存在，但现在不需要太在意。另外，我将模块名设为MyApp，因此ng-app的属性值也改为MyApp。由于不使用body的ng-controller属性，我将其删除。

当在浏览器中访问localhost:8080时，会被重定向到localhost:8080/#/，浏览器上会显示在home.html中编写的内容，在”Hello”这个字下方显示。另外，当访问localhost:8080/#/sub时，浏览器上会显示在sub.html中编写的内容，在”Hello”这个字下方显示。

看起来 UI Router 在运行中。

总结

如果使用bower，可以安装Angular的一个模块叫做Angular UI Router。

追加（修正的地方）

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">