Angular routing route Instance code _ANGULARJS

ANGULARJS Routing Routing

Being able to jump from one view of a page to another is critical to a single page application. As applications become more complex, we need a reasonable way to manage the interfaces that users see during their use. The ANGULARJS approach is to break the view into layout and template view, and to display the corresponding view based on the URL that the user is currently accessing.

This article makes a simple example of Angularjs routing and mentions some of the concepts involved.

One, Layout page

Reference scripts:

 <script src= ". /scripts/jquery-1.9.1.min.js "></script>
 <script src=". /scripts/angular.min.js "></script>
 <script src=". /scripts/angular-route.min.js "></script>

The layout of the page is relatively simple:

<div>
   <ul>
     <li><a href= "#page1" >go page 1</a></li>
     <li>< A href= "#page2" >go page 2</a></li>
     <li><a href= "#other" >to other page</a></ li>
   </ul>
 </div>
 <div ng-view></div>

Ng-view is a special instruction provided by the Ngroute module that tells Angularjs where to render the template. In this example, we'll put what needs to be rendered into the div below. The top three a links point to three view views, respectively.

Second, template page

Create two template pages, called subpage_1.html and subpage_2.html, respectively.

3. Routing Rules routing Config

Angular.module ("Myrouteapp", ["Ngroute"])
  . config ([' $routeProvider ', function ($routeProvider) {
    $ Routeprovider
      . When ("/page1", {
        templateurl: "subpage_1.html"
      })
      . When ("/page2", {
        Templateurl: "subpage_2.html"
      })
      . Otherwise ({
        Redirectto: "/"
      });
  });

The Ngroute module is loaded in our application as a dependency. Use the config function to define routes in a module or application, using the When and otherwise two methods provided by ANGULARJS to define the routes that are applied.

Templateurl:

The application reads the view through XHR (or reads from the $templatecache) based on the path specified by the Templateurl property. If the template can be found and read, Angularjs renders the contents of the template to a DOM element with Ng-view directives.

Redirectto:

If the value of the Redirectto property is a string, the path is replaced with this value and the routing change is triggered according to the target path. If the value of the Redirectto property is a function, then the path is replaced with the return value of the function and the routing change is triggered according to the target path.

Run results

Click Go Page 1

Click Go Page 2

The above angular routing route example code is a small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.