Of Stack

AngularJS Implementation Method for Switching Views Using Routing

  • 2021-07-15 03:43:55
  • OfStack

In this paper, an example is given to describe the method of using routing to switch views in AngularJS. Share it for your reference, as follows:

The following is a simple example of student information management.

Note: In addition to referring to angular. js, you should also refer to angular-route. js.

1. Create index. html Main View

In the index. html main view, we will put everything common to multiple views, such as menus. In this example, we just put the title of the application in it, and then use the ng-view instruction to tell Angular where to display the view. 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="StuApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title> Student information </title>
  <script src="/Scripts/angular.min.js"></script>
  <script src="/Scripts/angular-route.min.js"></script>
  <script src="controllers.js"></script>
</head>
<body>
  <h1> Student information </h1>
  <div ng-view></div>
</body>
</html>

2. Create an list. html list view 


<table>
  <tr>
    <th> Student number </th>
    <th> Name </th>
    <th> Gender </th>
    <th> Age </th>
  </tr>
  <tr ng-repeat="student in StudentList">
    <td>{{student.id}}</td>
    <td><a ng-href="#/view/{{student.id}}">{{student.name}}</a></td>
    <td>{{student.sex}}</td>
    <td>{{student.age}}</td>
  </tr>
</table>

3. Create detail. html Detailed View 


<div>
  <div><strong> Student number: </strong>{{Student.id}}</div>
  <div><strong> Name: </strong>{{Student.name}}</div>
  <div><strong> Gender: </strong>{{Student.sex}}</div>
  <div><strong> Age: </strong>{{Student.age}}</div>
  <a href="#/"> Return </a>
</div>

4. Create controllers. js controller script 


// Create Module 
var StuServices = angular.module("StuApp", ['ngRoute']);
// In URL Mapping relationship is established before template and controller 
function StuRouteConfig($routeProvider) {
  $routeProvider.when('/', {
    controller: 'ListController',
    templateUrl: 'list.html'
  }).when('/view/:id', {
    controller: 'DetailController',
    templateUrl: 'detail.html'
  }).otherwise({ redirectTo: '/' });
}
// Configure the route so that the student service can find it 
StuServices.config(StuRouteConfig);
//1 Some virtual student information 
StudentList = [{ id: 0, name: ' Zhang 3', sex: ' Male ', age: 18 },
  { id: 1, name: ' Li 4', sex: ' Female ', age: 15 },
  { id: 2, name: ' Wang 5', sex: ' Male ', age: 16 }
];
// List template 
StuServices.controller("ListController", function ($scope) {
  $scope.StudentList = StudentList;
})
// Detailed module: from routing information (from URL Get the message from) parsed in id, Then use it to find the correct mail object 
StuServices.controller("DetailController", function ($scope, $routeParams) {
  $scope.Student = StudentList[$routeParams.id];
})

For more readers interested in AngularJS, please check out the topics on this site: "Introduction and Advanced Tutorial of AngularJS" and "Summary of AngularJS MVC Architecture"

I hope this article is helpful to everyone's AngularJS programming.

Related articles: