Home > Developer > Web Develop
Angularjs in the application of a wide range of applications, mainly allows us to access different content through different URLs, can implement multi-view single-page Web application. below to see how to use.
About Routing
Usually our URL form is http://jtjds.cn/first/page, but in a single page Web application Angularjs through the #+ tag implementation, such as the following page, will be the routing example below.
http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1http:// 192.168.1.109:8000/angular-program/src/main.html#/pagetable/page2http://192.168.1.109:8000/ Angular-program/src/main.html#/pagetable/page3
When we click on the one by one link, the address requested by the server is http://192.168.1.109:8000/angular-program/src/main.html, and the content after the # number is ignored by the browser when it requests the server side. So we implement the functionality behind the # # number on the client side. In a nutshell, routing helps us distinguish different logical pages by #+ tags and binds them to the corresponding controller.
Each page has a controller control, which is routed to show the different pages.
How do I use routing?
New main.html
<!DOCTYPE HTML><HTMLNg-app= "MyApp"> <Head> <MetaCharSet= "Utf-8"> <Scriptsrc= "Angular.min.js"></Script> <Scriptsrc= "Angular-ui-router.min.js"></Script> <Scriptsrc= "App.js"></Script> </Head> <Body> <!--introduction of ANGULARJS Framework and Ui-router Framework, introduction of App.js framework - <H1>AngularJS Routing Jump</H1> <DivUi-view=""></Div>--Display page.html's page content </Body></HTML>
New Pagetable.html Page
<!DOCTYPE HTML><Div> <Div> <spanstyle= "width:100px"Ui-sref= ". Page1"><ahref=""> Home</a></span> <spanstyle= "width:100px"Ui-sref= ". Page2"><ahref=""> About Me</a></span> <spanstyle= "width:100px"Ui-sref= ". Page3"><ahref=""> Message Board</a></span> </Div> <Div> <DivUi-view=""></Div>--Display the content of Page1,page2,page3 page </Div></Div>
New Page1.html Page
<! DOCTYPE HTML > < Div > < Div > < H1 >11111111111111111111</H1> </Div > </div>
New Page2.html Page
<! DOCTYPE HTML > < Div > < Div > < H1 >22222222222222222</H1> </Div ></div>
New Page3.html Page
<! DOCTYPE HTML > < Div > < Div > < H1 >333333333333333</H1> </Div > </ Div >
App.js Content
var app=angular.module ("MyApp", [' Ui.router ']);//Declaration Angualrjs module, and Ui-router-descendant Angularjs module
App. Config (function($stateProvider, $urlRouterProvider) {//declares that the $stateprovider and $urlrouterprovider routing engines are descendants of function parameters to configure routing for the application$urlRouterProvider. Otherwise ("/pagetable"); $stateProvider. State ("Pagetable", {URL:"/pagetable", Templateurl:"Pagetable.html"//the first displayed page}). State ("Pagetable.page1", {URL:"/page1", Templateurl:"Page1.html"//}). State ("Pagetable.page2", {URL:"/page2", Templateurl:"Page2.html"}). State ("Pagetable.page3", {URL:"/page3", Templateurl:"Page3.html" });});
The following explains the meaning of configuring routing. Angularjs uses Ui-rooter to bring it to the Angularjs module. OK, we will run the project, if the local directly open, under the non-safari run, there will be cross-domain problems, we look at. That is, only under safari to open normally, the file can not be opened under other browsers, starting with the local file://. It is mainly the influence of JS homologous strategy.
So how do you run the project on the server? Provides a tool: Https://www.npmjs.com/package/anywhere enables simple page runs. See the documentation for specific installation instructions. OK, now let's start the project,
Now let's look at the effect of the run: as shown in
Click on a different link and a different page will appear below. Then the simple routing jump is done. Simple to first, routing problems, relatively simple, that is, how to control multiple pages under the same page jump?
Ting Feng
Source:http://www.cnblogs.com/jtjds/p/5743855.html
If you feel that reading this article is helpful to you, please click "Recommend" button, your "recommendation" will be my biggest writing motivation! You are welcome to reprint, but without the author's consent
After reprint article must in the article page obvious position gives the author and the original text connection otherwise reserves the right to pursue the legal responsibility.
A summary of routing learning in Angularjs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
