Blog Archives

Posted:

Aug 14, 2014

Tags:

Comments:

AngularJS去掉的URL里的#号

AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/angularjs-url/

前言

天天都在用AngularJS，各类文档也都看过好几遍，但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了，这个问题不见得有多难，关键是花多长时间去理解AngularJS框架本身。

URL的#号问题
找到错误原因
静态网站的解决方案
动态网站的解决方案

1. URL的#号问题

使用AngularJS的朋友都应该了解，AngularJS框架定义了自己的前端路由控制器，通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新，并支持HTML5的历史记录功能，详细介绍可以参考文章：AngularJS路由和模板。

对于默认的情况，是不启动HTML5模式的，URL中会包括一个#号，用来区别是AngularJS管理的路径还是WebServer管理的路径。

比如：下面的带#号的URL，是AngularJS管理的路径。

http://onbook.me/
http://onbook.me/#/
http://onbook.me/#/book
http://onbook.me/#/about

这种体验其实是不太友好的，特别是像我这种喜欢简洁设计的人，#号的出现非我自愿的，怎么看怎么难受。AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。

通过设置$locationProvider.html5Mode(true)就行了。


book.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

   //..省略代码
    $locationProvider.html5Mode(true);
}]);

支持HTML5的路由URL。

http://onbook.me/
http://onbook.me/book
http://onbook.me/about

