Your first ANGULARJS application-Tutorial II: Scaffolding, building and testing tools

Introduced
There are a lot of tools available to help you develop ANGULARJS applications, and those very complex frameworks are not covered in my discussion, which is why I started this series of tutorials.
In the first part, we have mastered the basic structure of the ANGULARJS framework and developed the first application. This blog post is for those beginners to write. If you are an experienced ANGULARJS developer, you may be more interested in the disclosure instructions or the use of Angularjs in a start-up company.
In this section, we will put the logic layer of the application aside and learn how to organize the correct ANGULARJS project. Includes: Scaffolding, dependency management, readiness testing (including unit testing and end-to-end testing). The tools we use to develop Angularjs are: Yeoman, Grunt, and Bower. Below we will look at the process of writing code and testing with Karma.

3Karma, Jasmine, Grunt, Bower, Yeoman ... What are these tools?

If you use JavaScript to work, there is a great possibility that you already know some of their tools, even if you are just touching angular. But to ensure a common benchmark, I will not use any assumptions. Let's briefly review these techniques and their uses.

-Karma (previously named Testacular) is Google's JavaScript tester, so it is also a natural choice for testing angular. It also allows you to run your tests in a real browser (including a phone/tablet browser), which also supports testing irrelevant frameworks. This means that you can use it in conjunction with other frameworks, such as Jasmine, Mocha, or Qunit.
-Jasmine is also a choice for our testing framework, at least here. If you've ever worked with it, you'll find that its syntax and rspec are very similar. If you don't have to worry about it, we'll explain it in detail in this tutorial.
-Grunt is a tester that can help us automate repetitive tasks such as compressing, compiling, testing, and building a simple ANGULARJS application.
-Bower is a package manager that can help you find and install the packages your application relies on, such as CSS frameworks, JavaScript libraries, and so on. It runs on git, much like rails, and avoids dependencies that require manual downloads and updates.
-Yeoman is a toolset that contains 3 core components: Grunt,bower, and scaffolding tools yo. Yo produces code template files with the help of generators (also scaffolding templates), and automatically configures grunt and bower for your project. You can find generators in almost any JavaScript framework (e.g. Angular,backbone,ember, etc.), but as we speak Angular now, we will use the Generator-angular project.

So, let's start from here.
Well, the first thing we need to do is install the tools we need
1. If you do not have git,node.js and NPM installed, install them first.
2. Then we will go to the command line and enter the following command to install the Yeomen tool.

npm install-g yo Grunt-cli Bower

Oh, don't forget, we'll use Angularjs generator. So you also need to install it.

NPM install-g Generator-angular

Okay, now we're ready.

Build our Angularjs Application
Last time, we manually copied our basic files from the Angular-seed project. This time, we'll use Yo (combined with generator-angular) to do this for us.
Now, all we need to do is create a file of our new project, browse and run

Yo angular

We will show some options, such as whether Bootstrap and compass are included, so let's say no to compass and say yes to bootstrap. Then, when prompted to include which module (resource, cookies, sanitize and route), we will only select

Angular-route.js

The basic files of our project should be created within a minute. Integrated with Karma and some preconfigured.
Tip: It's important to keep in mind that we want to limit the modules here.
When you are working on a project of your own, which modules you use will depend on yourself.
Now, as we are using Jasmine, let's add its adapter to our project

NPM Install Karma-jasmine--save-dev

In this example, we want the test to be executed in the browser. Let's add again

NPM Install Karma-chrome-launcher--save-dev

OK, if everything we do is correct, our project file structure should look like this:

Our application code should be in the app/directory. test/This directory is, of course, a test file. In the root directory we see those are the project configuration files. Every one of them has a lot to learn, but now we just stick to the default configuration. So let's run our project once and we can do it with the following command

Grunt serve

Look, our app should be jumping right in front of us now.

previous translation here:http://segmentfault.com/blog/news/1190000000347412

original link:http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing

Your first ANGULARJS application-Tutorial II: Scaffolding, building and testing tools