Build large applications from zero using AngularJS

• 0. Introduction
• 1. Preparatory work
• 2. Build a framework
• 3. Enrich your Directives
• 4. Public services
• 5. Organize business with controllers

Introduction

An overview of the various Angularjs tutorials on the line, most of them are based on some skill analysis.
If you have already been able to run your ng-app, but can not find the actual case for reference. Then this article should be of some help to you.
This article will take the e-commerce products: the friendly speed of the store backstage as a practical case, bare Ben shows how to build from the zero "self-angularjs" application.
The application is based on the Angularjs 1.2.24 version.

Preparatory work

1. We used a directory structure with type precedence.
├──js
│├──app.js
│├──directives.js
│├──services.js
│├──controllers
││├──basecontroller.js//Controller base class
││├──customer.js//Customer Management
││├──product.js//Commodity Management
││├──order.js//Order Management
││├──domain.js//Domain management
││├──payment.js//Collection method
││└── ...//Various controllers
│├──directives
││├──ysbtn.js//button assembly
││├──yscalendar.js//Calendar components
││├──ysimgeditor.js//Picture editor
││├──yspopwindow.js//Modal pop-up module
││└── ...//Various other components
│└──services
││├──graphic.js//Image File Processing service
││├──popup.js//Bomb service
││├──uri.js//Uri-related Operations Service (AJAX operations such as $http are encapsulated here)
││└── ...//Various other service
│├──config
││├──navigation.js//Main navigation configuration
││├──route.js//Routing configuration
││├──routeprovider.js//Configuration $routeprovider
││├──onrootscope.js//Configure $onrootscope method for $rootscope
││├──scedelegate.js//Configuration $scedelegateprovider
││├──uri.js//Backend Service API configuration
││└── ...//various other Config
├──lib
│├──bower_components
││├──angular
│││├──angular.min.js
│││└── ...
││├──angular-route
││├──angular-sanitize
││├──angular-route
││└──///other Bower managed Lib
│├──uri.min.js
│├──class.js
│└──.//Other manually managed Lib
├──img
├──css
└──html//controllers corresponding to the views of the template

2. Use less as a pre-processor for CSS.
3, the use of Bower management-dependent JS library.
4, use grunt as the Project packaging tool.
5. Use Fiddler4 as the HTTP request debugging tool.
6. In order to be able to use the huge jquery plugin library, we have also introduced jquery.
7, controllers, directives, services and other parts of the design reference from: http://trochette.github.io/Angular-Design-Patterns-Best-Practices/

Prepared for a half-day, visit the following index page, angular application is time to run up.

A practical case always looks more complicated than the tutorial. Below is the overview of the friendly quick-start shop backstage after the project starts.

What the? Isn't it a good deal to build from scratch? Why did you run?
Well, please use the preview above as a design draft. Let's start building the framework.

Building a framework

According to the design, the page is divided from the structure

Top <div class= ' Fw-topbar ' ng-controller= ' Topbarcontroller ' ></div>
Navigation <ys-navigation ng-controller= ' ysnavigationcontroller ' ng-show= ' Initdone ' ></ys-navigation>
Content <div class= ' fw-main-content ' id= ' main_cnt ' ng-view= ' ></div>
The navigation's Click changes the browser's current URL, and the content area renders the contents of the corresponding module.

Configure ANGULARJS below to achieve the above target.
In Js/app.js configuration Yeeshopmanager This module, and its reference to the global variable yeeshopmanagermodule, so that it is easy to continue to configure it later.

To facilitate the management of numerous directives and services. We created a separate
Js/directives.js collection of all directives module-yeeshopmanager.directives

Js/services.js collection of module-yeeshopmanager.services for all services

Next, configure the application to invoke the corresponding controller and template for requests of different paths
Define the rules first in the Config/route.js

Configure the $routeProvider in Config/routeprovider.js

When we use the #/guide path to access the Novice guide page of the friendly speed store backstage,

Ngroute will render the corresponding template guide.html for the node with Ng-view on the index file and run the corresponding Guidecontroller.

Relationship of the controller to the three regions of the structure Division
Top-Topbarcontroller
Nav-Ysnavigationcontroller
Content-Ngroute dynamically loads the contents of the corresponding module based on the current URL and configuration.
At this point, the overall structure has been completed.