接下来的问题就来了，当用这种方式设置了路径以后。如果用户从首页(http://onbook.me/)开始访问，然后跳转到图书页(http://onbook.me/book)一切正常。但如果用户直接打开图书页(http://onbook.me/book) ，就会出现404错误。

就是这个问题纠结了我好长时间，让我不得不用带#号的URL。

2. 找到错误原因

那么，这个问题的原因出在哪里了呢？在路径解析上出错了。

让我从头说起，AngularJS是单页应用，一个ng-app对应一个页面，一个URL。AngularJS实现了自己的前端路由，让一个ng-app可以管理多个URL，再对应到多个ng-vew上面。当我们去访问URL(http://onbook.me/book) 的时候，怎么确定这个路径是 WebServer 后台管理的URL还是AngularJS前台管理的URL呢？

分2种情况看：

1. 用户如果是先访问首页(http://onbook.me)，然后再跳转到页面(http://onbook.me/book)，则这个跳转是由AngularJS前台管理的URL，访问是正常的。
2. 用户直接访问页面(http://onbook.me/book)时，请求是先被提交到了WebServer后台，后台路由没有对应页面(http://onbook.me/book)的路由管理，就会出现404的错误。

如果能把这层想明白，技术上就非常容易解决了。我们让WebServer把属于AngularJS管理的路由URL，都发转到ng-app就可以解决404的问题了，同时，没有#号，还支持HTML5的历史记录查询！！

实现起来分为2种解决方案：

1. 静态网站：纯前台网站(JS+HTML+CSS)，通过Nginx提供Web服务。
2. 动态网站：前台(JS + HTML + CSS) + 后台Node.js提供Web服务。

3. 静态网站的解决方案

静态网站，我们需要修改的地方包括3个文件

index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
nginx.conf : nginx的网站配置文件

编辑 index.html，增加base标签。


<html lang="zh-CN" ng-app="book">
<head>
    <base href="/">
	
// 省略代码
</head>

编辑app.js，增加 $locationProvider.html5Mode(true);


book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) {
    $routeProvider
        .when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'})
        .when('/book', {templateUrl: tplProvider.html('book'), controller: 'BookCtrl'})             //图书
        .when('/book-r1', {templateUrl: tplProvider.html('book-r1'), controller: 'BookR1Ctrl'})   //R的极客理想
        .when('/video', {templateUrl: tplProvider.html('video'), controller: 'VideoCtrl'})         //视频
        .when('/about', {templateUrl: tplProvider.html('about'), controller: 'AboutCtrl'})         //关于作者
        .otherwise({redirectTo: '/'});
    $locationProvider.html5Mode(true);
}]);

编辑nginx的配置文件，增加try_files配置。


server {
        set $htdocs /www/deploy/mysite/onbook;
        listen 80;
        server_name onbook.me;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

这样，静态网站就搞定了，没有麻烦的#号了，可以直接访问和任意页面的刷新。

4. 动态网站的解决方案

动态网站，我们同样需要修改的地方包括3个文件。

index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
server.js : Express框架的路由访问控制文件

index.html 和 app.js两个文件修改，同静态网站的解决方案。动态网站，一般不是通过Nginx直接路由，而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。

打开Express框架的路由访问控制文件server.js，增加路由配置。


app.use(function (req, res) {
    console.log(req.path);
    if(req.path.indexOf('/api')>=0){
        res.send("server text");

    }else{ //angular启动页
        res.sendfile('app/index.html');
    }
});

设置当站内路径(req.path) 不包括 /api 时，都转发到 AngularJS的ng-app(index.html)。所以，我们再直接访问地址 (http://onbook.me/book)时，/book 不包括 /api，就会被直接转发到AngularJS进行路由管理。我们就实现了路由的优化！

我已用了AngularJS有8-9个月了，主要功能都用到了，但还不见其全貌。经常会遇到各种问题，不过比起jQuery的各种无解的问题，还是值得的。优秀的框架值得我们的研究和使用，在摸索中前进！

转载请注明出处：
http://blog.fens.me/angularjs-url/

打赏作者

Posted:

Aug 30, 2013

Tags:

angular angular.js angularjs ng-view route template

Comments:

35 Comments

AngularJS路由和模板

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/angularjs-route-template/

前言

如果想开发一款类似gmail的web应用，我们怎么做呢？

以jQuery的思路，做响应式的架构设计时，我们要监听所有点击事件，通过事件函数触发我们加载数据，提交，弹框，验证等的功能；以 AngularJS的思路，做声明式的架构设计时，我们通过指令和路由先设定好，什么样的操作干什么事情，等事件发生时，程序就会知道该干什么了。

今天说一下，AngularJS是如何实现前端路由功能的！

AngularJS路由介绍
路由的代码实现
实现效果截图

1. AngularJS路由介绍

AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。

AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。

从这个角度想想，要实现一个gmail的应用，真的就不难了。

2. 路由的代码实现

理论不多说了，直接上代码！！还是基于我们之前用yeoman构建的项目。

业务场景：论坛功能，帖子列表页(list.html) 和帖子内容页(detail.html)。

代码文件：

1. 增加：app/demo-route.html
2. 增加：app/views/route/list.html
3. 增加：app/views/route/detail.html
4. 修改: app/scripts/app.js
5. 修改: app/scripts/controllers/main.js

1). 增加：app/demo-route.html
这个文件是主页面(ng-app)，包含视图(ng-view)

<!doctype html>
<head>
<meta charset="utf-8">
<title>route</title>
</head>
<body ng-app="routeApp">
<h1>Route Demo index</h1>

<div ng-view></div>

<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>

2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。


<hr/>
<h3>Route : List.html</h3>

<ul>
<li ng-repeat="id in [1, 2, 3 ]">
<a href="#/list/{{ id }}"> ID{{ id }}</a>
</li>
</ul>

3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)


<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。


var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
      $routeProvider
      .when('/list', {
        templateUrl: 'views/route/list.html',
        controller: 'RouteListCtl'
      })
      .when('/list/:id', {
          templateUrl: 'views/route/detail.html',
          controller: 'RouteDetailCtl'
      })
      .otherwise({
        redirectTo: '/list'
      });
}]);

在routeApp模块中，我们定义了路由和布局模板。routeApp的默认URL是/list，即http://localhost:9000/demo-route.html#/list。跳转详细页的路由是/list/:id，id为参数。

