我尝试了YEOMAN的教程

1 年 ago

科, 雅

3 minutes

首先
or
首先要说明

我会按照YEOMAN网站上的教程逐步操作。

环境

git v2.3.0

让我们搭建一个网络应用程序

作为一个示例Web应用程序，我将创建一个TODO应用程序。
您将能够通过拖放来添加、删除、整理TODO，以及进行离线保存。

完成这个codelab大约需要60分钟。

遇见叶曼

Yeoman可使用1到2个命令来生成整个Web应用程序或单个组件（如控制器或模型）的常规代码。

yo:スキャフォールディングツール。
面倒な作業であるフレームワーク固有のscaffoldをジェネレータでやってくれる。

为了提高生产效率，我们还将与其他工具进行协作。

grunt :プロジェクトのビルド、プレビュー、テストで使用。

gulp：設定よりもコードを好むGrunt JSの代替ツール。

bower：フロントエンドライブラリの依存を解決するために使用。

第一步：搭建开发环境

安装先决条件

如果尚未安装，请进行安装。

git

安装Yeoman工具集。

$ npm install --global yo bower grunt-cli

出现无法访问安装目录（EACCES）的错误。虽然想要以su权限运行，但在避免解决方案中写着不要使用su。请按照此页面进行修复。

在.zshrc文件中添加以下内容。

NPM_PACKAGES="${HOME}/.npm-packages"

NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"

PATH="$NPM_PACKAGES/bin:$PATH"

# Unset manpath so we can inherit from /etc/manpath via the `manpath`
# command
unset MANPATH # delete if you already modified MANPATH elsewhere in your config
MANPATH="$NPM_PACKAGES/share/man:$(manpath)"

创建一个 ~/.npmrc 文件
前缀=${HOME}/.npm-packages

$ mkdir "${HOME}/.npm-packages"
$ source ~/.zshrc

再次执行以下命令：npm install –global yo bower grunt-cli。

确认安装

$ yo --version && bower --version && grunt --version

步骤2：安装Yeoman生成器

在传统的Web开发工作流中，常常需要花费很多时间来组装典型的代码、下载依赖关系以及手动创建Web文件夹结构。

农民ジェネレータ将会拯救这个。
让我们为AngularJS项目安装一个生成器吧！

安装AngularJS生成器

$ npm install --global generator-angular@0.9.2

除了直接使用npm install，您还可以通过Yeoman对话菜单从生成器中搜索。运行yo命令并选择”Install a generator”。

第三步：使用生成器来搭建脚手架。

在中国的土生土长的语境下，Yeoman 这个词的意思是根据具体的配置要求生成用于Web应用程序的文件。

创建项目文件夹

创建我的待办事项文件夹

$ mkdir mytodo && cd mytodo

这个文件夹是用来放置搭建好的文件的位置。

作为额外的附加福利，Angular生成器会动态地使用文件夹名称来创建应用的命名空间。
例如，如果是mytodo，那么就会变成angular.module(‘mytodoApp’, [])。
在继续之前，请确保没有输入错误。

从Yeoman菜单访问生成器。

执行yo。

$ yo

我们一直在寻找方法来使Yo变得更好！我们是否可以匿名报告使用统计数据以便随时间改进该工具？更多信息请见：https://github.com/yeoman/insight 和 http://yeoman.io (Y/n)

嗨，Kazuya！你想做什么？
选择一个生成器
❯ Angular
Karma
──────────────
更新你的生成器
安装一个生成器
寻找一些帮助
带我离开这里！
──────────────

您是否想使用Sass（带有Compass）？不需要
是否要包括Bootstrap？是的
您想包含哪些模块？（按<空格>选择）
❯◉ angular-animate.js
◉ angular-cookies.js
◉ angular-resource.js
◉ angular-route.js
◉ angular-sanitize.js
◉ angular-touch.js

[?] 是否可以匿名报告使用统计数据以改进 Bower 工具？可以选择是或否。

Yeoman会自动在找到的Web应用程序依赖关系上为工作流程引入方便的Grunt任务并自动搭建起脚手架。

发电机的设置

有些生成器提供自定义选项设置以加快开发环境的初始设置，以定制共同的开发库。 (例如刚才提到的SaaS和Bootstrap选择)

AngularJS的生成器提供了使用Sass（包括Commpass）或包括Twitter Bootstrap的选项。

步骤4：对由Yeoman生成的应用进行评估。

为了查看实际上已经搭建好的脚手架，打开mytodo目录。

