角ui.router：无视图刷新更新网址 [英] Angular-ui.router: Update URL without view refresh

问题描述

我有$ P $的角度SPA psents各种建议名单，以及谷歌地图的位置，基于一些餐厅的数据不同的削减（见的 m.amsterdamfoodie.nl ）。我想这些名单有自己的网址。为了让谷歌抓取我用的是不同的列表＆LT;一个方式＆gt; 为offcanvas导航标记

I have an Angular SPA that presents a variety of recommendation lists, and a Google Map of locations, based on different cuts of some restaurant data (see m.amsterdamfoodie.nl). I want each of these lists to have their own URL. In order for Google to crawl the different lists I use <a> tags for the offcanvas navigation.

在present的＆LT; A＆GT; 标记导致刷新视图，这是非常明显的与地图

At present the <a> tag causes a view refresh, which is very noticeable with the map.

• 我可以prevent这一点使用 NG-点击和 $事件。preventDefault（） （见下文code段），但我需要实现更新浏览器URL的一种手段。


• 但是，在尝试角的 $状态或浏览器的 history.pushstate ，我最终触发状态变化和视图刷新...！

• I can prevent this using ng-click and $event.preventDefault() (see code snippets below), but then I need to implement a means of updating the browser URL.
• But in trying Angular's $state or the browser's history.pushstate, I end up triggering state changes and the view refresh...!

我的问题因此我怎么可以更新模型和URL，但没有刷新视图？（也是<一见href=\"http://stackoverflow.com/questions/20578840/angular-ui-router-how-can-i-update-the-url-without-refreshing-everything\">Angular/UI-Router - 我如何可以更新URL不需要刷新）

我已经尝试了很多方法，目前拥有这个网站

I have experimented with a lot of approaches and currently have this html

<a href="criteria/price/1" class="btn btn-default" ng-click="main.action($event)">Budget</a>

在控制器：

this.action = ($event) ->
    $event.preventDefault()
    params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)

    # seems to cause a view refresh
    # history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);

    # seems to cause a view refresh
    # $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}

    updateModel(...)

和，什么是我认为正在发生的事情是，我触发 $ stateProvider code：

And, what is I think is happening is that I am triggering the $stateProvider code:

angular.module 'afmnewApp'
.config ($stateProvider) ->
  $stateProvider
  .state 'main',
    url: '/'
    templateUrl: 'app/main/main.html'
    controller: 'MainCtrl'
    controllerAs: 'main'
  .state 'criteria',
    url: '/criteria/:criteria/:q'
    templateUrl: 'app/main/main.html'
    controller: 'MainCtrl'
    controllerAs: 'main'

一个可能的线索是，与code。如果我加载例如以下<一href=\"http://afmnew.herokuapp.com/criteria/cuisine/italian\">http://afmnew.herokuapp.com/criteria/cuisine/italian那么该视图刷新为您导航，而如果我加载 http://afmnew.herokuapp.com/ 没有刷新，但没有网址更新替代。我不明白为什么会发生在所有。

One possible clue is that with the code below if I load e.g. http://afmnew.herokuapp.com/criteria/cuisine/italian then the view refreshes as you navigate, whereas if I load http://afmnew.herokuapp.com/ there are no refreshes, but no URL updates instead. I don't understand why that is happening at all.

推荐答案

根据我们的previous讨论中，我想给你一些想法，如何使用 UI-路由器在这里。我相信，我正确地理解你的挑战...有工作示例。如果没有充分的套房，请把它作为一些启示

Based on our previous discussions, I want to give you some idea, how to use UI-Router here. I believe, I understand your challenge properly... There is a working example. If this not fully suites, please take it as some inspiration

的免责声明：随着plunker，我是不是能够做到这一点： http://m.amsterdamfoodie.nl/，但原则应该是在例如的类似的

DISCLAIMER: With a plunker, I was not able to achieve this: http://m.amsterdamfoodie.nl/, but the principle should be in that example similar

所以，有一个状态定义的（我们只有两个状态）的

