yeoman 安装和使用 - 快速构建web应用 (下)

之前有一篇讲了yeoman 工具安装和简易使用,你可以从这里点击查看 伟大的传送带

这一片分享下生成的这个后端web框架什么时候使用?

结构包括什么?

各部分如何工作?

什么时候使用这个框架:当你是个前端,当你专注与某个富客户端应用时,当你需要后端服务器提供数据而你不会或者懒得编写服务器端程序时...

本人是在学习angular.js 时,也就是做一个富客户端应用时,后端可能只是根据api获取数据,所以方便快捷的使用了 yeoman 来生成一个web架构.

这个架构包括了哪些东西?

app 目录是框架的主要目录,包含了静态资源(fonts,images,styles) 

          angular.js 需要提供的 视图(views),controller(位于 scripts 下的 controllers 文件夹)

node_modules 目录是框架涉及到的所有包(不用详细解释,你懂的)

test  目录是单元测试目录.

bower.json  bower工具本来就是一个包管理器,所以这个文件是指在此项目管理的包有那些.

Gruntfile.js   grunt工具的一些任务配置及相关grunt插件加载.

karma.conf.js  karma测试工具的配置脚本. 

package.json node.js项目模块配置说明文件.

我们重点关注的是 app 目录下的scripts 文件夹

后端运行的脚本都在此文件夹里, app.js 文件是 angular.js 里面的路由配置文件,不同的路由如何展示不同的页面顺便让和页面的dom和相关控制器绑定起来,都是这个文件的所做的事情.

'use strict';

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

$routeProvider 是angular.JS 上的一个路由服务,可以通过它来绑定视图和相关控制器.如上面的代码,当视图是 '/' 时,对应的视图文件是 views/main.html , 对应的控制器是 MainCtrl

如果所有视图都匹配不到时就展示默认视图和控制器,即最后的 otherwise 选项.

我们自己要在此项目上创建一个视图和控制器,大概需要哪些步骤呢?

(1)Controllers 目录下创建一个控制器文件 cart.js

(2)Views 目录下创建一个视图文件 cart.html

(3)scripts 目录下 app.js 文件中添加一个 cart 的路由来绑定 view和相对应的 controller

(4)cart.html 模板中引用 cart 对应的controller

(5)添加单元测试

如果你用yeoman ,可能只需要一行命令

yo angular:route cart

上面的提示已经告诉你,这行命令已经帮你做了上面的5个步骤.