learnning angular.js(3)

Comments

3月7日

part38 取消窗口跳转

点击链接跳转窗口时显示：是否确认跳转

1
2
3
4
5
6
//controller中
$scope.$on("$routeChangeStart",function(event, next, current){
  if (!confirm("info: eg. Are you sure...?")){
    event.preventDefault();
  }
});

part39 route change prevent

点击链接跳转时会有4个事件，顺序为

  1. $locationChangeStart
  2. $routeChangeStart
  3. $routeChangeSuccess
  4. $locationChangeSuccess
part40 搜索

根据url中的参数搜索，步骤有点多，详见视频

part41 route-resolve

可以解决页面抖动问题（Angular.js默认路由切换时被路由页面的元素会立即显示出来，然后再显示数据，会导致页面被渲染两遍）

1
2
3
4
5
6
7
8
9
10
11
//.when里
resolve: {
  stuList: function($http){
    return : $http.get("...")
                  .then(function(response){
                      return response.data;
                  })
  }
}
// 这样可以等等到数据后再进行页面跳转。按需使用
// 如果$http.get没有成功，这个跳转会被取消

part42 ui-router
  1. router：和url绑定
  2. ui-router：在url不变的时候view也可以变化
    • 需要另外引入ui-router的js
    • module要加”ui.router”
    • ng-view要改成ui-view
part43 配置ui-router

在$config加入$stateProvider, $router不需要了

1
2
3
4
5
6
7
$stateProvider
  .state("stateName",{
      url: "/xxx",
      templateUrl: "/xx",
      controller: "xxx",
      controllerAS: "xxx"
  })

reload方法也要注意修改，使用

1
$state.reload();

html里,eg.

1
<a ui-sref = "home">HOME</a>

part44 url传参数

  1. state里的url改成类似这样的：

    1
    url: "/stus/:id"

  2. 里都用ui-sref并且用类似function的方法传参数

    1
    <a ui-sref = "stuDetails({{id: stu.id}})">stuA</a>

  3. http请求的方法里

    1
    params: {id: $stateParams.id}
part45

根据url中的参数搜索，步骤有点多，详见视频

part46 忽略url大小写

$config里

1
$urlMatcherFactoryProvider.caseInsensitive(true);

part47 默认路径

$config里

1
2
3
$urlRouteProvider.otherwise("/home");

//routeProvider里的.otherwise不要了

3月8日

part48 ui-route custom data

在state里加上data即可

1
2
3
4
5
6
.state("stateName",{
  ...
  data : {
    customData: ",,,"
  }
})

controller里加上$state

1
2
3
4
$scope.xxData = $scope.data.customData;

//访问其他state的data
$scope.xxData = $scope.get("stateName").data.customData;

part49

同part27，步骤太多详见视频

part50 ui-route state css

高亮选中的sidebar

  1. 写一个css state，类名比如叫active
  2. 在html要高亮的位置加上 ui-sref = “active”
part51 ui-router nested views
part52 ui-router muti-named views
part53 两个route的不同
  1. ng-route
    • 基于url
  2. ui-router
    • 基于app的状态
    • nested states & views
    • muti-named views
  • copyright: please indicate the source.