注册登录

【Angularjs】Angularjs制作简单的路由功能demo-路由功能

时间:2016-02-12 13:10 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【Angularjs制作简单的路由功能demo】，下面是详细的讲解！

Angularjs制作简单的路由功能demo

<!DOCTYPE html >

<html>
<head>
  <meta charset="utf-8" />
  <title>测试</title>
  <script src="http://www.jb51.net/article/./js/angular.min.js"></script>
  <script src="http://www.jb51.net/article/./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>

关于Angularjs制作简单的路由功能demo的用户互动如下：

　　相关问题：你好这个angularjs 的demo可以发给我一份吗

　　答：下载文件:例子.rar >>详细

　　相关问题：如何利用AngularJS打造一款简单Web应用

　　答：对于angularjs本身来说，以上这个问题纯粹是使用者的理念和设计方法的问题，并不重要。重要的问题是，angularjs是个中型框架，做一个大型应用，往大了讲功能略显不足（比如缺少好用的UI插件和异步模块载入机制），往小了说又不够灵活 >>详细

　　相关问题：angularjs配置了多个路由能实现功能，但是在刷新页...

　　答：没懂，能把你的config贴来看看么？ >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【Angularjs】Angularjs制作简单的路由功能demo-路由功能

Angularjs制作简单的路由功能demo

关于Angularjs制作简单的路由功能demo的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）