從零開始搭建口袋妖怪管理系統(2)-藉助ngRoute實現詳情頁面跳轉

時間 2019-11-10

標籤開始搭建口袋妖怪管理系統藉助 ngroute 實現詳情頁面简体版

原文原文鏈接

1、目標

上一次咱們用Angular1.x完成了簡單的口袋妖怪展現列表頁面，如今咱們想要了解口袋妖怪更多的信息，可是發現原有單行表格可能容納不下口袋妖怪的全部信息，因此如今咱們須要一個口袋妖怪詳情界面了。依舊是從剛剛的展現列表界面開始，點擊口袋妖怪的名稱而後跳轉到指定的口袋妖怪信息界面。css

2、分析

要想實現點擊名字後從列表頁面跳轉到詳情界面，最原始的方式確定是用<a>標籤加連接和參數跳轉到新界面，可是如今咱們想要在原有界面內平滑過渡到新界面，即用路由實現視圖中轉，那麼很簡單地咱們找到了官方提供的路由跳轉模塊ngRoute.html

使用路由，第一步是先導入js並在app.js中引用路由模塊，接下來配置好路由，最後再編寫界面和界面邏輯。擼碼開始~webpack

3、開發

1. 數據準備

首先將原來app.js中的pokemons數據進行一些擴增：git

var pokemons = [
       { no:'001', name:'妙蛙種子', count: 1, weight: 6.9, property: '草/毒', type: '種子寶可夢', character: { common: '茂盛', conceal: '葉綠素'}},
       { no:'002', name:'妙蛙草', count: 1, weight: 13.0, property: '草/毒', type: '種子寶可夢',  character: { common: '茂盛', conceal: '葉綠素'}},
       { no:'003', name:'妙蛙花', count: 1, weight: 100, property: '草/毒', type: '種子寶可夢',  character: { common: '茂盛', conceal: '葉綠素'}},
       { no:'004', name:'小火龍', count: 1, weight: 8.5, property: '火', type: '蜥蜴寶可夢',  character: { common: '猛火', conceal: '太陽之力'}},
       { no:'025', name:'皮卡丘', count: 1, weight: 6, property: '電', type: '鼠寶可夢',  character: { common: '靜電', conceal: '避雷針'}}
     ];

很明顯能看到，pokemons增長了皮卡丘的數據，且全部數據都增長了property(屬性)、type(類型)、character(特性)及其下的common(普通特性)&conceal(隱藏特性)數據。angularjs

展現界面依舊不改變展現的內容，可是在詳情界面咱們將展現更多的信息。github

2. 環境配置

要使用ngRouter，查看文檔，根據安裝說明在html引入angular-route.js文件：web

<script src="libs/angular-route.js"></script>

並在app.js的module聲明中加入'ngRoute' ：chrome

angular.module('pokemon-app', ['ngRoute'])=

3. 路由編寫

因爲準備加入ngRouter跳轉，因此index.html就不放列表視圖了，只留下標題和ngView.json

新建pokemon文件夾，並在pokemon文件夾中新建視圖模板文件pm-list.html與pm-detail.html，當前的項目文件視圖以下：
segmentfault

學習編寫路由第一件事確定是看文檔，嗯安裝&例子&模塊組件，咱們安裝完了確定看例子啦：

See [$route](https://code.angularjs.org/1.6.9/docs/api/ngRoute/service/$route#examples) for an example of configuring and using ngRoute.

這麼直接，跳過去就有demo代碼了。。跟着擼一個唄，學習其js，爲上面的pm-list & pm-detail建立兩個控制器先，pm-list對應PMListController, pm-detail對應PMDetailController。

將AppController中的pokemons&remove移動到PMListController中，因爲詳情頁面將接收列表展現頁面傳遞的參數，因此爲PMDetailController添加上$routeParams：

PMListController.$inject = ['$scope'];
    function PMListController ($scope) {
       $scope.pokemons = pokemons;
       $scope.remove = function (index) {
           $scope.pokemons.splice(index, 1);
       }
   }

   PMDetailController.$inject = ['$scope', '$routeParams'];
   function PMDetailController ($scope, $routeParams) {}

接下來編寫路由配置，明確一下路由配置的做用，天然是把連接&視圖模板&控制器三者聯繫起來，達到輸入某個地址就跳轉到某個界面並調用其控制器的效果，那麼在參照一下剛纔文檔的樣例，開始編寫：

.config (function ($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'pokemon/pm-list.html',
         controller: 'PMListController'
       })
       .when('/pokemon/:no', {
         templateUrl: 'pokemon/pm-detail.html',
         controller: 'PMDetailController'
       })
       .otherwise({
         redirectTo: '/'
       });
   });

很清晰地，'/' 跳轉到列表視圖嗎，'/pokemon/:no' 跳轉到詳情視圖，若是輸入路由配置中不存在的地址則默認看成'/'地址跳轉。

4. 界面&業務邏輯編寫

如今咱們完成了控制器的初始化和路由配置的編寫，還剩下界面和業務邏輯。

先將index.html的<table>標籤及其全部子元素剪切到pm-list.html中，暫時不要有任何修改。
在index.html中加入ng-view,以下：

<!DOCTYPE html>
    <html lang="en" ng-app="pokemon-app">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>口袋妖怪</title>
            <script src="libs/angular.js"></script>
            <script src="libs/angular-route.js"></script>
            <script src="app.js"></script>
            <link rel="stylesheet" href="app.css"/>
        </head>
        <body ng-controller="AppController">
            <h1>口袋妖怪管理系統</h1>
            <div ng-view></div>
        </body>
    </html>

那麼如今打開index.html試試？

竟然有錯？看一看錯誤

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

跨源請求支持問題嘛，應該是ngRoute中用到了Ajax，那解決方案就很簡單啦，回到上一篇最後的擴展學習安裝http-server，使用http-server在本地開啓簡單服務器就行啦，試試先

運行成功了，那就繼續，修改列表視圖中的名稱項，使其點擊可跳轉到詳情視圖

<td><a href="/#!/pokemon/{{pokemon.no}}">{{pokemon.name}}</a></td>

編寫詳情視圖：

<p><b>編號: </b>No.{{pokemon.no}}</p>
<p><b>名稱: </b>{{pokemon.name}}</p>
<p><b>體重: </b>{{pokemon.weight}}</p>
<p><b>屬性: </b>{{pokemon.property}}</p>
<p><b>種類: </b>{{pokemon.type}}</p>
<div>
  <b>特性: </b>
  <ul>
    <li><b>普通特性: </b>{{pokemon.character.common}}</li>
    <li><b>隱藏特性: </b>{{pokemon.character.conceal}}</li>
  </ul>
</div>

<a href="/#!/pockmon">返回列表</a>

繼續用剛剛的http地址訪問（記得ctrl+F5強制刷新緩存嘿嘿嘿）

如今程序已經能從list跳轉到detail了，可是detail尚未得到選中的pokemon對象，咱們經過&dollar;routeParams得到選中的pokemon傳遞過來的no，打印一下&dollar;routeParams內容:

好的沒問題是一個json對象，咱們根據&dollar;routeParams傳遞來的no到pokemon中選中對應的pokemon

PMDetailController.$inject = ['$scope', '$routeParams'];
    function PMDetailController ($scope, $routeParams) {
        console.log('$routeParams:', $routeParams);
        angular.forEach(pokemons, function (element) {
            if (element.no === $routeParams.no) {
                $scope.pokemon = element;
                console.log('the match pokemon:', $scope.pokemon);
            }
    });
}

如今咱們回到網站，刷新後發現對應口袋妖怪的詳細信息已經出來了~