Of Stack

Angularjs makes simple routing function demo

  • 2020-05-27 04:26:26
  • OfStack

The latest version of Angularjs was downloaded from the official website: 1.3.15

Do a simple routing function demo

Home page: index html 


<!DOCTYPE html >

<html>
<head>
  <meta charset="utf-8" />
  <title> test </title>
  <script src="./js/angular.min.js"></script>
  <script src="./js/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="TextController">
     <p>{{someText}}</p>
  </div>
  <div ng-view></div>
</body>
  <script>
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.controller('TextController', function ($scope) {
      $scope.someText = ' Test display content ';
    });

    // routing 
    function emailRouteConfig($routeProvider) {
      $routeProvider.
      when('/', {
        controller: ListController,
        templateUrl: 'list.html'
      }).
      when('/view/:id', { // in id The front and 1 A colon, and that's what it says 1 A parameterized URL
        controller: DetailController,
        templateUrl: 'detail.html'
      }).
      otherwise({
        redirectTo: '/'
      });
    }

    myApp.config(emailRouteConfig);// Configure our route 

    messages = [{
      id: 0, sender: "123456@qq.com", subject: " Hello, this is 1 email ", date: "2015 years 4 month 13 day ", recipients: ['wifei@163.com'], message: " Hello, I am xxx This is the email sent to you. "
    }, {
      id: 1, sender: "123456@qq.com", subject: " Hello, this is 1 email ", date: "2015 years 4 month 13 day ", recipients: ['wifei@163.com'], message: " Hello, I am xxx This is the email sent to you. "
    }, {
      id: 2, sender: "123456@qq.com", subject: " Hello, this is 1 email ", date: "2015 years 4 month 13 day ", recipients: ['wifei@163.com'], message: " Hello, I am xxx This is the email sent to you. "
    }];

    function ListController($scope) {
      $scope.messages = messages;
    }

    function DetailController($scope,$routeParams) {
      $scope.message = messages[$routeParams.id];
    }
  </script>
</html>

List page: list.html 


<table>
  <tr>
    <td><strong> The sender </strong></td>
    <td><strong> content </strong></td>
    <td><strong> The date of </strong></td>
  </tr>
  <tr ng-repeat="message in messages">
    <td>{{message.sender}}</td>
    <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
    <td>{{message.date}}</td>
  </tr>
</table>

Details page: detail.html 


<div><strong> project :</strong>{{message.subject}}</div>
<div><strong> The sender :</strong>{{message.sender}}</div>
<div><strong> The date of :</strong>{{message.date}}</div>
<div>
  <strong>To:</strong>
  <span ng-repeat="recipient in message.recipients">
    {{recipient}}
  </span>
</div>
<div>{{message.message}}</div>
<a href="#/"> Back to the list </a>

Here is the demo pit:

1: the new version of Angularjs, reference routing function, requires a separate reference to the angular-route.js file

2: you also need to add a dependency on 'ngRoute' when defining module
angular. module (' xxxx '[' ngRoute'])

That's all for this article, I hope you enjoy it.

Related articles: