学习笔记-AngularJs(五)

页面导航:首页 > 网络编程 > JavaScript > 学习笔记-AngularJs(五)

学习笔记-AngularJs(五)

来源:互联网 作者:脚本宝典 时间:2015-09-22 13:33 【

前的页面太丑了,后来我引入了bootstrap.css,把样式进行修了一番,如下图:(链接:http://www.live086.cn/angularjs/#/phones)是不是觉得好看多了,这里我在原先phone.json里面多加了人物的图片
前的页面太丑了,后来我引入了bootstrap.css,把样式进行修了一番,如下图:
(链接:http://www.live086.cn/angularjs/#/phones)
是不是觉得好看多了,这里我在原先phone.json里面多加了人物的图片,于是phone.json就变成:
[

        {"id":1, "name":"xioabin","number":"18824863982","age":12,"thumb":"image/nan.jpg"},
     ....  
]
//图片可以自己找控制器文件没有任何变化,模版文件加了bootstrap.css,有了明显的变化,代码如下:
<!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}}"是加载不了图片资源的。
有没有注意到"#/phones/{{phone.id}}"为啥要怎样写,于是这里就涉及到路由的配置和怎么实现多视图之间的跳转了,于是我们对整个学习项目做了修改:目录如下:
这里就如同我们之前所讲,将控制器文件,服务文件,过滤器,指令都分开来写,index.html就是这个学习项目的布局模板,也可以理解成根模板,所有视图(其他模板tpls)会通过路由加载到这个模板的ng-view里面,代码如下:
<!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.html
这是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
}])


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<