AngularJS routing
Being able to jump from one view of a page to another is crucial for single-page applications. As applications become more and more complex, we need a reasonable way to manage the interfaces that users see during use. AngularJS practices to break the view into layout and template views, and display the corresponding view according to the URL currently accessed by the user.
This article provides a simple example of AngularJS routing and mentions some of the concepts it involves.
1. Layout page
Quote 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 directive provided by the ngRoute module that tells AngularJS where to render the template. In this example, we put the content we need to render into the div below. The above three a links point to three view views respectively.
2. 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: "/" }); }]);Load the ngRoute module as a dependency in our application. Use the config function to define routes in modules or applications, and use the two methods provided by AngularJS to define routes to applications.
templateUrl:
The application reads the view through XHR (or reads from $templateCache) based on the path specified by the templateUrl property. If this template can be found and read, AngularJS renders the contents of the template into a DOM element with the ng-view directive.
redirectTo:
If the value of the redirectTo property is a string, the path will be replaced with this value and the routing change will be triggered according to the target path. If the value of the redirectTo property is a function, the path will be replaced with the return value of the function and the routing change will be triggered according to this target path.
Running results
Click go page 1
Click go page 2
The above Angular routing route example code is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.