Why choose the installation of Yeoman and Yeoman

Today I'm going to introduce you to a relatively new network front-end development tool that I just contacted: Yeoman.

What is Yeoman?

Yeoman is a project developed by a team of Google and external contributors. Through the internal three tools (Yo,grunt,bower)

Work together to create an easy-to-use workflow for developers. It allows network front-end developers to quickly build a beautiful web application

applications).

The purpose of Yeoman is not only to build workflows for new projects, but also to address many of the serious problems faced by front-end development, such as zero

The relationship between the dependencies.

Yeoman mainly consists of three parts: Yo, Grunt, Bower. These three tools are independently developed separately, but need to be used together to

We are now working in an efficient workflow mode. Because Yeoman is actually a collection of three tools: YO, GRUNT, BOWER, so you need to first solve

Release the use of these three tools.

Yo:yeoman Core tools, Project engineering relies on directory and file generation tools, project production environment and compilation environment build tools

Bower:web developed the Package Manager, conceptually similar to NPM,NPM focused on Nodejs modules, while BOWER focused on CSS,

Management of JavaScript, images and other front-end related content. It is important to note that the Bower run relies on the version control tool git, from

GitHub Pull info since. As described in node. js, many of the front-end tools are written by node. JS, and Bower is not an example

Outside So if you want to install yeoman successfully, you need to install Git first.

GRUNT: The front-end build tool, jquery is packaged using this tool.


The following is a log of my actual installation of Yeoman as follows:

We are now using Yeoman to build a demo app, called My Todos, this app features add todo, delete todo, with drag

function to reorganize your TODO, as well as save Todos offline.



Let's take a look at the steps:

Step 1: Build the development environment
Step 2: Install Yeoman generator
Step 3: Build your app with generator
Step 4:yeoman Create the file directory structure at a glance
Step 5: Preview your app in the browser
Step 6: Start writing our AngularJS application
Step 7: Install the package with Bower (packages)
Step 8: Test with Karma and Jasmine
Step 9: Make todo consistent with local storage
Step 10: Prepare to release your app!

Let's get started!

Step 1: Build the development environment

Before installing Yeoman, you need the following:
1. NodeJS v0.10.x+
2. NPM v1.3.7+

The simplest way is to go to NodeJS website. Web site, Window System download. msi, mac system download. pkg, after installation all have.
Check whether it is installed (run->cmd into DOS window write command, here do not write like "$", the figure with $ is because of the use of Cygwin) (another: the figure in this article is Yeoman official website, some of my machine):



Installing the Yeoman Toolkit


Check to see if it's all installed:


When installed, the tool versions are displayed:


Step 2: Install Yeoman generator

Typing Yeoman interactive commands:



Use the up and down arrows to select the Install a generator

Here we install Angularjs generator


Step 3: Build your app with generator

Start by creating a project directory to store your app


At this point we have set up a folder in the C drive: Mytodo





We will default to all module, enter! Wait and see! Something magical is going to happen!
Yeoman automatically builds all the files your app needs!

Step 4:yeoman Create the file directory structure at a glance



This is the file directory I installed, which is the Yeoman online example.


I have two more folders than it. Git and. Temp, no matter, no less. When you first start loading, there is a bower_components folder in the App folder. In the online search, it should be git did not install the whole. Once you've installed Git, go back to the previous steps and you'll be fine. So, remember, install git first, then load Yeoman.

Step 5: Preview your app in the browser

At the command line, type "Grunt Serve", run a grunt task to create a node-based local HTTP server, localhost:9000 (some 127.0.0.1:9000)



Then the browser will appear your new app!




To be Continued ...
Pick UP:

If you want to stop the server, press CTRL + C

Let's edit the home file: main.html, which is under the View folder.
Open main.html with any of your favorite text editors, I'm using sublime text 2. Every time you change the save, you will find that the browser will automatically refresh, easy to do it? This is called "Live Load" (live reloading), which is really handy to see the results of your edits in real time.
This function is implemented by Gruntfile.js.

