[AngularJS]使用Yeoman构建开发AngularJS项目

Jax000 2019-06-27

一. 安装

第一步:安装npm所需模块

首先需要安装Node.js,然后使用npm安装所需要的模块

npm install -g grunt-cli bower yo generator-karma generator-angular

第二步:创建工程

创建一个新的目录,并在目录下面运行

yo angular angular-project

angular-project是工程名字
然后会出现如下图:
[AngularJS]使用Yeoman构建开发AngularJS项目

根据需要选择使用Grunt还是Gulp,和是否需要Sass和Bootstrap。这里选择了使用Grunt和Bootstrap。
Grunt和Gulp都是项目构建工具,不同的是Grunt是基于配置的,而Gulp是基于代码的。
然后就是安装过程,生成整个项目的框架,非常方便。

第三步:运行

运行工程,Yeoman已经使用Grunt配置好了整个项目,只需要在控制台输入

grunt serve

浏览器就会自动打开窗口,http://localhost:9000,然后就可以看到网页了。
[AngularJS]使用Yeoman构建开发AngularJS项目

二. 工程目录

[AngularJS]使用Yeoman构建开发AngularJS项目

主要开发就在app目录下面,bower_components是安装的依赖包,类似Node.js的node_modules,不同的是Node.js使用npm安装,bower_components使用bower安装。一般前端项目安装依赖使用bower。使用npm安装依赖包时,一个依赖可以有多个版本,而使用bower安装时,同一个依赖不能有多个版本。使用bower安装的依赖包可以在bower.json中看到。
Gruntfile.js是编译工程的文件,这里有很多配置,包括server的配置等,所以这里没有另外搭建后端server。
package.json是后端的依赖包,主要有Grunt的依赖包。

然后主要的开发就在app文件夹下,这里依次说明。
app/images:存储网页需要的图片。
app/scripts:前端脚本。包括controllers,services,以及程序主入口app.js文件。
app/styles:CSS样式文件。
app/views:静态页面文件。
app/404.html:页面找不到时跳转的页面。
app/favicon.ico:页面标题前的图标。
app/index.html:在这里导入CSS样式文件和所有脚本文件。

三. 创建一个页面并配置路由

使用Yeoman可以很快的创建页面对应的controller和路由。

1.安装angular-ui-router

angular-ui-router是AngularJS的第三方路由模块,比自带的angular-route路由模块好用,可以更好的实现页面跳转,嵌套路由。
安装方法:

bower install angular-ui-router --save

2.配置app/scripts/app.js文件

本来是这样的

angular
  .module('angularProjectApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

将"ngRoute"改为"ui.router",配置路由的格式也修改为

angular
  .module('angularProjectApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ui.router',
    'ngSanitize',
    'ngTouch'
  ])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: '/views/main.html',
        controller: 'MainCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
      }};
  }]);

3.创建一个新的页面

yo angular:route Page

可以看到app/scripts/controllers文件夹下多个一个page.js文件,
app/views文件夹下多了一个page.html文件,
app/index.html中增加了一行

<script src="scripts/controllers/page.js"></script>

index.html需要导入所有脚本文件,Yeoman帮我们自动导入了。

Yeoman还提供了很多自动创建的方法,
yo angular:controller [name], 自动创建一个controller
yo angular:directive [name],自动创建directive,directive可以自定义指令
yo angular:service [name],自动创建一个service,一般在service中向服务器端发送请求获取数据
yo angular:filter [name],自动创建filter,filter实现对数据显示的格式设置
yo angular:view [name],自动创建view

4.配置路由

修改app/scripts/app.js文件

$stateProvider
  .state('main', {
    url: '/',
    templateUrl: '/views/main.html',
    controller: 'MainCtrl'
  })
  .state('about', {
    url: '/about',
    templateUrl: '/views/about.html',
    controller: 'AboutCtrl'
  })
  .state('page', { //此处为页面名字,可以自定义页面名字,在路由跳转时使用
    url: 'page',   //自定义路由
    templateUrl: '/view/page.html',
    controller: 'PageCtrl'
  });

5.设置路由跳转

在首页上创建一个按钮,跳转到创建的page.html

<button type="button" ng-click="goPage()">Go Page</button>

然后在main.js中添加对应的按钮事件

angular.module('angularProjectApp')
  .controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $scope.goPage = function () {
      $state.go('page');
    }
  }]);

首先通过依赖注入的方式注入两个参数,$scope和$state。
$scope其实是一个对象,存储当前页面的数据和函数,可以看作是controller和view之前的桥梁。
$state的作用实现路由跳转,通过$state.go('page')的形式就可以跳转到page页面。
'page'就是下面代码第一行的页面名字。

.state('page', {
    url: '/page', 
    templateUrl: '/view/page.html',
    controller: 'PageCtrl'
  });

在命令行运行

grunt serve

发现此时页面成了这个样子
[AngularJS]使用Yeoman构建开发AngularJS项目

查看控制台也并没有报错,但是main.html的内容并没有出现,检查发现需要修改index.html,

<div ng-view=""></div>
<div ui-view=""></div>

这是angular-ui-router模块和angular-route的不同之处。
然后页面显示正常。
[AngularJS]使用Yeoman构建开发AngularJS项目

点击Go Page,也可以在浏览器地址栏直接输入"http://localhost:9000/#!/page"
[AngularJS]使用Yeoman构建开发AngularJS项目

页面跳转到page页面。

这样就实现了使用Yeoman构建一个AngularJS项目,并简单开发了一下,创建一个新的页面并实现了路由跳转。

相关推荐