角/ UI-路由器 - 如何更新不需要刷新的网址是什么？ [英] Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?

问题描述

我是新来的两个角和UI路由器。当有人选择了一个模型，我的控制器执行标准的SHOW方法，我只是想更新的URL包括模型的ID，而无需刷新页面，并继续与我原来的看法。我不知道如何做到这一点...

  $ stateProvider
        .STATE（'citylist'，{
          网址：/，
          templateUrl：意见/ index.html的
        }）
        .STATE（'cityshow'，{
          网址：/城市/：ID
          templateUrl：意见/ index.html的
        }）angular.module（'app.system'）。控制器（'索引控制器'，['$范围，环球，城市，$ stateParams'，'$位置'，函数（$范围，城市，$ stateParams ，$位置）{    $ scope.loadTown =功能（ID）{
        Cities.get（{ID：ID}，功能（市）{
             $ scope.city =城市
             //变更网址
             //同一视图内做事...
        }）;
    };
}）;＆LT;按钮NG点击=loadTown（123456）＆GT;芝加哥＆LT; /按钮＆GT;
 

解决方案

您已经使用了code片段是有点远从正确的 UI路由器的设置。我建议你​​，检查此演示应用程序：的http：// angular-ui.github.io/ui-router/sample/#/contacts/1 。在这里，我们可以看到在列表的是固定，而详细信息的不带任何页面刷新更改。

这个例子中的code在这里下载 https：//开头github.com/angular-ui/ui-router/tree/master/sample 。

我应该有很大的帮助，以了解如何的（除的维基）的是这样的code段：的 state.js 。加载演示，通过这种评价的解释读取。和 UI路由器才有意义......

I'm new to both Angular and the ui-router. When someone selects a model and my controller performs a standard SHOW method, I simply want to update the URL to include the model's ID without refreshing the page, and continue on with my original view. I'm not sure how to do this...

$stateProvider
        .state('citylist', {
          url: "/",
          templateUrl: "views/index.html"
        })
        .state('cityshow', {
          url: "/city/:id",
          templateUrl: "views/index.html"
        })

angular.module('app.system').controller('IndexController', ['$scope', 'Global', 'Cities', '$stateParams', '$location', function ($scope, Cities, $stateParams, $location) {

    $scope.loadTown = function(id) {
        Cities.get({id: id }, function(city) {
             $scope.city = city
             // Change URL
             // Do things within the same view...
        });
    };
});

<button ng-click="loadTown(123456)">Chicago</button>

解决方案

The code snippets you've used are a bit far from the correct ui-router settings. I would suggest to you, check this demo application: http://angular-ui.github.io/ui-router/sample/#/contacts/1. Here we can see how the List is "fixed" while Detail is changed without any page refresh.

The code of this example download here https://github.com/angular-ui/ui-router/tree/master/sample.

What should help a lot to understand HOW TO (except the wiki) was this code snippet: state.js. Load the demo, read through this commented explanation. And ui-router will make sense...

这篇关于角/ UI-路由器 - 如何更新不需要刷新的网址是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！