同时，/list的布局模板是views/route/list.html，属于RouteListCtl的控制器管理空间。

5). 修改: app/scripts/controllers/main.js
这个文件定义控制器controller。


routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
    $scope.id = $routeParams.id;
});

分别对应该路由中的两个控制器声明。

程序写好，我们打开浏览器看效果。

3. 实现效果截图

别忘了用下面命令，启动程序。

grunt server

浏览器被自动打开，默认出的是http://localhost:9000/demo-route.html#/list, “#/list”是被redirectTo转向的结果。

点击ID2的链接。

页面被刷新了，出了detil的页面。同时，我们注意观察，页面没有整个刷新，而在视图中(ng-view)做的局部刷新。因为，chrome的开发工具的监控中，只是看到detail.html被加载。

我们再浏览地址栏中，输入212

http://localhost:9000/demo-route.html#/list/212

观察chrome的开发工具的监控中，没有任何的networking操作。

在浏览地址栏中，再输入原来list的地址

http://localhost:9000/demo-route.html#/list

观察chrome的开发工具的监控，确认没有任何变化！！

从这个实验，我们看到AngularJS纯前端路由的实现思路，配合视图的局部刷新，把业务功能切片后分散到HTML的模板页面中。非常容易地实现了widget。并且，这种widget可重用性会非常高，能大大减少前端代码量。

后端组件化开发思路，流畅的嵌入前端。爽死啦！！！

转载请注明出处：
http://blog.fens.me/angularjs-route-template/

打赏作者

Posted:

Aug 29, 2013

Tags:

angular angular.js angularjs webstorm

Comments:

23 Comments

AngularJS最理想开发工具WebStorm

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/angularjs-webstorm-ide/

前言
俗语讲：“工欲善其事，必先利其器”，为了玩转AngularJS，顺手的工具要选好。在上一篇文章中，通过yeoman我们构建了一个AngularJS的工程，通过vi编辑器和命令行操作，我们几乎可以完成整个的项目开发。但是，随着代码量和文件数的增加，文件和目录越来越难把握，代码文件各种难懂，缩进不一致，controller和directive被多少个地方所引用，。。。

我们需要一个IDE，来帮助我们更好的看懂项目，管理代码。WebStorm是目前我认为AngularJS开发最理想工具。

WebStorm介绍
导入Javascript工程
安装AngularJS插件
WebStorm使用

1. WebStorm介绍

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaSscript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

下载：http://www.jetbrains.com/webstorm/index.html

WebStorm可能最大的缺点就是需要付费，对于个人开发者49刀。不过，WebStorm还推出了几种免费的liences。

Classroom License:申请课堂演示
Open Source Project License:申请做为开源项目的贡献者
MVP License: 申请微软的专家

可以通过购买页面找到信息：http://www.jetbrains.com/webstorm/buy/index.jsp

当然我是不会告诉大家，在google里可以找到过去版本的liences的，只是中国的程序员真是太苦逼了。

2. 导入Javascript工程

打开WebStorm后，我们可以通过操作：

"file"==>"open Directory..."==>"select Directory" ==> "ok"

来选择我们已经构建好的工程。

WebStrom对Html5, javascript, css，json… 大部分的代码都支持非常好。

3. 安装AngularJS插件

不过，默认的WebStrom并不认识，AngularJS的指令，当我尝试写代码ng-controller时，编辑器没有出现对应该的提示。

<div ng

对于特别熟悉的AngularJS的人来说，并不是那么重要。但是，如果有语法提示不是会更好吗？

安装AngularJS插件，两种办法：

在IDE中，自动下载自动安装
手动下载，手动安装

1). 在IDE中，自动下载自动安装
我们需要以下的操作：

1. File->Settings->Plugins
2. 点击 “Browse Repositories”
3. 选中 “AngularJS” 双击
4. 选择 “Yes”
5. 重启WebStorm

我在使用这个方法的时候失败了