Step 6: Start writing our AngularJS application

Open the Views/main.html editor, and the code now looks like this:



If you want to copy code, see source code provenance: Yeoman

Open Scripts/controllers/main.js again and edit as follows:

' Use strict ';

Angular.module (' Mytodoapp ')
. Controller (' Mainctrl ', function ($scope) {
$scope. Todos = [' Item 1 ', ' Item 2 ', ' Item 3 '];
});

Save, our app now looks like this:


Add a TODO

Edit the main.html and edit it as follows:


Save, Browser update:


If you click "Add" now and nothing will happen, let's change it below.
To edit main.js, the code should now look like this:

' Use strict ';

Angular.module (' Mytodoapp ')
. Controller (' Mainctrl ', function ($scope) {
$scope. Todos = [' Item 1 ', ' Item 2 ', ' Item 3 '];
$scope. Addtodo = function () {
$scope. Todos.push ($scope. Todo);
$scope. Todo = ';
};
});

Save, write something in the browser's first form input box, click "Add", and it will appear in your todo list right away!

Note: If you enter blank content twice in a row, or enter the same content twice in a row, the app will automatically terminate!

Delete a Todo

To edit main.html, let's add a button after each input box, and the code becomes as follows:


Save! Look at your browser, wow, your app looks great!


Next we edit the Main.js, so that the deletion function is easy to use, the code is as follows:

' Use strict ';

Angular.module (' Mytodoapp ')
. Controller (' Mainctrl ', function ($scope) {
$scope. Todos = [' Item 1 ', ' Item 2 ', ' Item 3 '];
$scope. Addtodo = function () {
$scope. Todos.push ($scope. Todo);
$scope. Todo = ';
};
$scope. Removetodo = function (index) {
$scope. Todos.splice (index, 1);
};
});

Save! Back to the browser, now you can press X to delete the item, it's amazing!
You may notice that the changes we make are not saved, and whenever we refresh the page, we go back to the initial state, it's OK, we'll fix the problem in the nineth step, but we'll get to the next step to learn how to install the packages with Bower.

Step 7: Install the package with Bower (packages)。

Let's add the order, so that our list can sort or classify, to achieve this, we have to install Angularui sortable module with Bower, this is a command set of angular.

We can use the following command to see what packages we have installed.

bower list

你应该看到你已经装了angular-cookies, angular-resources, angular-route, 还有其它。




用以下命令来确认我们要找的包是否存在：

bower search angular-ui-sortable


Below we install it and install the jquery UI together
bower install --save angular-ui-sortable
bower install --save jquery-ui

The--save option helps you update Bower.jason, saving you the hassle of manually updating later.



or install it with a command line:
Bower Install--save angular-ui-sortable Jquery-ui

According to the operation of my machine, it is not necessary to write together now, I only use
bower install --save angular-ui-sortable
这一个命令就同时把jquery-ui也装上了，应该是bower改进了，省得我们麻烦了，呵呵^^

Confirm Installation

Let's take a look.bower_componentsfolder to ensure proper installation


These newly installed packages must be included in the index.html, you can manually fill the above two entries into the index.html, but yeoman will automatically fill you in. Use CTRL + C to stop the current command line, then restart the server, then run Grunt serve. You'll see that the script section is filled with jquery-ui/ui/jquery-ui.js and angular-ui-sortable/sortable.js.


At the same timeScripts/app.jsIn the file, addui.sortableCode, such as:


Finally, we should edit main.html, plus the corresponding code, the entire TODO List section code is as follows:


Back to the browser, now we can drag and drop the items randomly.



It's so cool! So simple to make such a great application? That's unbelievable!

Step 8: Test with Karma and Jasmine

Karma is a test executor of JavaScript (JavaScript Test Runner), and Jasmine is a test framework for angular. We have already run yo angular before, a folder called Test has been deployed in directory Mytodo, and has produced akarma.confFile and Karma needed node module, we can immediately use Jasmine to test, but we have to see how to run the test first.

