學習筆記-AngularJs（五）

時間 2019-11-17

原文原文鏈接

以前的頁面太醜了，後來我引入了bootstrap.css，把樣式進行修了一番，以下圖（一不當心，插入個連接，忽略，http://t.cn/RUbL4rP）：css

（連接：http://www.live086.cn/angularjs/#/phones）html

是否是以爲好看多了，這裏我在原先phone.json裏面多加了人物的圖片，因而phone.json就變成：angularjs

[

        {"id":1, "name":"xioabin","number":"18824863982","age":12,"thumb":"image/nan.jpg"},
　　　　　....  
]
//圖片能夠本身找

控制器文件沒有任何變化，模版文件加了bootstrap.css，有了明顯的變化，代碼以下：json

<!doctype html>

<html ng-app ng-controller="PhoneListCtrl">

  <head>

      <meta charset='utf8' />

      <title ng-bind="'Google Phone Gallery:' + query"></title>  

      <!-- <title ng-bind-template="Google Phone Gallery:{{query}}"></title> -->

    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    <script src="script.js"></script>

    <link rel="stylesheet" href="bootstrap.min.css">

  </head>

  <body>

    <div class="example2">

 
    <form class="form-inline" style="margin:20px 0;">
      <div class="form-group"><label for="select">帥選：</label><select name="select" id="select" ng-model='order' class="form-control" ><option value="name">名字</option><option value="age">年齡</option> </select></div> 
      <div class="form-group"><label for="search">搜索</label><input id="search" name="search" type="text" ng-model='query' class="form-control"  /></div>
    </form>

         <!--迭代器-->

    <table class="table">
        <tr>
          <th class="text-center">頭像</th>
          <th class="text-center">暱稱</th>
          <th class="text-center">電話號碼</th>
          <th class="text-center">年齡</th>
        </tr>
        <tr ng-repeat='phone in phones | filter:query | orderBy:order'>
          <td class="text-center"><a href="#/phones/{{phone.id}}"><img ng-src="{{phone.thumb}}"  style="width:40px;height:40px;border-radius:50%;" alt="hahah"></a>  <!--添加ng-src識別綁定的數據--></td>
          <td class="text-center">{{phone.name}}</td>
          <td class="text-center">{{phone.number}}</td>
          <td class="text-center">{{phone.age}}</td>
        </tr>
    </table>

 

    </div>
 
  </body>

</html>

其餘內容不變，可是因爲json文件裏面咱們加了人物的圖片，我須要使用ng-src來綁定圖片路徑的，這個不能使用原始的src，否則src＝"{{phone.thumb}}"是加載不了圖片資源的。bootstrap

有沒有注意到"#/phones/{{phone.id}}"爲啥要怎樣寫，因而這裏就涉及到路由的配置和怎麼實現多視圖之間的跳轉了，因而咱們對整個學習項目作了修改：目錄以下：app

這裏就如同咱們以前所講，將控制器文件，服務文件，過濾器，指令都分開來寫，index.html就是這個學習項目的佈局模板，也能夠理解成根模板，全部視圖（其餘模板tpls）會經過路由加載到這個模板的ng-view裏面，代碼以下：ide

<!doctype html>

<html ng-app="phonecat">

  <head>

      <meta charset='utf8' />

      <title ng-bind="'Google Phone Gallery:' + query"></title>  

      <!-- <title ng-bind-template="Google Phone Gallery:{{query}}"></title> -->

    <!--ng-bind與ng-bind-template的使用方式-->

    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>

    <link rel="stylesheet" href="bootstrap.min.css">

  </head>

  <body>

    <div ng-view></div>
 
  </body>

</html>

app.js，首先經過angular.module('phonecat', ['ngRoute','phoneController']);創建模塊，記住ng-app="phonecat",對於一個html頁面想有多個ng-app，能夠angualr.bootstrap(doucment,['phonecat',...]);在這裏須要注入"ngRoute"服務，並且也必須引入angular-route.js，佈局

var phonecat = angular.module('phonecat',  ['ngRoute','phoneController']);  //[....]依賴注入

phonecat.config(['$routeProvider',function($routeProvider){
    $routeProvider.
        when("/phones",{templateUrl:"tpls/phones-list.html",controller:"phone-list-controller"}).
        when("/phones/:phoneId",{templateUrl:"tpls/phones_detail.html",controller:"phone-detail-controller"}).
        otherwise({redirectTo:"/phones"});
}])

//這裏的配置是這樣的意思：域名＋項目目錄＋/#/phones那麼會跳轉至tpls/phones-list.html，處理的控制器爲phone-list-controller

域名＋項目目錄＋/#/phones/id那麼會跳轉至tpls/phones_detail.html，處理的控制器爲phone-detail-controller

//使用config注入$routeProvider服務(只有引入ngRoute模塊纔可使用)，when(path, route)和otherwise(params)來定義路由，
　　when(path,route) path: 訪問的url； route是一個對象，裏面controller（對應控制器），controllerAs,templateUrl(模板的路徑)、tempalte、redirectTo
　　otherwise(params), 是匹配沒有相應路由時，該怎麼處理！{redirectTo:"/phones"} 跳轉至/phones

phone-list.html學習

 <div ng-controller="phone-list-controller">
    <form class="form-inline" style="margin:20px 0;">
      <div class="form-group"><label for="select">帥選：</label><select name="select" id="select" ng-model='order' class="form-control" ><option value="name">名字</option><option value="age">年齡</option> </select></div> 
      <div class="form-group"><label for="search">搜索</label><input id="search" name="search" type="text" ng-model='query' class="form-control"  /></div>
    </form>

    <!--迭代器-->

    <table class="table">
        <tr>
          <th class="text-center">頭像</th>
          <th class="text-center">暱稱</th>
          <th class="text-center">電話號碼</th>
          <th class="text-center">年齡</th>
        </tr>
        <tr ng-repeat='phone in phones | filter:query | orderBy:order'>
          <td class="text-center"><a href="#/phones/{{phone.id}}"><img ng-src="{{phone.thumb}}"  style="width:40px;height:40px;border-radius:50%;" alt="hahah"></a>  <!--添加ng-src識別綁定的數據--></td>
          <td class="text-center">{{phone.name}}</td>
          <td class="text-center">{{phone.number}}</td>
          <td class="text-center">{{phone.age}}</td>
        </tr>
    </table>

 </div>

phone-detail.htmlurl

這是phoneId爲{{phoneId}}的詳情頁

controllers.js

var phoneController = angular.module('phoneController',  []); 
phoneController.controller("phone-list-controller",['$scope','$http',function($scope,$http){
      $http.get("phone.json").success(function(data, status, headers, config) {
          if(status==200){ $scope.phones = data;  }
            console.log(status+","+headers+","+config);
            // alert(JSON.stringify(data));
      });
        $scope.order = 'name';
}]);
phoneController.controller("phone-detail-controller",["$scope",'$routeParams',function($scope,$routeParams){
    $scope.phoneId = $routeParams.phoneId;　　//$routeParams是須要引入ngRoute模塊，得到傳過來的參數phoneId
}])

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。