So, there is a state definition (we have only two states)

  $stateProvider
    .state('main', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'tpl.layout.html',
            controller: 'MainCtrl',
          },
          'right@main' : { templateUrl: 'tpl.right.html',}, 
          'map@main' : {
            templateUrl: 'tpl.map.html',
            controller: 'MapCtrl',
          },
          'list@main' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
    .state('main.criteria', {
        url: '^/criteria/:criteria/:value',
        views: {
          'map' : {
            templateUrl: 'tpl.map.html',
            controller: 'MapCtrl',
          },
          'list' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
}];

这将是我们主要的 tpl.layout.html

This would be our main tpl.layout.html

<div>

  <section class="main">

    <section class="map">
      <div ui-view="map"></div>
    </section>

    <section class="list">
      <div ui-view="list"></div>
    </section>

  </section>

  <section class="right">
    <div ui-view="right"></div>
  </section>

</div>

我们可以看到，主状态并针对主要的国家的这些嵌套的看法：的viewName @主，例如正确@主

另外，子视图， main.criteria 并注入的布局的意见。

Also the subview, main.criteria does inject into layout views.

的它的URL与号开始的 ^ （网​​址：'^ /标准/：标准/：值'），这允许有 / 削减为孩子的

Its url starts with a sign ^ (url : '^/criteria/:criteria/:value'), which allows to have / slash for main and not doubled slash for child

和也有控制器，他们在这里有点幼稚，但他们应该表明，对背景可能是真实的数据负载（基于标准）。

And also there are controllers, they are here a bit naive, but they should show, that on the background could be real data load (based on criteria).

这里最重要的东西是，父 MainCtrl 创建 $ scope.Model = {} 。此属性将是父母和子女之间共享（感谢继承）。这就是为什么这一切都将工作：

The most important stuff here is, that the PARENT MainCtrl creates the $scope.Model = {}. This property will be (thanks to inheritance) shared among parent and children. That's why this all will work:

app.controller('MainCtrl', function($scope)
{
  $scope.Model = {};
  $scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];  
  $scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl', function($scope, $stateParams)
{
  $scope.Model.list = []
  $scope.Model.data
    .sort( $scope.Model.randOrd )
    .forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})
  $scope.Model.selected = $scope.Model.list[0];
  $scope.Model.select = function(index){
    $scope.Model.selected = $scope.Model.list[index];  
  }
})

这应该得到一些想法，我们如何可以使用UI-路由器为我们提供的功能：

This should get some idea how we can use the features provided for us by UI-Router:

• 绝对路线（^）


• Scope通过视图层次只有
继承

• View名称 - 相对与绝对名称

• Absolute Routes (^)
• Scope Inheritance by View Hierarchy Only
• View Names - Relative vs. Absolute Names

在这里检查上述提取 中的工作的例子

Check the above extract here, in the working example

拓展新的plunker 这里

Extend: new plunker here

如果我们不希望有地图视图重新创建，我们就可以省略形式子状态DEF：

If we do not want to have map view to be recreated, we can just omit that form the child state def:

.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      // 'map' : {
      //  templateUrl: 'tpl.map.html',
      //  controller: 'MapCtrl',
      //},
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
      },
    },
  })

现在我们的地图视图将只是recieving变化模型（可以观看），但视图和控制器将不会被重新呈现

Now our map VIEW will be just recieving changes in the model (could be watched) but view and controller won't be rerendered

此外，还有另外一个plunker http://plnkr.co/edit/y0GzHv?p=$p它使用了 controllerAs

ALSO, there is another plunker http://plnkr.co/edit/y0GzHv?p=preview which uses the controllerAs

.state('main', {
    url: '/',
    views: {
      '@' : {
        templateUrl: 'tpl.layout.html',
        controller: 'MainCtrl',
        controllerAs: 'main',        // here
      },
      ...
    },
  })
.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
        controllerAs: 'list',      // here
      },
    },
  })

和可能这样使用：

<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>

最后plunker是这里

这篇关于角ui.router：无视图刷新更新网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！