The $scope created by each controller works well independently, but sometimes communication is required between $scope. At this point, we need to configure a method for $rootscope to do the work.

Configure the $rootScope in Config/onrootscope.js

Use $provide's Decorator method to inject a $onRootScope method when registering with $rootscope.

The $scope call that needs to be notified $onRootScope to listen for event ' notification ',
Notification of controllers, directives, or services requires only the $rootScope service to be injected. can be very convenient for the notification.

Friendly speed as a SaaS product, support businesses to bind their own domain name, so that users better remember your domain name and brand.

Angularjs built applications that need to deploy static resources on a CDN to ensure fast and smooth user access.
So, if I bind the http://myshop.com/, the store backstage address will be http://myshop.com/admin,
At this point the address of the CDN static resource will be shaped like http://cdn.com/js/app.js.
When the host http://myshop.com/of the application and the host http://cdn.com/of the referencing resource are inconsistent,
Angular will tell you Error: [$SCE: Insecurl], the resource failed to load due to security policy.

Configures the resource whitelist $scedelegateprovider.resourceurlwhitelist, which allows angular to request resources for the specified URL across domains.

At this point, we have finished configuring the Yeeshopmanagermodule.

Enrich your directives.

The framework is built, with reference to the design in the second section, and then we need to add a variety of UI components to the system. Benchmarking, buttons, drop-down menus, pop-up windows. According to Angularjs founder Misko Hevery design of the original intention:
The build UI should be declarative. ”
So, we also design our own rules to declare the UI components:

Icons <ys-ico></ys-ico>
Button <ys-btn></ys-btn>
Drop-down menu <ys-dropdown></ys-dropdown>
Pop-up window <ys-popupwindow></ys-popupwindow>
......

Having completed the above thought (yin), we proceed to declare the icon component.

When the declaration is complete, we make a call inside the template.

<ys-ico type= "Trade" ></ys-ico>

After the compilation of Angularjs, the output node and the actual effect.

For this generic custom label <ys-ico>, we are accustomed to calling him "components". In Angularjs, it is called a directive. Definitions in official documents please cross the hill though it is white

Use a powerful directive. We can abstract all the components that need to be reused in the system, or even a reusable behavior. When you need to use it, you just need to declare it.
For example, a rotated icon:

<ys-ico keeprotating type= "trade" ></ys-ico>

Directive of early planning of the friendly quick-ride project

Added Watermark editor as required directive

Convenient for merchants to edit pictures, add Image editor directive

At this point, the front-end engineer's question came: "How many directives?" ”

A: Throughout the life cycle of the project, all directive cannot be designed and built at the outset. As you progress through the project, add or modify as needed, enrich your directive, and continuously improve the efficiency of your view building.

Follow the experience of building and invoking directive above. In the actual project, we need 10 ico in the module, then we call the <ys-ico> tag 10 times in its template.

Then the front-end engineer's question came again: "If the module interaction needs to pop the window, I have to calculate the number of good first?" Then all are declared in the module first, and use ng-show= "false" all hide? ”

Don ' t worry. Don't be thinking-in-angularjs to limit your thinking. Change a pose thinking in jquery.
When we need a pop-up window, as always, it is in your page schema preset location (such as the bottom of the page), insert the DOM structure of the pop-up window.
Yes, the window is still this way, the difference is. We inserted the directive of the pop-up window.
Similar to the following (simplified code not tested, just for example):

$ (' body '). Append ($compile (' <ys-popwindow data= "Popupmodaldata" >#{content}</ys-popwindow> ") ($scope)) ;

We solved this problem by dynamically inserting directive. But I can't always write the pop-up DOM insert for each module.
At this time, we need service.

The public services

Various services provide a unified API interface call, image processing, elastic layer processing, utility tools, etc. for the friendly fast-ride shop backstage.
Through the above directory, we can see the Services folder, there is a definition of $popup popup.js.
(Simplified code not tested, just for example)

After injection into the module you need, happy call it!

$Popup. Modal ({text: ' Popup title '});

Organizing Business with controllers

Everything is ready to start the heap business code!

Bare Ben Show to this end ~ crossing, if there is any mistakes ~ please correct ~

Ext.: http://ruby-china.org/topics/24111

Build large applications from zero using AngularJS