Angular Project Build Guide-no longer hesitant to build angular

Original source: https://my.oschina.net/blogshi/blog/280400

Absrtact: Voluminous wrote a lot of the recent construction projects of some experience, for the construction of angular project is really not in harmony with the previous front-end framework, so it is hereby recorded to share to everyone, and hope to be helpful.

Objective

Contact Angular also has a small half month, although not hard to toss, but is so-called "no Zuo No Die". Learn a new thing, not a good toss and feel sorry for the motherland, the least people ... It seems to be far away, to write the preface. Why write this Build guide? The biggest reason is to give a reference to the students who are looking for this information, struggling with all kinds of statements, and I also recorded their experience, the best of both worlds.

Body

If you don't know what angular is or haven't heard at all, then what I'm going to say is no good for you, but if you're planning on coming in contact with angular or simply going up and down, it's a bit of a good idea to read.

The biggest difference between the angular and the rest of the front-end frame before it is that its core is no longer the DOM, but the data, which is the model. Whether it's simple jquery or MVC's backbone, they're essentially still making it easier for us to manipulate the DOM in a more organized way. But angular is not. Through a series of magic tricks, it shifts everything to the data. To develop the web in a way that develops applications rather than manipulating nodes, everything is data-centric, and data changes drive everything, including behavior.

Text topic, how to build a angular project?

Frankly, when I first started building a project, it was small but tangled. I'm a bit of a perfectionist, so I want to be perfect at first. Because I've heard a lot of previous experience, saying that if the framework is not well-built, It was a nightmare to wait until later, whether it was refactoring or maintenance. So start with a sense of caution and hope that the project will be as strong as possible and beneficial to maintenance and development.

One of the first problems encountered at the beginning of the construction is whether or not to introduce Requirejs or SEAJS-dependent management tools?

I do not have a lot of language or technology on the plot, for the great God also do not have much to worship the vision (more is I do not know who is the great God, also never looked for). So for me, whether it's Requirejs amd or Seajs cmd, The same work is done from the perspective of implementation. I also read a lot of people on the Internet when considering the need for a angular application. I summed up a sentence is that the basic and did not say the same, that is, with no casual, to see the situation.

So I can have a good answer, in fact, I now answer is: "Can not." How to say can not do, if you do not Requirejs can also meet the project development and various needs, then do not use. Angular's own module has been injected, So we don't have to use Requirejs for asynchronous loading, and it's good to go.

Of course, if you find that there are some places you need in the development process, you can add them. In this article I will elaborate on how these two approaches are built. But here my point has been: don't use it if you don't need it.

(1) without requirejs directly build angular

Angular is built directly without using requirejs because angular can do that for dependent management and angular usage scenarios. First of all, angular's dependency injection is a good thing, Do not know the students can go to search the information. I'm simply saying that when I need a module, I don't have to worry about where it is and what it is. I just have to know its name and then tell angular, as to how to pass the object over, how to find it, Angular will take care of himself.

Angular.module (' myApp ', [
' Ngroute ',
]);

For example here Ngroute, I need to know how the Ngroute, where. As long as there is a module defined as Ngroute I can use it directly.

Given that angular is so powerful, the rest is a good thing. We just need to divide the file into module from both functional and business, and then reference all the library files on the page through the script tag. Then all the business files are also written by ourselves JS merged into a all.js loaded onto the page.

The document is divided into the following angular official recommendations:

|--js
|--app.js//App launch file for app configuration
|--controllers.js//controllers that's the store of our own business File
|--directives.js//instruction file (instruction can be shared)
|--fliters.js//filter file (filter can be shared)
|--serv Ices.js//service file (can be shared, typically a service interacting with the server)
|--partials
|--html1.html
|--html2.html
|--index.ht ml

App.js

' Use strict ';


Declare app level module which depends on filters, and services
angular.module (' myApp ', [
' Ngroute ',
' m Yapp.filters ',
' myapp.services ',
' myapp.directives ',
' myapp.controllers '
]).
Config ([' $routeProvider ', function ($routeProvider) {
$routeProvider. When ('/view1 ', {templateurl: ' partials/  Partial1.html ', controller: ' MYCTRL1 '});
$routeProvider. When ('/view2 ', {templateurl: ' partials/partial2.html ', controller: ' MyCtrl2 '});
$routeProvider. Otherwise ({redirectto: '/view1 ');
}]);

Controllers.js

' Use strict ';

/* Controllers */

angular.module (' myapp.controllers ', [])
. Controller (' MyCtrl1 ', [' $scope ', function ($scope {

}])
. Controller (' MyCtrl2 ', [' $scope ', function ($scope) {

}]);

Directives.js

' Use strict ';

/* directives *


/Angular.module (' myapp.directives ', []).
directive (' appversion ', [' Version ', function (version) {
return function (scope, elm, attrs) {
Elm.text (v    ersion);
};
}]);

Filters.js

' Use strict ';

/* Filters *

/angular.module (' myapp.filters ', []).
Filter (' interpolate ', [' Version ', function (version) {
return function (text) {
return String (text). Replac    E (/\%VERSION\%/MG, VERSION);
};
}]);

Services.js

' Use strict ';

/* Services *//Demonstrate how to


register Services//In the case
it's a simple value service.
Angular.module (' myapp.services ', []).
Value (' Version ', ' 0.1 ');

Index.html

<! Doctype html> <!--[if lt ie 7]>       

So without using Requirejs, the project is built. There are a few additional points that you can continue to split the controllers into multiple controller modules, This can be done entirely according to your business. For example, the user directory Usercontroller and so on. Then we merge all of these files that we wrote by Grunt or gulp into a single total file all.js so that in addition to the library file in the page as long as this file is ok. Angular's The benefit of module is that this merging of files does not care about the order of JS merging, because it is injected through angular dependency.

(2) Build with Requirejs

The construction of this approach may be clearer for some people, the same structure as the above, a man.js used to configure Requirejs, Separate the routes.js and a controller folder through the Requirejs to split the controller, and asynchronously load it on demand.

Index.html

<!doctype html>