2). 手动下载，手动安装
我们在jetbrains的插入库中，找到AngularJS：http://plugins.jetbrains.com/plugin/6971

下载angularjs-plugin.zip，然后解压到D:\toolkit\WebStorm 6.0.1\plugins\目录

~ D:\toolkit\WebStorm 6.0.1\plugins\angularjs-plugin

重启WebStorm

再次输入代码：

<div ng-c

语法的提示，太帅气了！！

我查了一下插件的开发者的代码，支持全部的angularJS指令语法：


ng-app,ng-bind,ng-bind-html-unsafe,ng-bind-template,ng-class,ng-class-even,ng-class-odd,
ng-cloak,ng-controller,ng-form,ng-hide,ng-include,ng-init,ng-non-bindable,ng-pluralize,
ng-repeat,ng-show,ng-submit,ng-style,ng-switch,ng-switch-when,ng-switch-default,ng-options,
ng-view,ng-transclude,ng-model,ng-list,ng-change,ng-value,ng-required,required

4. WebStorm使用

1). 对于HTML的页面：WebStorm会在右上角出现浏览器的图标方便我们打开测试

2). 对Javascript脚本：WebStorm会方便的配置NodeJS启动, UnitTest启动等等

IDE的功能很强大，熟悉后会极大地提升我们的开发效率的，特别是对于大规模的多人项目。

转载请注明出处：
http://blog.fens.me/angularjs-webstorm-ide/

打赏作者

Posted:

Aug 28, 2013

Tags:

angular angular.js grunt Javascript nodejs web yeoman

Comments:

24 Comments

AngularJS从构建项目开始

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：

http://blog.fens.me/angularjs-yeoman-project/

前言

随着AngularJS被越来越多的开发人员所了解，AngularJS的应用受到市场的好评。AngularJS是一种新型的以Javascript为基础的框架，以后台的编程思路影响着web前端的开发。在扎根细节之前，让我们先了解AngularJS项目构架。自顶向下的开始，就是不一样的开发。Angular体验式编程从此开始。

AngularJS介绍
构建AngularJS项目（Yeoman，angular-seed）
AngularJS项目结构（Yeoman）
AngularJS必备基础
启动项目

1. AngularJS介绍

AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。

AngularJS介绍，摘自：http://angularjs.cn/A00n

2. 构建AngularJS项目（Yeoman，angular-seed）

说到构建项目，目前我了解的有三种：

手工项目: 自己建目录，下载类库，写html,js,css，自己实现引用关系
angular-seed项目: 下载github的angular-seed，在别人的基础之上开发
Yeoman项目：通过Yeoman下载一个标准Yeoman项目，已经内置了grunt及各种工具包

1). 手工项目

构建手工项目是我们平时用的最多的一种方式了，适用于小型或demo项目。我不在解释，参照angularjs一步一步操作就行了。

2). angular-seed项目

一般把这个项目称为angular的“种子项目”，构建方法是去github下载项目源代码，基于已有项目结构再做开发。这种项目都融入了前人的经验，会以一种比较合理的结构，帮我们构建出项目的原型。适合于有一定规模项目开发，同时更适合geek的扩展。

下载演示一下构建过程


~ D:\workspace\javascript>git clone https://github.com/bsspirit/angular-seed.git
Cloning into 'angular-seed'...
remote: Counting objects: 1007, done.
remote: Compressing objects: 100% (497/497), done.
emote: Total 1007 (delta 521), reused 847 (delta 412)
Receiving objects: 100% (1007/1007), 6.30 MiB | 164 KiB/s, done.
Resolving deltas: 100% (521/521), done.

~ D:\workspace\javascript>cd angular-seed
~ D:\workspace\javascript\angular-seed>node scripts\web-server.js
Http Server running at http://localhost:8000/

打开浏览器：http://localhost:8000/app/index.html

通过阅读READMD.md，我们可以了解这个”种子项目”如何使用。

项目目录及介绍