Run unit Tests
In the Command window, enter CTRL + C to stop grunt server. Then enter grunt test, you will see the browser open and close, and there is a warning, but it's OK, let's fix it.

Open FileKarma.conf.jsand replace it with the following codefilesArray:
Files: [
' App/bower_components/jquery/jquery.js ',
' App/bower_components/jquery-ui/ui/jquery-ui.js ',
' App/bower_components/angular/angular.js ',
' App/bower_components/angular-ui-sortable/sortable.js ',
' App/bower_components/angular-mocks/angular-mocks.js ',
' App/bower_components/angular-local-storage/angular-local-storage.js ',
' App/scripts*.js ',
' Test/mock*.js ',
' Test/spec*.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 ',
' App/bower_components/angular-route/angular-route.js '
],

Open itTest/spec/controllers/main.js. Remove the following statement:

It (' should attach a list of awesomethings to the scope ', function () {
Expect (scope.awesomeThings.length). ToBe (3);
});
Replace with:
It (' should has no items to start ', function () {
Expect (scope.todos.length). ToBe (0);
});
Enter the command again:
Grunt Test

At this point, my machine is not as informative as the Yeoman Web tutorial, but rather a hint:

Warning: No provider for "framework:jasmine"! (Resolving: framework:jasmine)use--force to c

到google上search了一下，找到了觖决办法：

输入命令：

NPM Install Karma-jasmine--save-dev

Enter the command again:
Grunt Test

Also tip can not load Chrome, it's not registered

Workaround:
Use the following command to add Karma-chrome-launcher to the Package.json file
NPM Install Karma-chrome-launcher--save-dev

I still have a mistake on my machine, just skip it and follow the tutorials on the Yeoman website to continue:

Run grunt test again, this should pass



Add some more test below:

Your Mainctrl test script (test/spec/controllers/main.js) should look like this:

' Use strict ';

Describe (' Controller:mainctrl ', function () {

Load the controller ' s module
Beforeeach (module (' Mytodoapp '));

var Mainctrl,
Scope

Initialize the controller and a mock scope
Beforeeach (Inject (function ($controller, $rootScope) {
Scope = $rootScope. $new ();
Mainctrl = $controller (' Mainctrl ', {
$scope: Scope
});
}));

It (' should has no items to start ', function () {
Expect (scope.todos.length). ToBe (0);
});

It (' should add items to the list ', function () {
Scope.todo = ' Test 1 ';
Scope.addtodo ();
Expect (scope.todos.length). ToBe (1);
});

It (' should add items to the list ', function () {
Scope.todo = ' Test 1 ';
Scope.addtodo ();
Scope.removetodo (0);
Expect (scope.todos.length). ToBe (0);
});

});

Run Grunt test again:


You will see that three test items have been passed, great!
As your application grows larger and more developers join, unit testing makes it easy to find bugs. And Yeoman's auto-build function will help you.

Step 9: Make todo consistent with local storage

Installing the Bower Package
We need another angular module "Angular-local-storage", using the following command

bower install --save angular-local-storage



添加local storage
ctrl + C 退出当前命令，运行 grunt serve, 这时你会发现你的 index.html 文件底部已加了一句：

Edit the Mytodoapp application module (scripts/app.js) to include Localstoragemodule, and the final code is as follows:


Also to edit main.js, the code will end up as follows:


At this point you see your app in the browser like this:

Let's add a few items:
Now we refresh the browser, after adding a few items still exist, too good! Success!

Step 10: Prepare to release your app!

Let's do the pre-release optimization: Just run the command:
Grunt

Your ready-to-publish files are now in the Dist folder! You can use FTP to upload to your server for publishing.

Congratulations to you! Our demo app is finally finished!

Want to know more? Please refer to Yeoman website

Http://blog.sina.com.cn/s/blog_761dcfc60101dii0.html

Why choose the installation of Yeoman and Yeoman