┣ app：Webアプリの親ディレクトリ  
┃　┣ index.html：Angularアプリの基礎のhtmlファイル  
┃　┣ 404.html, favicon.ico, robots.txt：一般的に使われるWebファイル  
┃　┣ scripts：JSファイル  
┃　┃　　┣ app.js：メインのAngularアプリコード  
┃　┃　　┗ controllers：Angularコントローラ  
┃　┣ styles：CSSファイル  
┃　┗ views：Angularテンプレートの格納場所  
┣ bower_components, bower.json：bowerでインストールされるJavaScript/webの依存関係  
┣ Gruntfile.js, package.json, node_modules：Gruntタスクで必要な設定と依存関係  
┗ test：scaffoldされた、コントローラ用の典型的なテストを含むプロジェクト用のテストランナーとユニットテスト

步骤5：使用浏览器预览应用程序

因为Yeoman是其中一部分的功能，所以不需要对本地Web服务器进行特殊设置来进行预览。

服务器开始

执行以下命令后，将在localhost:9000上启动基于Node的HTTP服务器。

$ grunt serve

没有发生。错误。。。

Warning: ENOENT, no such file or directory '/省略/mytodo/app/bower.json' Use --force to continue.

按照Stack Overflow的建议，将Gruntfile.js文件中的cwd属性注释掉。

// Automatically inject Bower components into the app
164     wiredep: {
165       options: {
166         cwd: '<%= yeoman.app %>'
167       },
168       app: {
169         src: ['<%= yeoman.app %>/index.html'],
170         ignorePath:  /\.\.\//
171       }
172     },

// Automatically inject Bower components into the app
164     wiredep: {
165       options: {
166         //cwd: '<%= yeoman.app %>'
167       },
168       app: {
169         src: ['<%= yeoman.app %>/index.html'],
170         ignorePath:  /\.\.\//
171       }
172     },

当再次运行 grunt serve 时，应用程序成功启动。

停止服务器

请按Ctrl + C停止。

文件监控

当您使用文本编辑器更改并保存文件时，即使您不进行任何操作，浏览器也会自动强制刷新。
这被称为实时重新加载，并在Gruntfile.js的Grunt任务中进行了设置。

第六步开始编写AngularJS应用程序

这个部分的所有步骤假设您正在编辑位于app文件夹内的文件。

创建一个新的模板来显示待办事项列表

请查看官方网站，代码已省略。

将位于views/main.html文件中的

标签的”class”属性值从”jumbotron”更改为”container”。

scripts/controllers/main.js
将\$scope.awesomeThings更改为\$scope.todos数组。

修改源代码以在HTML的input字段中输出todo项目。

双方向データバインディングを作成するAngularディレクティブ

新增待办事项

在”views/main.html”中，在

和

之间添加一个表单。

脚本/控制器/main.js
实现addTodo()函数，并将其与ng-submit绑定在一起。

现在可以添加任务了。
但是如果添加空的待办事项，会出错停下来。

删除待办事项

在views/main.html中：

添加一个删除按钮。
将类名从”form-group”改为”input-group”。

在 main.js 的 scripts/controllers 文件中添加 removeTodo() 函数，并将其与 ng-click 绑定。

步骤七：使用Bower进行软件包的安装。

将要排序的列表添加进去，并使其可排序。
在Bower中安装AngularUI Sortable模块和AngularJS指令组件。

当前的包装清单

在myTodo项目中执行以下操作。

$ bower list

查找包裹

搜索 angular-ui-sortable 是否可用。

$ bower search angular-ui-sortable

安装软件包

使用bower安装”angular-ui-sortable”和”jquery-ui”。

$ bower install --save angular-ui-sortable
$ bower install --save jquery-ui

又或者

$ bower install --save angular-ui-sortable jquery-ui

如果添加了–save选项，将会更新bower.json文件中”angular-ui-sortable”和”jquery-ui”的依赖关系。

确认安装

确认”bower_components”文件夹中包含”angular-ui-sortable”和”jquery-ui”两个文件。

使todo可以进行排序

需要将新安装的依赖引用添加到index.html文件中。
虽然可以手动操作，但Yeoman可以自动完成！

按下Ctrl + C来终止命令行进程，然后再次运行grunt serve。

可以在index.html文件的底部的script部分找到”jquery-ui/ui/jquery-ui.js”和”angular-ui-sortable/sortable.js”的追加。

为了使用Sortable模块，需要更新scripts/app.js文件中的Angular模块定义。

添加 ui.sortable。

在 views/main.html 中添加 ui-sortable 指令的 div 元素。

