Write an Angular app with speedy Angular generator

How did dev Angular doctors start? I had to:

1. Angular download
2. Add index.html
3. Create app.js file , add index.html
4. angular.module ('myApp', ['bla', 'balo']);
5. Download more packages , then inject
6. Create file controller , view , service , filter and so on

So many ha, so I still do so until one day, I work together as a project, PM set up the angular generator and hand it to the team dev. I was stupid to open the bower.json file to Google search each one and then add index.html . It was only after being asked to teach, how could it be. After knowing the Angular genarator, the job is significantly faster, without having to search for packages and add more.

So, I wrote this article to guide Angular generator users to dev Angular quickly – (feeling like Flash)

Introduce

Yeoman.io

What's Yeoman?

Yeoman helps you to kickstart new projects, prescribing the best practices and tools to help you stay productive.

Http://yeoman.io homepage

This is a tool that helps dev can find on the "genarator" to use for his project or if there is a leader, he can write generator to share for the community to get fame points. The reason why I introduced this guy, is talking about the Angular generator . In fact, this guy is the guy of the many generators, Angular generator that I mentioned above is just a grandchild. If you want to use the Angular generator , you must have a yeoman in the machine.

Yeoman installation

Accomplished! So there is Yeoman.

AngularJS generator

The main character is here. Ten.

Github https://github.com/yeoman/generator-angular

Just install it

So there is an Angular generator in the machine. War time.

Using

Begin

Open CMDER and fight.

Create a folder for the project and then move to the folder

Generate angular out.

He will ask you some options. Move up and down and press Space to select / deselect and then Enter to go to the next step.

Okey is done, fast. Now run the test

It will automatically open the browser to access the local address that is running the angular app that you are devging. Not yet.

Interface when testing

And yet, Angular generator also supports you to create controller file , view , service , … and then add it to index.html too . Your job is code on the generated files.

Create route

Generate the controller file , view , and config route to connect to the newly created wins.

Create controller

The following command will create a flash controller

Directive

Filter

View

Service

Also if the code is in CoffeeScript or TypeScript

Add –coffee or –typescript at the end of the command.

For example.

The most important command

This command will build the project where the product components. That is, it will collect all, minimize code, optimize it for the most compact. When you run the above command, all of your product code is in the dist folder .

Install additional packages.

By default Angular generator uses Bower and NPM .

NPM can completely replace the bower but I recommend that you use bower . NPM is for nodejs (server side) and bower for client side. Maybe .

For example, if you want to install Package loading bar like the previous one, I recommend it .

1. Go to Github of Package and say https://github.com/chieffancypants/angular-loading-bar
2. See there line it only for installation bower install angular-loading-bar
3. Copy put in cmder, ENTERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

Finished, so have a delicious, self-included package on index.html for you guys. Your task is to inject into angular in app.js file only.

Bower contains countless packages for you to research, explore, see which one is more and more, make sure after a while your app is like … fair

End

With the society becoming more progressive and civilized, the code also becomes easier, supporting the teeth for the doctors. Your job is to upload it to Stackoverflow copy and finish. Ez life.

The fastest way to code is to distort the code at all!

ITZone via cuthanh