ANGULARJS Basics-5 Routing (defining routes, using routes), custom directives (Directive)

One, define the route

Ng-view

-AngularJS supports single page application through multiple views on a single page

-Ng-view tag simply creates a placeholder

-Using

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/98/wKiom1cE6zCDCowSAAA2rpsVcQQ917.png "title=" Web.png "alt=" Wkiom1ce6zcdcowsaaa2rpsvcqq917.png "/>

Ng-template

-Create an HTML view using the script tag

-Using

-Define type as a script block for Ng-template in the main module

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/98/wKiom1cE66_SnPAhAABZG_GVQhw435.png "title=" Web.png "alt=" Wkiom1ce66_snpahaabzg_gvqhw435.png "/>

$routeProvider

-Map the appropriate HTML page or ng-template

-Attach a controller using the same key service

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/95/wKioL1cE7LrQn4UdAAARuIAkpVc675.png "title=" Web.png "alt=" Wkiol1ce7lrqn4udaaaruiakpvc675.png "/>-Note:

-Requires a reference to the Angular-route.js script file

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/98/wKiom1cE7FDAJBoyAAGdXDpCUF8953.png "title=" Web.png "alt=" Wkiom1ce7fdajboyaagdxdpcuf8953.png "/>

Ii. Use of routing

Anchor Point Link

-Define anchor points

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/95/wKioL1cE7Uvh97CGAACKpmm0trE793.png "title=" Web.png "alt=" Wkiol1ce7uvh97cgaackpmm0tre793.png "/>

-Define Ng-template

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/95/wKioL1cE7WLwLGejAAEbWybXx0k445.png "title=" Web.png "alt=" Wkiol1ce7wlwlgejaaebwybxx0k445.png "/>

-Define the Controller

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/98/wKiom1cE7NmwS8RgAAET51NWGjU368.png "title=" Web.png "alt=" Wkiom1ce7nmws8rgaaet51nwgju368.png "/>

Route parameters

-Declaration parameters

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/95/wKioL1cE7bXixZ38AABDWykmXC8893.png "title=" Web.png "alt=" Wkiol1ce7bxixz38aabdwykmxc8893.png "/>

-Accept Parameters

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/98/wKiom1cE7R2CR6-JAAA5hy0fV5o729.png "title=" Web.png "alt=" Wkiom1ce7r2cr6-jaaa5hy0fv5o729.png "/>

-Display parameters

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/95/wKioL1cE7eDDRDH0AAAP6INKaYY925.png "title=" Web.png "alt=" Wkiol1ce7eddrdh0aaap6inkayy925.png "/>

III. custom Directive-directive

Elements

-The ability to use AngularJS to extend HTML in custom directives

-type of the following elements to create custom directives

-element directives-activates a matching element when the instruction encounters

-Attribute-A matching property is activated when the instruction encounters

-CSS-When a command encounters a match CSS style is activated

-Comment-activation of matching annotations when the instruction encounters

directive

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/95/wKioL1cE7migHT0mAAIpuHOjRHU305.png "title=" Web.png "alt=" Wkiol1ce7might0maaipuhojrhu305.png "/>

Use the custom Directive 650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/98/wKiom1cE7Z3QTBc9AABkU79KylA875.png "title= "Web.png" alt= "Wkiom1ce7z3qtbc9aabku79kyla875.png"/>

Summary: This chapter focuses on AngularJS routing (defining routes, using routes), custom directives (Directive)

This article from the "Flying Ants" blog, declined to reprint!

ANGULARJS Basics-5 Routing (defining routes, using routes), custom directives (Directive)