## Directory Layout
    app/                --> all of the files to be used in production
      css/              --> css files
        app.css         --> default stylesheet
      img/              --> image files
      index.html        --> app layout file (the main html template file of the app)
      index-async.html  --> just like index.html, but loads js files asynchronously
      js/               --> javascript files
        app.js          --> application
        controllers.js  --> application controllers
        directives.js   --> application directives
        filters.js      --> custom angular filters
        services.js     --> custom angular services
      lib/              --> angular and 3rd party javascript libraries
        angular/
          angular.js        --> the latest angular js
          angular.min.js    --> the latest minified angular js
          angular-*.js      --> angular add-on modules
          version.txt       --> version number
      partials/             --> angular view partials (partial html templates)
        partial1.html
        partial2.html

    config/karma.conf.js        --> config file for running unit tests with Karma
    config/karma-e2e.conf.js    --> config file for running e2e tests with Karma

    scripts/            --> handy shell/js/ruby scripts
      e2e-test.sh       --> runs end-to-end tests with Karma (*nix)
      e2e-test.bat      --> runs end-to-end tests with Karma (windows)
      test.bat          --> autotests unit tests with Karma (windows)
      test.sh           --> autotests unit tests with Karma (*nix)
      web-server.js     --> simple development webserver based on node.js

    test/               --> test source files and libraries
      e2e/              -->
        runner.html     --> end-to-end test runner (open in your browser to run)
        scenarios.js    --> end-to-end specs
      lib/
        angular/                --> angular testing libraries
          angular-mocks.js      --> mocks that replace certain angular services in tests
          angular-scenario.js   --> angular's scenario (end-to-end) test runner library
          version.txt           --> version file
      unit/                     --> unit level specs/tests
        controllersSpec.js      --> specs for controllers
        directivessSpec.js      --> specs for directives
        filtersSpec.js          --> specs for filters
        servicesSpec.js         --> specs for services

启动server

node scripts/web-server.js

单元测试(Unit test)：karma + jasmine
端到端测试(End to End test)：karma + jasmine + webserver

我们大概了解了“种子工程”的全貌，这样子心理有数了，就可以开始我们的项目开发了。

对于更高要求的开发者来说，“种子工程”的基础是不够。

1. karam，jasmine都需要手动安装
2. 没有代码自动化(自动增加controller…)
3. 没有实现构建自动化(自动打包，自动压缩js…)
……

一个大型项目构成是方方面面的，接下来我们通过标准化的Yeoman来构建一个企业级应用的项目基础。

3). Yeoman项目
yeoman是一个标准化的项目开发工作流工具，详细使用介绍请参考：Yeoman自动构建js项目

通过yeoman也构建项目

~ D:\workspace\javascript>mkdir nodejs-angular
~ D:\workspace\javascript>cd nodejs-angular
~ D:\workspace\javascript>npm install -g generator-angular

