The next Generation Web application development -01-yeoman based on Angular.js

Angularjs Personally think this is a very good framework! It frees us from the development of AJAX Applications! Well.... The crap says here, here we go!

　　

　　First we must understand some of the core concepts:

1. Client templates
2. Mvc
3. Data binding
4. Dependency Injection
5. Instructions

　　

Do not worry first, understand the meaning and meaning of these words, lofty high-rise building on the ground we slowly build a small application of our own.

　　

　　

• Identify our goals

First of all, we have to decide what we want to do. What do you do for a while? YOUKU Tudou like the video site, oh, please kill me, I just want to know this thing, eh! Then write a simple blog! You still kill me, because I am too lazy, so I do a login registration application good, ah, because login to register where all need, so I decided to write him a small framework based on angular!

• What we need to prepare

OK, so what do we need to prepare for the goal? The wrench! Oh, the hammer! Nails Ah! A lot of mess, the head has been dizzy!

Indeed in real life, if we want to do an application that requires at least a checklist to prepare something like this or that, this is really a headache, for me so lazy, you still kill me!

So I decided to look for a project builder, after Google for some time! Oh, YEOMAN appeared in my vision, this is completely for our front-end developers tailor-made Ah!

　　

• Understanding Configuration YEOMAN

Oh, I'm too lazy to type, so I decided to copy someone else's introduction.

　　　

Yeoman was developed by a team of Google and external contributors, with the goal of grunt (a command-line tool for developing task Automation) and Bower (a front-end resource for HTML, CSS, JavaScript, and graphics). Package Manager) To create an easy-to-use workflow for developers.

The purpose of Yeoman is not only to build workflows for new projects, but also to address the many serious problems faced by front-end development, such as fragmented dependencies. Yeoman has three main components: yo (scaffolding tool), Grunt (build tool), Bower (Package Manager). These three tools are independently developed separately, but need to be used together to achieve our efficient workflow patterns. The following image shows the collaborative relationship between the three of them. Characteristics of YomanLightning-like initialization: The project starts with a quick build of the project initialization based on the existing template framework (for example: HTML5 bolierplate, Twitter Bootstrap). Great build process: Not only JS, CSS code compression, merging, but also the picture and HTML files can be optimized, while the Coffescript and compass files compiled. Automatic compilation of Coffescript and Compass: The Livereload process can automatically compile changes to the source files and refresh the browser after completion. Automatic Lint code: The JS code is automatically jslint tested to ensure that the code conforms to the best programming practices. Built-in preview server: No longer need to configure the server itself, using the built-in can be quickly previewed. Amazing picture optimization: Optimize images by using optipng and Jpegtran to reduce download loss. Killer package management: With Bower search JQuery, you can quickly install and update related files, no longer need to open the browser to search for yourself. PHANTOMJS Unit Test: It is very convenient to use PHANTOMJS for unit testing, everything is ready at the beginning of the project Oh how Good (http://www.cnblogs.com/cocowool/archive/2013/03/09/ 2952003.html) Thank this Bo friend! Below I simply say how should install yeoman under Windows

Open Cmd.exe

2. installation Chocolatey NuGet
4. Install node. js and Ruby
   1. cinst ruby1.9(The "Ruby" package installs Ruby 2.0, which might don't work)
6. Restart Cmd.exe
8. gem install compass --pre(I don't think it's okay to pretend)
10. npm install -g yo grunt-cli bower  这个命令必须执行
12. Need to install git yourself.
14. Restart CMD run Yeoman
16. This English original is https://gist.github.com/jaromero/9964937 here, everyone can go to see Oh!

　　

Amount I also forgot that Windows users need to configure Yeoman environment variables Oh! Otherwise, the cmd command is not going to be found.

　　

Well! This is the way to eat today, and the next section we'll build the application skeleton.