第八步
第8个步骤

在Karma和Jasmine中的测试

Karma是一个不受框架限制的JavaScript测试运行器。
Angular生成器包含了ngScenario和Jasmine两种测试框架。

当我首次运行Angular时，项目根目录下创建了test文件夹，并生成了karma.conf.js文件，同时也导入了Karma的Node模块。

运行单元测试

使用Ctrl+C来停止Grunt服务器。
为了进行测试运行，Grunt任务已经在Gruntfile.js中进行了脚手架编写。

当运行grunt test时，Yeoman控制台会出现一些警告。
不要担心，这是预期的行为，因为现在有两个原因导致失败。

更新Karma的設定

为了加载在Step 7中安装的新的Bower组件，更新Karma的设置。

files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-cookies/angular-cookies.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-route/angular-route.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-touch/angular-touch.js',
  'bower_components/jquery/dist/jquery.js',
  'bower_components/jquery-ui/jquery-ui.js',
  'bower_components/angular-ui-sortable/sortable.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

更新单体测试

打開 test/spec/controllers/main.js 文件。
這是 Angular 的 MainController 單元測試。

测试/规范/控制器/main.js
因为awesomeThings仍然保持不变，所以需要进行修正。

scripts/controllers/main.js
删除$scope.todos的三个元素。

当重新运行 grunt test 时，测试将会通过。

请增加更多的单元测试。

测试/规范/控制器/main.js
添加测试

预计重新运行grunt test时，测试会通过4个。

第九步：为产品版做准备

为了产品版本的文件优化

为了制作应用程序的产品版本，我们需要做以下事情：

一般的にアプリをほんとにleanの状態にする

惊人的是，只需执行以下命令即可全部完成。

$ grunt

在项目的根目录下的dist文件夹中，放置了可供使用的产品预备版应用程序。

制品准备版本的构建和预览

如果想在本地预览产品应用程序，只需运行其他简单的grunt命令。

$ grunt serve:dist

编译项目，并在本地服务器上启动。

步骤10：使用本地存储实现todo的持久化

当浏览器刷新时，重新审视项目未永久保存的问题。

安装Bower软件包

使用名为”angular-local-storage”的Angular模块，可以轻松地实现本地存储。

$ bower install --save angular-local-storage

添加本地存储

使用Ctrl+C停止当前命令行进程，再次执行grunt serve。
在index.html的（部分）底部添加了angular-local-storage。

将LocalStorageModule添加到scripts/app.js。

在app.js中，我们将设置本地存储服务提供者，以使用以”ls”为前缀的本地存储名称，以避免从使用相同变量名称的其他应用程序错误地加载todo。

为了声明对本地存储服务的依赖关系，需要更新控制器（main.js）。
在回调函数中，将本地存储服务的第二个参数添加进去。

我不想从静态数组中读取todo，而是想从本地存储读取值。并且我想将值存储在本地存储中，而不是在$scope.todos中。

为了监视\$scope.todos的变化，我们可以使用Angular的\$watch监听器。
如果有人添加或删除了todo，\$watch监听器将保持本地存储的todo数据存储同步。

删除当前的$scope.todos声明，并进行重写。

浏览器刷新后值得以持续保留。

选择Chrome开发者工具的资源面板，并从左侧选择本地存储，您可以确认数据是否持久化存储在本地存储中。

首先 or 首先要说明

环境

让我们搭建一个网络应用程序

遇见叶曼

第一步：搭建开发环境

安装先决条件

安装Yeoman工具集。

确认安装

步骤2：安装Yeoman生成器

安装AngularJS生成器

第三步：使用生成器来搭建脚手架。

创建项目文件夹

从Yeoman菜单访问生成器。

发电机的设置

步骤4：对由Yeoman生成的应用进行评估。

步骤5：使用浏览器预览应用程序

服务器开始

停止服务器

文件监控

第六步开始编写AngularJS应用程序

创建一个新的模板来显示待办事项列表

新增待办事项

和

删除待办事项

步骤七：使用Bower进行软件包的安装。

当前的包装清单

查找包裹

安装软件包

确认安装

使todo可以进行排序

第八步 第8个步骤

在Karma和Jasmine中的测试

运行单元测试

更新Karma的設定

更新单体测试

请增加更多的单元测试。

第九步：为产品版做准备

为了产品版本的文件优化

制品准备版本的构建和预览

步骤10：使用本地存储实现todo的持久化

安装Bower软件包

添加本地存储

首先
or
首先要说明

第八步
第8个步骤