recherche

Maison >interface Web >js tutoriel >Angularjs crée une fonction de routage simple demo_AngularJS

Angularjs crée une fonction de routage simple demo_AngularJS

WBOY
WBOYoriginal
2016-05-16 16:04:161269parcourir

Téléchargé la dernière version d'Angularjs depuis le site officiel Numéro de version : 1.3.15

.

Faire une démonstration simple de la fonction de routage

Page d'accueil : 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('myApp', ['ngRoute']);
    myApp.controller('TextController', function ($scope) {
      $scope.someText = '测试显示内容';
    });

    //路由
    function emailRouteConfig($routeProvider) {
      $routeProvider.
      when('/', {
        controller: ListController,
        templateUrl: 'list.html'
      }).
      when('/view/:id', { //在id前面加一个冒号，从而制订了一个参数化URL
        controller: DetailController,
        templateUrl: 'detail.html'
      }).
      otherwise({
        redirectTo: '/'
      });
    }

    myApp.config(emailRouteConfig);//配置我们的路由

    messages = [{
      id: 0, sender: "123456@qq.com", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: ['wifei@163.com'], message: "你好，我是xxx，这是发送给您的邮件。"
    }, {
      id: 1, sender: "123456@qq.com", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: ['wifei@163.com'], message: "你好，我是xxx，这是发送给您的邮件。"
    }, {
      id: 2, sender: "123456@qq.com", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: ['wifei@163.com'], message: "你好，我是xxx，这是发送给您的邮件。"
    }];

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

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

Page de liste : 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>

Page de détail : détail.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>

Voici les pièges de cette démo :

1 : La nouvelle version d'Angularjs, pour référencer la fonction de routage, doit référencer le fichier angulaire-route.js séparément

2 : Vous devez également ajouter une dépendance sur 'ngRoute' lors de la définition du module
angulaire.module('xxxx', ['ngRoute'])

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le zoom du plug-in jQuery réalise un agrandissement plein écran des images et des effets spéciaux de couche contextuelle_jqueryArticle suivant：Le zoom du plug-in jQuery réalise un agrandissement plein écran des images et des effets spéciaux de couche contextuelle_jquery

Articles Liés

Voir plus