之前的页面太丑了，后来我引入了bootstrap.css，把样式进行修了一番，如下图（一不小心，插入个链接，忽略，http://t.cn/RUbL4rP）：

（链接：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

}])

学习笔记-AngularJs（五）的更多相关文章

  1. 学习笔记-AngularJs（六）

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

  2. opencv学习笔记（五）镜像对称

    opencv学习笔记(五)镜像对称 设图像的宽度为width,长度为height.(x,y)为变换后的坐标,(x0,y0)为原图像的坐标. 水平镜像变换: 代码实现: #include <ios ...

  3. Django学习笔记（五）—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  4. VSTO学习笔记（五）批量编辑Excel 2010 x64

    原文:VSTO学习笔记(五)批量编辑Excel 2010 x64 近期因为工作的需要,经常要批量处理大量的Excel文件,如果纯手工一个个修改,非常的麻烦,于是写了这么一个帮助类,希望能对你有所帮助. ...

  5. python学习笔记（五岁以下儿童）深深浅浅的副本复印件，文件和文件夹

    python学习笔记(五岁以下儿童) 深拷贝-浅拷贝 浅拷贝就是对引用的拷贝(仅仅拷贝父对象) 深拷贝就是对对象的资源拷贝 普通的复制,仅仅是添加了一个指向同一个地址空间的"标签" ...

  6. Python学习笔记（五）

    Python学习笔记(五): 文件操作 另一种文件打开方式-with 作业-三级菜单高大上版 1. 知识点 能调用方法的一定是对象 涉及文件的三个过程:打开-操作-关闭 python3中一个汉字就是一 ...

  7. QML学习笔记（五）— 做一个简单的待做事项列表

    做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...

  8. 学习笔记-AngularJs（十）

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  9. 学习笔记-AngularJs（九）

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  10. 学习笔记-AngularJs（七）

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

随机推荐

  1. FILE，id不一致

    当图片全部是新增的时候,id和FILE一一对应,后台可以匹配处理. array(1) { ["banner_img"] => array(5) { ["name&q ...

  2. android状态栏和NavigationBar的动态控制显示

    项目在开发阅读器,阅读器对阅读界面的要求就是在工具栏不显示的状态下,ActionBar和NavigationBar都是不显示的,当工具栏显示时它们都出来,这就需要动态控制它们的显示与隐藏. 第一阶段: ...

  3. 力扣（LeetCode） 27. 移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  4. 使用VSCode如何从github拉取项目

    转载自:https://blog.csdn.net/sunqy1995/article/details/81517159 1.开vscode使用CTRL+`或者点击查看到集成终端打开控制终端 2. 在 ...

  5. MySQL学习(十)

    要做:商城的留言板 一般情况,做留言板的显示很容易,直接select查询,再显示出来,但eschop中的留言板难点在于留言数据来自2张表,feedback表和comment表,我们需要把两张表中的内容 ...

  6. mui体验理解

    1.      mui简介 1.1  缘起 1.基于jq的jqmobile,性能低的无法忍受,且UI难看 2.bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的 ...

  7. CCPC2017湘潭 1263 1264 1267 1268

    1263 拉升一下就A了 #include <iostream> #include <vector> #include <algorithm> #include & ...

  8. android -------- Lint优化工具

    什么是 Lint Lint 是Android Studio 提供的 代码扫描分析工具,它可以帮助我们发现代码结构/质量问题,同时提供一些解决方案,而且这个过程不需要我们手写测试用例. Lint 发现的 ...

  9. Confluence 6 指派和撤销空间权限

    指派空间权限 希望添加一个新用户或者用户组到权限列表中,从希望选择的选项中查找用户组或者用户,然后选择 添加(Add).用户和用户组将会显示在列表中:选择你希望引用的权限,然后选择 保存所有(Save ...

  10. 03 flask数据库操作、flask-session、蓝图

    ORM ORM 全拼Object-Relation Mapping,中文意为 对象-关系映射.主要实现模型对象到关系数据库数据的映射. 1.优点 : 只需要面向对象编程, 不需要面向数据库编写代码. ...