AngularJS $route

暂时只是知道怎样用，还没理解，就先展示怎样的流程，待日后再来表明理解

结构

先看下Index.html

<!DOCTYPE html>

<html lang="en" ng-app="news">
<head>
    <title></title>
    <script src="../angular.min.js" type="text/javascript"></script>
    <script src="../angular-route.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="controller.js" type="text/javascript"></script>
</head>
<body>
<div ng-view>

</div>
</body>
</html>

需要注意的点是：1 需要添加angular-route.js这个js插件

   　　　　　　　2 添加 ng-view

再看看list.html和detail.html的模板内容

<div><strong>Subject:</strong> {{message.subject}}</div>
 <div><strong>Sender:</strong> {{message.sender}}</div>
 <div><strong>Date:</strong> {{message.date}}</div>
 <div>
     <strong>To:</strong>
     <span ng-repeat='recipient in message.recipients'>{{recipient}} </span>
 <div>{{message.message}}</div>
 <a href='#/'>Back to message list</a>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">    
          <a href="#/news/{{phone.id}}" class="thumb"></a>
          <a href="#/news/{{phone.id}}">{{phone.date}}</a>
          <p>{{phone.message}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

重点看下app.js这个js的内容

angular.module("news", ['ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
        when('/', { templateUrl: 'partials/list.html', controller: newsListController }).
        when('/news/:newsId', { templateUrl: 'partials/detail.html', controller: newsDetailController }).
        otherwise({redirectTo:'/'});
    } ]);

注意点：1 添加ngRoute

　　　　2 熟悉拼写的格式

 

controller.js

 // 一些虚拟的邮件
 messages = [{
   id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
   date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
   message: 'Hey, we should get together for lunch sometime and catch up.There are many things we should collaborate on this year.'
 }, {
   id: 1,  sender: 'maria@somecompany.com',
   subject: 'Where did you leave my laptop?',
   date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
   message: 'I thought you were going to put it in my desk drawer.But it does not seem to be there.'
 }, {
   id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
   date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
   message: "Nobody panic, but my pet python is missing from her cage.She doesn't move too fast, so just call me if you see her."
 }];
 // 把我们的邮件发布给邮件列表模板

function newsListController($scope) {
    $scope.phones = messages;
 }
 // 从路由信息（从URL 中解析出来的）中获取邮件id，然后用它找到正确的邮件对象
 function newsDetailController($scope, $routeParams) {
     $scope.message = messages[$routeParams.id];
 }

 

posted @ 2014-04-14 23:30  菠萝君  阅读(435)  评论(0)    收藏  举报