learning Angular.js(2)

Comments

3月5日

part13 Filter-custom

eg. 把数字选项转化为文字

1
2
3
4
5
6
7
8
9
angular.module("myApp",[])
  .filter("filterName",function(){
    return function(num){
      case 1:
        return "select one";
      ...
    }
  })
  .controller(...)

1
{{...| filterName}}

#####part14 ng-hide &ng-show
eg.

1
2
3
4
<input type = "checkBox" ng-model = "hideA"/>
...
<th ng-hide = "hideA">A</th>
<th ng-show = "!hideA">A</th>

#####part15 ng-init
在html中可以初始化model，eg.嵌套的index

#####part16 ng-include

  1. 引用页面

    1
    <div ng-include = "xxx.html"></div>

  2. 引用model

    1
    <div ng-include="employeeList"></div>
part18 $http

向服务器发请求，eg.

1
2
3
4
5
6
$http.({
    method:"get/...",
    url:"..."
  }).then(function(response,reason){
      ...
  })

返回的是Promise,then中response为返回值，reason为出错状况和原因

part19 service

可以提供某种服务的东西，比如$http,$log等
为什么使用：复用、依赖注入、易测试

part20 custom-service

很多地方都要用到的方法可以封装一下，eg.

1
2
3
4
5
6
7
8
9
10
app.factory('stringService',funcion(){
    return {
      processString : function(input){
        ...
      }
    };
  })


$stringService.processString("ssss");

part21-22 anchorscroll

跳转到屏幕某部分,eg. return to top/buttom

1
2
3
4
5
6
.controller("demoController",function($scope,$location,$anchorscroll){
    $scope.scrollTo = function(direction){
      $location.hash(direction); //1
      $anchorscroll(); //2
    }
})

  1. $location.hash(..): 在url末尾加上direction内容
  2. $anchorscroll(): 读取hash值跳转到那个位置（根据id）

html中：

1
2
3
<button id = "top" ng-click = "scrollTo('buttom')">TOP</button>
...
<button id = "buttom" ng-click = "scrollTo('top')">BUTTOM</button>

part23-26 rounting & template layout

eg.左边导航栏，点击导航栏不跳出页面切换右边内容

  1. 负责路由的angular-route.min.js需要另外下载
  2. 使用ng-view
  3. 用$routeProvider来配置路由

例子：主页为index.html,自页面为course.html等

  1. js部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var app = angular.module("demoApp",["ngRoute"])
      .config(function($routeProvider){
        $routeProvider
        .when("/course",{
            templateUrl: "xxx/course.html",
            controller: "courseController"
        })
        .when("/xxx",{
            templateUrl: "xxx/xxx.html",
            controller: "xxxController"
        })
        .controller("courseController",function(...){...})
        .controller("xxxController",function(...){...})
      })

  2. html部分

    1
    2
    3
    4
    <a href = "#/course">course</a>
    <a href = "#/xxx">xxx</a>
    ...
    <ng-view></ng-view>

3月6日

part28 默认路径

比如输入随意的路径都显示默认页面

1
2
3
$routeProvider.otherwise({
    redirectTo: "/xxx"
});

part30 从url上读参数

eg.传学生id

1
<a href = "students/{{stu.id}}">{{stu.name}}</a>

js:

1
2
3
4
.when("students/:id",{
    templateUrl : "xxx/detail.html",
    controller : "detailController"
})

http请求：

1
2
3
4
5
6
7
8
9
.controller("stuController",function($scope, $http, $routeParam){
  $http({
    url : "...",
    params: {id: $routeParams.id},
    method : "get"
  }).then(function(response){
    $scope.stu = response.data;
  });
})

part32-34 ControllerAS
  1. 使用方法，controller里可以不用传$scope，直接用this
    1
    2
    3
    ng-controller = "homeController as hc"
    ...
    {{hc.name}}
1
2
3
4
.when("...", {
  ...
  controllerAs: "hc"
})

  1. 嵌套controller时

    1
    2
    3
    4
    5
    6
    <div ng-controller = "hhhhController as hc">
      {{hc.name}}
      <div ng-controller = "aaaaController as ac">
        {{ac.name}} - {{hc.name}}
      </div>
    </div>

  2. controllerAS和$scope的区别：使用$scope需要注入到controller，AS不要

part35 caseInsensitiveMatch & inline template

  1. caseInsensitiveMatch: url可以不区分大小写

    • 单个链接

      1
      2
      3
      .when("/xxx",{
          caseInsensitiveMatch : true;
      })

    • 所有链接

      1
      $routeProvider.caseInsensitiveMatch = true;

  2. inline template
    templateUrl引用外部页面，换成template可以是inline的。

    1
    template: "<h1>...</h1>"
part36 reload

只刷新部分数据，不重新加载整个ng-app。controller参数加上$route

1
2
3
$scope.reloadData = function(){
  $route.reload();
}

part37 $scope & $rootscope
  1. $scope：只针对当前controller
  2. $rootscope：是global的，所有controller可用
  • copyright: please indicate the source.