Angular route instance and angularroute instance

Angular route instance and angularroute instance
ISun

Design & Code

AngularJS-basic routing example

AngularJS routing

It is vital for single-page applications to jump from one view of a page to another. When applications become more and more complex, we need a reasonable way to manage the interfaces that users can see during use. AngularJS splits the view into layout and template view, and displays the corresponding view based on the URL currently accessed by the user.

 

This article provides a simple example of AngularJS routing and introduces some related concepts.

 

1. layout page

Reference scripts:

1 <script src="../Scripts/jquery-1.9.1.min.js"></script>2 <script src="../Scripts/angular.min.js"></script>3 <script src="../Scripts/angular-route.min.js"></script>

The page layout is relatively simple:

1 <div>2     <ul>3         <li><a href="#page1">go page 1</a></li>4         <li><a href="#page2">go page 2</a></li>5         <li><a href="#other">to other page</a></li>6     </ul>7 </div>8 <div ng-view></div>

Ng-view is a special instruction provided by the ngRoute module, which tells AngularJS where to render the template. In this example, we place the content to be rendered in the following div. The above three a links point to three views respectively.

 

Ii. template page

Create two template pages: Subpage_1.html and Subpage_2.html.

 

3. routing rule routing config

 1 angular.module("myRouteApp", ["ngRoute"]) 2     .config(['$routeProvider', function ($routeProvider) { 3         $routeProvider 4             .when("/page1", { 5                 templateUrl: "Subpage_1.html" 6             }) 7             .when("/page2", { 8                 templateUrl: "Subpage_2.html" 9             })10             .otherwise({11                 redirectTo: "/"12             });13     }]);

Load the ngRoute module in our application as dependencies. Use the config function to define routes in a module or application, and use the when and otherwise methods provided by AngularJS to define application routes.

TemplateUrl:

The application reads the view (or reads it from $ templateCache) through XHR Based on the path specified by the templateUrl attribute ). If you can find and read this template, AngularJS renders the template content to the DOM element with the ng-view command.

RedirectTo:

If the value of the redirectTo attribute is a string, the path will be replaced with this value and route changes will be triggered based on the target path. If the value of the redirectTo attribute is a function, the path is replaced with the return value of the function, and route changes are triggered based on the target path.

 

Running result

Click go page 1.

 

Click go page 2.

 

This article