# 创建项目
~ D:\workspace\javascript\nodejs-angular>yo angular
[?] Would you like to include Twitter Bootstrap? Yes
[?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? No
[?] Which modules would you like to include? angular-resource.js, angular-cookies.js, angular-sanitize.js
   create app/styles/bootstrap.css
   create app/styles/main.css
   create app\index.html
   create bower.json
   create package.json
   create Gruntfile.js
   invoke   angular:common:D:\toolkit\nodejs\node_modules\generator-angular\app\index.js
   create     .bowerrc
   create     .editorconfig
   create     .gitattributes
   create     .jshintrc
   create     app\.buildignore
   create     app\.htaccess
   create     app\404.html
   create     app\favicon.ico
   create     app\robots.txt
   create     app\views\main.html
   create     test\.jshintrc
   create     test\runner.html
   create     .gitignore
   invoke   angular:main:D:\toolkit\nodejs\node_modules\generator-angular\app\index.js
   create     app\scripts\app.js
   invoke   angular:controller:D:\toolkit\nodejs\node_modules\generator-angular\app\index.js
   create     app\scripts\controllers\main.js
   create     test\spec\controllers\main.js
   invoke   karma:app
   create     karma.conf.js
   create     karma-e2e.conf.js
   create     .travis.yml

I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try runni
ng the command yourself.

输入yo angular后，会提示我们要不要使用bootstrap;要不要用SCSS生成CSS;要不要include试angular的资源文件。我们选择完以后，会列出生成的项目文件，这个命令执行要2分钟左右，会自动下载很多的依赖包。

3. AngularJS项目结构（Yeoman）

更直观地看到目录结构

.tmp：临时目录
app:开发的源代码的目录
dist:生成用于发布的项目
node_modules:nodejs依赖包
test:测试文件的目录
.bowerrc:bower属性
.editooconfig:对开发工具的属性配置
.gitattributes:git属性的配置
.gitignore:git管理文件的配置
.jshintr:JSHint配置
.travis.yml:travis-ci持续集成的配置
bower.json:bower依赖管理
Gruntfile.js:grunt开发过程管理
karma.conf.js:karma自动化测试
karma-e2e.conf.js:karma端到端自动化测试
package.json:项目依赖文件

4. AngularJS必备基础

从上面的目录结构，我们可以看出AngularJS对哪些东西是需要的。

git, yeoman, bower, grunt, karma …

所以，不要着急上手，先把基础工具都掌握，请参考系列文章：从零开始nodejs系列文章：成为高手 – 进阶篇

基础知识掌握多少，注定我们能开发多大规模的项目。

5. 启动项目

我们下载这个工程后，发现没有任何的文档。启动项目应该如何操作呢？

从刚才分析目录及文件结构，我们知道了这个项目是基于grunt构建的，那么一切的操作都会源于Gruntfile.js。grunt的详细介绍，请参考：grunt让Nodejs规范起来

打开Gruntfile.js，直接定位到grunt.registerTask()


  grunt.registerTask('server', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'open',
      'watch'
    ]);
  });

  grunt.registerTask('test', [
    'clean:server',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'karma'
  ]);

  grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'copy:dist',
    'cdnify',
    'ngmin',
    'cssmin',
    'uglify',
    'rev',
    'usemin'
  ]);

  grunt.registerTask('default', [
    'jshint',
    'test',
    'build'
  ]);

这里定义了4个任务：server，test，build, default。

从名字看就能猜出对应该的功能。

启动server


~ D:\workspace\javascript\nodejs-angular>grunt server
Running "server" task

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "concurrent:server" (concurrent) task

Running "coffee:dist" (coffee) task

Running "copy:styles" (copy) task

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/bootstrap.css" created.
File ".tmp/styles/main.css" created.

Running "connect:livereload" (connect) task
Started connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Waiting...

浏览器被自动打开：http://localhost:9000/#/

执行default任务，生成用于部署的目录dist


~ D:\workspace\javascript\nodejs-angular>grunt --force
Running "jshint:all" (jshint) task
>> 3 files lint free.
Warning: Task "karma" not found. Used --force, continuing.

Running "clean:dist" (clean) task
Cleaning .tmp...OK
Cleaning dist/.htaccess...OK
Cleaning dist/404.html...OK
Cleaning dist/bower_components...OK
Cleaning dist/favicon.ico...OK
Cleaning dist/index.html...OK
Cleaning dist/robots.txt...OK
Cleaning dist/scripts...OK
Cleaning dist/styles...OK
Cleaning dist/views...OK

Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks

Found a block:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
Updating config with the following assets:
- .tmp\styles\bootstrap.css
- .tmp\styles\main.css

