Home > Article > Web Front-end > Create a simple routing function demo with Angularjs

Create a simple routing function demo with Angularjs

高洛峰Original: 2017-02-06 11:59:44987browse

Downloaded the latest version of Angularjs from the official website. Version number: 1.3.15

Make a simple routing function demo

Homepage: index.html

<!DOCTYPE html >
 
<html>
<head>
  <meta charset="utf-8" />
  <title>测试</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(&#39;myApp&#39;, [&#39;ngRoute&#39;]);
    myApp.controller(&#39;TextController&#39;, function ($scope) {
      $scope.someText = &#39;测试显示内容&#39;;
    });
 
    //路由
    function emailRouteConfig($routeProvider) {
      $routeProvider.
      when(&#39;/&#39;, {
        controller: ListController,
        templateUrl: &#39;list.html&#39;
      }).
      when(&#39;/view/:id&#39;, { //在id前面加一个冒号，从而制订了一个参数化URL
        controller: DetailController,
        templateUrl: &#39;detail.html&#39;
      }).
      otherwise({
        redirectTo: &#39;/&#39;
      });
    }
 
    myApp.config(emailRouteConfig);//配置我们的路由
 
    messages = [{
      id: 0, sender: "123456@qq.com", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: [&#39;wifei@163.com&#39;], message: "你好，我是xxx，这是发送给您的邮件。"
    }, {
      id: 1, sender: "123456@qq.com", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: [&#39;wifei@163.com&#39;], message: "你好，我是xxx，这是发送给您的邮件。"
    }, {
      id: 2, sender: "123456@qq.com", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: [&#39;wifei@163.com&#39;], message: "你好，我是xxx，这是发送给您的邮件。"
    }];
 
    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>发件人</strong></td>
    <td><strong>内容</strong></td>
    <td><strong>日期</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>项目:</strong>{{message.subject}}</div>
<div><strong>发送者:</strong>{{message.sender}}</div>
<div><strong>日期:</strong>{{message.date}}</div>
<div>
  <strong>To:</strong>
  <span ng-repeat="recipient in message.recipients">
    {{recipient}}
  </span>
</div>
<div>{{message.message}}</div>
<a href="#/">回到列表</a>

The following are the pitfalls of this demo:

1: The new version of Angularjs needs to reference the routing function separately. Then quote the angular-route.js file

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

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

For more articles related to Angularjs’ simple routing function demo, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement simple router functions in JSNext article：How to implement simple router functions in JS

See more

Create a simple routing function demo with Angularjs

Related articles