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>New Pagetable.html Page
<! DOCTYPE html><div> <div> <span style= "width:100px" ui-sref= ". Page1" ><a href= "" > Home </a></span> <span style= "width:100px" ui-sref= "Page2" ><a href= "> About me </a>< /SPAN> <span style= "width:100px" ui-sref= ". Page3" ><a href= "> Message board </a></span> </div> <div> <div ui-view= "" ></div> --Display the contents of the Page1,page2,page3 page </div ></div>New Page1.html Page
<! DOCTYPE html> <div> <div>New Page2.html Page
<! DOCTYPE html><div> <div>New Page3.html Page
<! DOCTYPE html> <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 the $stateprovider and $urlrouterprovider routing engines to be descendants of function parameters, Configure routing $urlRouterProvider for your application . 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?
Angular routing learning of "angular.js" Ui-router
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
