SoFunction
Updated on 2025-03-10

Angularjs creates simple routing function demo

Download the latest version of Angularjs version number from the official website: 1.3.15

Make a simple routing demo

front page:

<!DOCTYPE html >

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

    //routing    function emailRouteConfig($routeProvider) {
      $routeProvider.
      when('/', {
        controller: ListController,
        templateUrl: ''
      }).
      when('/view/:id', { //Add a colon before the id, thus creating a parameterized URL        controller: DetailController,
        templateUrl: ''
      }).
      otherwise({
        redirectTo: '/'
      });
    }

    (emailRouteConfig);//Configure our route
    messages = [{
      id: 0, sender: "123456@", subject: "Hello, this is an email", date: "April 13, 2015", recipients: ['wifei@'], message: "Hello, I'm xxx, this is the email sent to you."
    }, {
      id: 1, sender: "123456@", subject: "Hello, this is an email", date: "April 13, 2015", recipients: ['wifei@'], message: "Hello, I'm xxx, this is the email sent to you."
    }, {
      id: 2, sender: "123456@", subject: "Hello, this is an email", date: "April 13, 2015", recipients: ['wifei@'], message: "Hello, I'm xxx, this is the email sent to you."
    }];

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

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

List page:

<table>
  <tr>
    <td><strong>From</strong></td>
    <td><strong>content</strong></td>
    <td><strong>date</strong></td>
  </tr>
  <tr ng-repeat="message in messages">
    <td>{{}}</td>
    <td><a href="#/view/{{}}">{{}}</a></td>
    <td>{{}}</td>
  </tr>
</table>

Detailed page:

<div><strong>project:</strong>{{}}</div>
<div><strong>Sender:</strong>{{}}</div>
<div><strong>date:</strong>{{}}</div>
<div>
  <strong>To:</strong>
  <span ng-repeat="recipient in ">
    {{recipient}}
  </span>
</div>
<div>{{}}</div>
&lt;a href="#/">Back to list</a>

Here are the pitfalls of this demo:

1: The new version of Angularjs, which references the routing function, requires a separate reference to the file

2: You also need to add dependencies on 'ngRoute' when defining module
('xxxx', ['ngRoute'])

The above is the entire content of this article, I hope you like it.