Found a block:
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
Updating config with the following assets:
- app\bower_components\bootstrap-sass\js\bootstrap-affix.js
- app\bower_components\bootstrap-sass\js\bootstrap-alert.js
- app\bower_components\bootstrap-sass\js\bootstrap-dropdown.js
- app\bower_components\bootstrap-sass\js\bootstrap-tooltip.js
- app\bower_components\bootstrap-sass\js\bootstrap-modal.js
- app\bower_components\bootstrap-sass\js\bootstrap-transition.js
- app\bower_components\bootstrap-sass\js\bootstrap-button.js
- app\bower_components\bootstrap-sass\js\bootstrap-popover.js
- app\bower_components\bootstrap-sass\js\bootstrap-typeahead.js
- app\bower_components\bootstrap-sass\js\bootstrap-carousel.js
- app\bower_components\bootstrap-sass\js\bootstrap-scrollspy.js
- app\bower_components\bootstrap-sass\js\bootstrap-collapse.js
- app\bower_components\bootstrap-sass\js\bootstrap-tab.js

Found a block:
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
Updating config with the following assets:
- app\bower_components\angular-resource\angular-resource.js
- app\bower_components\angular-cookies\angular-cookies.js
- app\bower_components\angular-sanitize\angular-sanitize.js

Found a block:
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
Updating config with the following assets:
- {.tmp,app}\scripts\app.js
- {.tmp,app}\scripts\controllers\main.js

Configuration is now:

cssmin:
{ 'dist\\styles\\main.css': 'dist\\styles\\main.css' }

concat:
{ 'dist\\styles\\main.css':
[ '.tmp\\styles\\bootstrap.css',
'.tmp\\styles\\main.css' ],
'dist\\scripts\\plugins.js':
[ 'app\\bower_components\\bootstrap-sass\\js\\bootstrap-affix.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-alert.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-dropdown.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-tooltip.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-modal.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-transition.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-button.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-popover.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-typeahead.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-carousel.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-scrollspy.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-collapse.js',
'app\\bower_components\\bootstrap-sass\\js\\bootstrap-tab.js' ],
'dist\\scripts\\modules.js':
[ 'app\\bower_components\\angular-resource\\angular-resource.js',
'app\\bower_components\\angular-cookies\\angular-cookies.js',
'app\\bower_components\\angular-sanitize\\angular-sanitize.js' ],
'dist\\scripts\\scripts.js':
[ '{.tmp,app}\\scripts\\app.js',
'{.tmp,app}\\scripts\\controllers\\main.js' ] }

uglify:
{ dist: { files: { '<%= yeoman.dist %>/scripts/scripts.js': [ 'dist/scripts/scripts.js' ] } },
'dist\\scripts\\plugins.js': 'dist\\scripts\\plugins.js',
'dist\\scripts\\modules.js': 'dist\\scripts\\modules.js',
'dist\\scripts\\scripts.js': 'dist\\scripts\\scripts.js' }

requirejs:
{}

Running "concurrent:dist" (concurrent) task

Running "copy:styles" (copy) task

Running "imagemin:dist" (imagemin) task

Running "coffee:dist" (coffee) task

Running "htmlmin:dist" (htmlmin) task

Running "svgmin:dist" (svgmin) task

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/bootstrap.css" created.
File ".tmp/styles/main.css" created.

Running "concat:dist\styles\main.css" (concat) task
File "dist\styles\main.css" created.

Running "concat:dist\scripts\plugins.js" (concat) task
File "dist\scripts\plugins.js" created.

Running "concat:dist\scripts\modules.js" (concat) task
File "dist\scripts\modules.js" created.

Running "concat:dist\scripts\scripts.js" (concat) task
File "dist\scripts\scripts.js" created.

Running "copy:dist" (copy) task
Created 63 directories, copied 367 files

Running "cdnify:dist" (cdnify) task
Going through dist/404.html, dist/index.html to update script refs

Running "ngmin:dist" (ngmin) task
ngminifying dist/scripts/modules.js, dist/scripts/plugins.js, dist/scripts/scripts.js

Running "cssmin:dist\styles\main.css" (cssmin) task
File dist\styles\main.css created.

