发表于: 2017-05-31 22:04:26

2 1035


今天完成的事情:

学习了$resouce,ui-view,controller as,完成了任务十大体上的功能 :上下线搜索新增上传图片

明天计划的事情:

用复盘的要求改写任务十,具体来说就是使用controller as替换$http,$resource封装$http


遇到的问题:

图片封装的指令里面复杂的参数调用,指令和服务的混用

$http通常用于和RESTful server-side交互,要求接口RESTful话,'$resource(url)'返回的不Promise,也是一个资源对象,你可以对一个资源对象进行get、query、save、delete等操作。

$resouce用法示例:

var User = $resource('/user/:userId', {userId:'@id'}); // 返回一个资源对象/* 操作资源 */User.get({userId:123}, function(user) {  // do something});/* 如果想用Promise风格 */User.get({userId:123}).$promise.then(function(user) {
  $scope.user = user;
});

如上图,我如何像$http那样操作接口?$http有method,看着直接明了,这个$resource啥都看不到
收获:

规划好任务十,加上时间插件,旁边列表,封装好分页大体上复盘后台就没那么累

  1. <div ng-controller="MainController">    
  2.   {{ someObj.someProp }}  
  3. </div>    
[javascript] view plain copy print?
  1. app.controller('MainController'function ($scope) {    
  2.   $scope.someObj = {  
  3.     someProp: 'Some value.'  
  4.   };  
  5. });  


  1. <div ng-controller="MainController as main">    
  2.   {{ main.someProp }}  
  3. </div>   
[javascript] view plain copy print?
  1. app.controller('MainController'function () {    
  2.   this.someProp = 'Some value.'  
  3. });  

controller as 用法同上图,解决了到处都是$scope让人头皮发麻分不清变量的问题,同时解决了作用域继承的问题

UI Router 中有三种方式激活一个路由: 
(1)$state.Go():优先级较高的便利方式 
(2)ui-sref:点击包含此指令跳转 

此指令必须绑定到<a>标签,如果该路由有对应的关联URL,其通过$state.href()自动生成和更新href属性。

<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>
  • 1
  • 1

(1)ui-sref-active=”active” 该路由激活,则对应增加active样式名称

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li></ul>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

当路由是“pp.user”,且包含参数user值为’bilbobaggins’,会变成如下

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li></ul>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

(2)ui-sref-opts 传递参数

<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

主要为了解决地址是变量,需要传递参数的情况
(3)url:url导航

简单易懂好操作


返回列表 返回列表
评论

    分享到