Study Note-angularjs (i)

Recently, ANGULARJS has generated a strong interest in learning, so he collected all the information, began to learn, but also want to record the learning process.

Before you start your study, you need to have a general understanding of Angularjs:

Angularjs[1] was born in 2009 and was created by Misko Hevery, who was later acquired by Google. is a good front-end JS framework, has been used in several Google products. Angularjs has many features, the core of which is MVVM, modularity, automated bidirectional data binding, semantic tagging, dependency injection, and more.

Angularjs uses a different approach, and it tries to make up for the drawbacks of HTML itself in building applications. Angularjs allows the browser to recognize the new syntax by using the structure we call Identifiers (directives). For example: Use double curly braces {{}}} syntax for data binding, use DOM control structure to iterate or hide dom fragments, support validation of forms and forms, associate logical code to related DOM elements, and make HTML components reusable. The main consideration for ANGULARJS is to build crud applications that are not suitable for games, graphical interface editors, which are very frequent and complex DOM operations. Do not write Hello World program example, directly first show a project directory, so that a project to build only the thought, not to start, think Angular.js official to the PHONECAT project is worth learning, JS file directory mainly such as: JS file directory: one, App.js the configuration file of the project, the configuration of the route, the dependencies of the module can be written here. Demo

var Phonecatapp = angular.module (' Phonecatapp ', [  ' Ngroute ',  ' phonecatanimations ',  ' Phonecatcontrollers ',  ' phonecatfilters ',  ' phonecatservices ', ' phonecatdirectives ']);  Route Phonecatapp.config ([' $routeProvider ', function ($routeProvider) {$routeProvider. When ('/phones ', {templateurl: ') Partials/phone-list.html ',//The relative path of the template controller: ' Phonelistctrl '//controller name used}). When ('/phones/:p Honeid ', {templateurl: ' Partials/phone-detail.html ', controller: ' Phonedetailctrl '}). Otherwise ({redirectto: '/phones '});}]);

Use Angular.moudle ('Phonecatapp‘,[...]) For modularity,Phonecatapp is the value of Ng-app, Ng-app refers to the command from the HTML tag to start, the entire control to Angular.js to manage, [... ] is the dependence on the module, in layman's words, such as [] inside of the ' phonecatcontrollers ', then in Controller.js (after the talk) can directly

var phonecatcontrollers = angular.module (' Phonecatcontrollers ', []); The ' phonecatcontrollers ' here in App.js has a module dependency, so here's how to write Phonecatcontrollers.controller ("controller name", function ($scope) {...})

That's the way it used to be,var Phonecatapp = Angular.moudle ("Phonecatapp", []), then Phonecatapp.controller ("controller name", function () {...}), so that we command, service , filters need to be written in the same JS file. Of course, there can be no mistake, but all JS code written in the same JS file, too bloated, management is also difficult! The setting of the route is also written here, the knowledge of the route is later detailed, here is just the directory of the entire project. Second, the controller file of the Controller.js project, all controllers are written here. Demo

var phonecatcontrollers = angular.module (' Phonecatcontrollers ', []); Phonecatcontrollers.controller ("Controller name", [' $scope ', ' $http ', function ($scope, $http) {...}]);

Services.js Project Service file, according to the ANGUALR dependency injection mechanism, can write their own services, and then write the controller code, such as: Phonecatcontrollers.controller ("controller name", [' $scope ', ' MyService ', function ($scope, MyService) {...}]);MyService is a custom service that can be injected to invoke the same business in different controllers (introducing $http and so on to get the data asynchronously, because the source of different controller operations is the same, so it can be encapsulated as a service for invocation) and can be encapsulated using custom services. For different controller injection calls, try not to use $ naming to avoid conflicting errors 。 Demo

var phonecatservices = angular.module (' phonecatservices ', [...]); As mentioned above, [...] ] is dependent on phonecatservices.factory (' Phone ', function () {return [' 1882345555 ', ' 123453222 '];});

Write the service JS, respectively, there are factory, provider, service methods, where the use of factory, so that in the Controller.js write controller, you can inject use, the above has elaborated.

Iv. filters.js Project filter file, have seen probably looked at some of the angular.js built-in filters (such as date, curreny, etc., because it is a beginner, all just about to see a bit, will continue to learn in depth), it is often not enough to use, Often we need to customize some filters ourselves so that we can introduce them in our template file (. html), such as <input ng-model= ' xxx ' type= "text"Onlynum/> or <span>{{xxxx |Touuper}}</span>,onlynum (limit only numbers), Touuper (converted to uppercase letters) are our custom filters. Demo

var phonecatfilter = angular.module (' Phonecatfilters ', []); As mentioned above, [...] ] is dependent on phonecatfilter.filter (' Touuper ', function () {   return function (input) {       return input.touppercase ();   };});

v. Directives.js project Directive file, which is written here is the project, our own custom label, the formulation of the label can be introduced into the template file inside the use, its representative meaning, We define in the Directives.js, this is also angualr.js more features, the original HTML tag is very rich, but such a custom label can make HTMLDOM structure more customizable words, ng-* is instructions, you can open the source to see, They will be compiled with our familiar attributes, HTML tags, and instructions have four forms AEMC, namely attrs, element, annotation, Class,demo:

Angular.module (' phonecatdirectives ', []). Directive ("Hello", function () {return {scope: {},//Whether it has a separate scope restrict: ' AEMC ',   //definition type template: ' <div>hi everyone!</div> ',  //Template Replace:true//  whether to replace the original node link:function ( Scope,element,attrs,[controller]) {//define the behavior of the instruction, if not required, do not need to introduce}compile:function () {//compile instruction when the function}templateurl: ""  //template path }});

Summary: Here is mainly about, a ANGUALR project basic directory, convenient to create a project, will not say no ideas, here the JS file mainly have, App.js, Controllers.js, Services.js, Filters.js, Directives.js, respectively, is the basic configuration, controller, service, filter, instructions, in conjunction with the template (. html) to implement the design of the MVC pattern, then each block will continue to learn, continue to drill down, and then record, here first of the directory. This is indeed a very promising technology, will study well!

Learning Note-angularjs (i)