Running "uglify:dist" (uglify) task
File "dist/scripts/scripts.js" created.

Running "uglify:dist\scripts\plugins.js" (uglify) task
File "dist\scripts\plugins.js" created.

Running "uglify:dist\scripts\modules.js" (uglify) task
File "dist\scripts\modules.js" created.

Running "uglify:dist\scripts\scripts.js" (uglify) task
File "dist\scripts\scripts.js" created.

Running "rev:dist" (rev) task
dist/scripts/modules.js >> 6b865daa.modules.js
dist/scripts/plugins.js >> 76c21dca.plugins.js
dist/scripts/scripts.js >> ff635307.scripts.js
dist/styles/main.css >> a5c01db0.main.css

Running "usemin:html" (usemin) task

Processing as HTML - dist/404.html
Update the HTML to reference our concat/min/revved script files
Update the HTML with the new css filenames
Update the HTML with the new img filenames
Update the HTML with data-main tags
Update the HTML with the data tags
Update the HTML with background imgs, case there is some inline style
Update the HTML with anchors images
Update the HTML with reference in input

Processing as HTML - dist/index.html
Update the HTML to reference our concat/min/revved script files
<script src="scripts/plugins.js" changed to <script src="scripts/76c21dca.plugins.js"
<script src="scripts/modules.js" changed to <script src="scripts/6b865daa.modules.js"
<script src="scripts/scripts.js" changed to <script src="scripts/ff635307.scripts.js"
Update the HTML with the new css filenames
<link rel="stylesheet" href="styles/main.css" changed to <link rel="stylesheet" href="styles/a5c01db0.main.css"
Update the HTML with the new img filenames
Update the HTML with data-main tags
Update the HTML with the data tags
Update the HTML with background imgs, case there is some inline style
Update the HTML with anchors images
Update the HTML with reference in input

Processing as HTML - dist/views/main.html
Update the HTML to reference our concat/min/revved script files
Update the HTML with the new css filenames
Update the HTML with the new img filenames
Update the HTML with data-main tags
Update the HTML with the data tags
Update the HTML with background imgs, case there is some inline style
Update the HTML with anchors images
Update the HTML with reference in input

Running "usemin:css" (usemin) task

Processing as CSS - dist/styles/a5c01db0.main.css
Update the CSS with new img filenames

Done, but with warnings.

Elapsed time
jshint:all 69ms
clean:dist 593ms
useminPrepare:html 49ms
concurrent:dist 2s
autoprefixer:dist 65ms
concat:dist\scripts\scripts.js 26ms
copy:dist 475ms
ngmin 21ms
ngmin:dist 210ms
uglify:dist 37ms
uglify:dist\scripts\plugins.js 252ms
uglify:dist\scripts\modules.js 76ms
usemin:html 313ms
usemin:css 82ms
Total 5s

有了工具的支持，开发效率就是事半功倍了，前提是你要知道如何善用这些工具！

转载请注明出处：
http://blog.fens.me/angularjs-yeoman-project/

打赏作者

排行榜

Blog Archives

Posted:

Tags:

Comments:

AngularJS去掉的URL里的#号

1. URL的#号问题

2. 找到错误原因

3. 静态网站的解决方案

4. 动态网站的解决方案

Posted:

Tags:

Comments:

AngularJS路由和模板

1. AngularJS路由介绍

2. 路由的代码实现

3. 实现效果截图

Posted:

Tags:

Comments:

AngularJS最理想开发工具WebStorm

1. WebStorm介绍

2. 导入Javascript工程

3. 安装AngularJS插件

4. WebStorm使用

Posted:

Tags:

Comments:

AngularJS从构建项目开始

1. AngularJS介绍

2. 构建AngularJS项目（Yeoman，angular-seed）

3. AngularJS项目结构（Yeoman）

4. AngularJS必备基础

5. 启动项目

站内导航

最新文章

最新评论

最热文章