如何讓Angular JS使用哈希URL來表示一個動作？

Question

TL; DR;

我編寫了一個程序，它使用DOM操作和jQuery來響應用戶在hash-URL中輸入以逗號分隔的值列表，並希望在Angular中執行此操作。

長版

在業余時間，我一直在寫一個程序，打開和關閉，繪制分形圖像，如着名的Mandelbrot分形圖。 這是URL： http ： //danielsadventure.info/html5fractal/docs/intro.html 。 我這樣做是為了使用canvas元素和web worker等功能來展示我的HTML5肌肉。 該計划效果很好。 這是我的程序中“Negabrot”分形的渲染圖像：

最近，我一直在教自己Angular，我決定使用Angular而不是jQuery重寫Javascript。 再一次，我這樣做是為了練習。

實際上，Angular是一種非常合適的工具，因為用戶可以使用許多形式來描述要繪制的分形圖像。 我能夠使用Angular將模型綁定到表單並刪除我之前使用的DOM操作代碼。 好極了！ Angular太棒了！

我的程序的另一個特性是，我不清楚如何將其轉換為與Angular一起使用。 我的程序是單頁應用程序。 它只做一件事：繪制分形圖像。 但是，我使用哈希URL來跟蹤正在繪制的分形以及用於繪制分形的配置。 例如，您可以按照以下URL查看Multibrot-5分形的放大部分：

http://danielsadventure.info/html5fractal/index.html#103,0.41000000000000014,1.0299999999999998,0.41999999999999993,1.04,2,1261,true,z%20 ^％205％20％2B％20c，-2,2，-2 ，2

如您所見，URL由逗號分隔值列表組成，這些值描述了程序配置的不同方面。 如果你用它繪制一些美麗的東西，你可以簡單地向其他人發送URL，他們可以繪制相同的東西; 易如反掌！

為了實現這一點，我通過更新表單上的配置，再次使用老式的DOM操作，監聽一個指示hash-URL已更改並響應它的事件。

我之前在StackOverflow上詢問如何響應hash-URL，我被引導到ngRoute。 ngRoute看起來非常有用，但它看起來主要與模板和控制器相關聯。

在我的程序中，我不需要加載任何其他模板。 我只需要通過更新配置和繪制新的分形來響應新的哈希URL。 當用戶手動更新配置並繪制新的分形時，我還想用相同的更新哈希URL。

簡而言之，我想要發生的是：

當用戶輸入新的哈希URL時，程序應通過更新綁定到輸入的模型來響應，以便更改表單值。

當用戶手動更改輸入並單擊按鈕再次繪制時，應使用新配置更新散列URL。

Answer 1

使用角度ui-router你可以這樣做：

angular.module('demoApp', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        //
        // For any unmatched url, redirect to /fractal
        $urlRouterProvider.otherwise("/fractal?minr=-0.29&maxr=-0.27&mini=-0.64");
        //
        // Now set up the states
        $stateProvider
           .state('fractal', {
              url: '/fractal?minr&maxr&mini',
              templateUrl: 'app/partials/fract.html',
              controllerAs: 'fract',
              controller: function($stateParams) {
                  console.log($stateParams);
                  var fract = new Fractal($stateParams);
                  this.getSettings = fract.getSettings;
              }
       });
});

在url屬性中，您可以指定params。 我剛剛選了一些你的參數。

$stateParams服務將注入在url中傳遞的所有參數。

以下只是為了說明我是如何實現Fractal類的：

function Fractal(settings) {
    var that = this;
    this.settings = settings;

    this.getSettings = function() {
        return that.settings;
    }
}

部分fract.html看起來像這樣（它只輸出設置）：

<h1>Drawing fractal in this state</h1>
<hr/>
{{fract.getSettings()|json}}

在你的應用程序中，你可能會為你的分形類創建一個指令，因為你正在做DOM的東西。 我只是在狀態控制器中添加所有內容以保持演示簡單。 您可以將指令添加到fractal.html partial。

請看下面的演示或這個jsfiddle 。 請注意，您沒有在jsfiddle中看到url參數。

在您的應用中，它們將出現在以下屏幕截圖中：

 angular.module('demoApp', ['ui.router']) .config(function($stateProvider, $urlRouterProvider) { // // For any unmatched url, redirect to /state1 $urlRouterProvider.otherwise("/fractal?minr=-0.29&maxr=-0.27&mini=-0.64"); // // Now set up the states $stateProvider .state('fractal', { url: '/fractal?minr&maxr&mini', templateUrl: 'app/partials/fract.html', controllerAs: 'fract', controller: function($stateParams) { console.log($stateParams); var fract = new Fractal($stateParams); this.getSettings = fract.getSettings; } }); }); // here comes your fractal class function Fractal(settings) { var that = this; this.settings = settings; this.getSettings = function() { return that.settings; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> <div ng-app="demoApp"> <script type="text/ng-template" id="app/partials/fract.html"> <h1>Drawing fractal in this state</h1> <hr/> {{fract.getSettings()|json}} </script> <div ui-view></div> <!-- We'll also add some navigation: --> <a ui-sref="fractal({minr:-0.3, maxr:-0.2, mini: -0.64})">Draw fractal</a> </div> 

Answer 2

好吧我不太確定你已經擁有什么JS代碼，所以我要展示一些你可能會覺得有用的代碼片段！

這是一個關於URL的監視 - 所以每次哈希更改時都會調用此函數：

$scope.$on('$locationChangeSuccess', function(event, newState, oldState) {
  var values = $location.hash().split(','); // => [103,true,...]
  var desc = ['point1', 'boolean']; // I don't know wich values you have..

  $scope.values = {}; // values model
  angular.forEach(values, function(value, index) {
    $scope.values[desc[index]] = value; // {'point1': 103} => nested attribute
  }); 
});

然后你可以將它綁定到一個表單：

// HTML
<form ng-submit="updateHash()">
  <input ng-model="values.point1" />
</form>

// JS
$scope.updateHash = function() {
  var updatedValues = [];
  angular.forEach($scope.values, function(value) {
    updatedValues.push(value);
  }); 
  $location.hash(updatedValues); // update URL
};