ANGULARJS study notes--main html&template html&module&template JS, module, controller, bidirectional data binding, filter

Register the ' phonelist ' component on the ' Phonelist ' module,angular.  Module (' Phonelist ').  

Define the ' Phonecatapp ' moduleangular.module (' Phonecatapp ', [  //... which depends on the ' phonelist ' module  ' Phonelist ']);

By phonelist the dependency array when defining the Phonecatapp module, ANGULARJS will enable all registered entities Phonelist to use Phonecatapp.

Dependency Injection: A software design pattern that handles how components maintain their dependencies. The ANGULARJS syringe subsystem is responsible for creating components, resolving their dependencies, and making them available to other components on request.

Factory Method: The factory method registers the module by using the factory function when defining instructions, services, or filters. Recommended method for announcing a factory:

Angular.module (' MyModule ', []). Factory (' ServiceId ', [' Depservice ', function (Depservice) {  }]). directive (' Directivename ', [' Depservice ', function (Depservice) {  }]). Filter (' FilterName ', [' Depservice ', function ( Depservice) {  }]);

Module method: Specify the configuration and runtime of the module by invoking the Config and run methods

Controller

(1) Somemodule.controller (' Mycontroller ', [' $scope ', ' dep1 ', ' Dep2 ', function ($scope, DEP1,DEP2) {    $scope. Amethod = function () {    }}]) (2) <div ng-controller= "Mycontroller" >     <button ng-click= "SayHello ()" ></ Button> </div>  function Mycontroller ($scope, greeter) {     $scope. SayHello = function () {         Greeter.greet (' Hello World ');     

Main HTML files (index1.html), template templates HTML files (phone-list.template.html), module files (app.module.js), The relationship between the template HTML file and the corresponding JS file (phone-list.component.js):

Index1.html is used to view the interface effects, or to introduce defined components, phone-list.template.html define the interface and rendering of the template, App.module.js is used to define the module using Angularjs; phone-list.component.js The data model and component definition for the template HTML file, defining the component under the corresponding template.

index1.html file:

<! DOCTYPE html> 

Ps: Here you refer directly to the components defined in Phone-list.component.js, and do not forget the corresponding dependent files. The introduction of components is introduced by the Phone-list naming method.

phone-list.template.html Template file:

<div class= "Container-fluid" > <div class= "Row" > <div class= "col-md-2" > <!--Si Debar content--> <p> Search: <input ng-model= "$ctrl. Query"/> </                     P> <p> Sort by: <select ng-model= "$ctrl. Orderprop" > <option value= "name" >Alphabetical</option> <option value= "age" >newest</o ption> </select> </p> </div> <div class= "col-md-10"             ; <ul class= "Phones" > <li ng-repeat= "Phone in $ctrl. Phones |                     Filter: $ctrl. Query |orderby: $ctrl. Orderprop "> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> <p>{{phone.age}}</p> &LT;/LI&G             T </ul> </div>    </div> </div> 

Ps: Here is what the Index1 file displays through the template HTML file. $ctrl is the alias of the component. Filter filters. You can choose to sort by the name or the Age property. You can also search by name or by the Age property.

App.module.js Defining module Files:

Used to introduce the module file to be used//define a Phonecatapp module var phonecatapp = angular.module (' Phonecatapp ', []);

Ps: This file is used to define or reference various modules.

Phone-list.component.js Model Files:

Angular.module (' Phonecatapp ', []). Component (' Phonelist ', {     templateurl: ' phone-list/phone-list.template.html ') ,     controller:function Phonelistcontroller () {         This.phones = [             {                 name: ' Nmas ',                 snippet: ' DSAKSN DSJ saj jsas ds ',                 age:1             },             {                 name: ' Dmas ',                 snippet: ' Saddsaksn dsj saj jsas ds ',                 age:2             },             {                 name: ' AMAs ',                 snippet: ' Fredsaksn dsj saj jsas ds ',                 age:3             }         ];         This.orderprop = ' age ';     } });

PS: This file is used to define the component, its templateurl is the corresponding template HTML file, and its controller controllers define the corresponding data model and control its structure. The Phonecatapp here is the module defined in App.module.js, which registers the component Phonelist under the module.

ANGULARJS filter: Use a pipe character (|) Added to expressions and directives, which can be used to transform data. Filters are: Currency (formatted number as currency format), filter (select a subset from array items), lowercase (formatted string as lowercase), order by (array by an expression), uppercase (formatted string is uppercase)

<p> name {{LastName | uppercase}}</p>

<! DOCTYPE html>  

&NBSP;

<! DOCTYPE html> 
Custom filters:
<! DOCTYPE html> 
PS: If something is wrong, please point it out (2017-8-16)
Reference & Thanks Https://docs.angularjs.org/tutorial
ANGULARJS study notes--main html&template html&module&template JS, module, controller, bidirectional data binding, filter