文章目录

1. 1. Protractor
2. 2. Guildlines and Best Practices
1. 2.1. Starting Point

Protractor

We need to write end-to-end tests, which open the browser, navigate to a live running version of our web application, and click around using the application as a real-world user would. To accomplish this, we use Protractor.

TODO

Guildlines and Best Practices

Directory Structure

• app The app folder houses all the JavaScript code that you develop. We’ll talk about this in more detail next.
• tests Houses all your unit tests and possibly the end-to-end scenario tests as well. data Any
• data that is common but not dynamic in your application can be stored here.
• scripts Build scripts and other common utility scripts can be stored in this folder.
• Other files The package.json, bower.json, and other files that don’t really need a directory can be in the main folder.

— app.css
— app.js
— index.html
— components // Reusable common components
  — datepicker
    — datepicker-directive.js
    — datepicker-directive_test.js
  — authorization
    — authorization.js
    — authorization-service.js
    — authorization-service_test.js
  — ui-widgets
    — ui-widgets.js
    — grid
      — grid.html
      — grid-directive.js
      — grid-directive_test.js
    — dialog
      — dialog-service.js
      — dialog-service_test.js
    — list
      — list.html
      — list.css
      — list-controller.js
      — list-controller_test.js
    — login
      — login.html
      — login-controller.js
    — search
      — search.html
      — search.css
      — search-controller.js
      — search-controller_test.js
    — detail
      — detail.html
      — detail-controller.js
      — detail-controller_test.js
    — admin
      — create
        — create.html
        — create-controller.js
        — create-controller_test.js
      — update
        — update.html
— vendors // third-party dependencies go here
  — underscore
  — jquery
  — bootstrap
— e2e // end-to-end scenario tests
  — runner.html
  — login_scenario.js
  — list_scenario.js
  — search_scenario.js
  — detail_scenario.js
  — admin
    — admin_create_scenario.js
    — admin_update_scenario.js

Starting Point

• Yeoman, Yeoman is a workflow management tool that automates a lot of the routine, chore-like tasks that are necessary in any project.
• Angular seed projects, ng-boilerplate and angular-seed
• Mean.io

A grunt task that is available for online use is ng-templates, which allows you to preload all the HTML templates that you use in your application instead of making an XHR request for them when it is needed.

But if you have a large number of templates, you can consider preloading the most common templates and views in your application, and let the others load asynchronously as needed.

General

• Prefer small files to large files.
• Use the AngularJS version of setTimeout, which is the $timeout service, and the AngularJS version of setInterval, which is the $interval service.
• If it adds $timeout or $interval, should remember to clean it up or cancel it when it is destroyed, to prevent it from unnecessarily executing in the background.
• If you are adding listeners outside of AngularJS, ensure that it is cleaned up correctly.
• Let the services and controllers take care of specific error handling only.
• Controllers can $broadcast or $emit events on their own scope, or inject the $rootScope and fire events on $rootScope.

Batarang, a Chrome extension to help debug and work with AngularJS projects

Optional Modules: ngCookies ngSanitieze ngResource ngTouch ngAnimate