angularjs - 如何让 Angular JS 使用哈希 URL 来表示操作？

Question

TL;DR;

我编写了一个程序，它使用 DOM 操作和 jQuery 来响应用户在哈希 URL 中输入逗号分隔的值列表，并希望在 Angular 中执行此操作。

长版本

我一直在业余时间断断续续地编写一个程序，用于绘制分形图像，例如著名的曼德尔布罗特分形。这是网址:http://danielsadventure.info/html5fractal/docs/intro.html 。我这样做是为了通过 Canvas 元素和 Web Worker 等功能来展示我的 HTML5 肌肉。该程序运行良好。这是我的程序中“Negabrot”分形的渲染图像:

最近，我一直在自学 Angular，并且决定使用 Angular 而不是 jQuery 重写 Javascript。我再次将其作为练习。

Angular 确实是一个非常合适的工具，因为用户可以使用多种形式来描述要绘制的分形图像。我能够使用 Angular 将模型绑定(bind)到表单，并摆脱我之前使用的 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 发送给其他人，他们就可以画出同样的东西；简单易行!

为了实现此目的，我监听一个表明哈希 URL 已更改的事件，并通过更新表单上的配置来响应它，再次使用老式的 DOM 操作。

我之前在 StackOverflow 上询问如何响应哈希 URL，我被引导到 ngRoute。 ngRoute 看起来非常有用，但看起来它主要与模板和 Controller 相关联。

在我的程序中，我不需要加载任何额外的模板。我所需要的只是通过更新配置并绘制新的分形来响应新的哈希 URL。当用户手动更新配置并绘制新的分形时，我还想使用相同的哈希 URL 进行更新。

简而言之，我想要发生的是:

当用户输入新的哈希 URL 时，程序应通过更新绑定(bind)到输入的模型来响应，以便表单值发生变化。

当用户手动更改输入并单击按钮再次绘制时，应使用新配置更新哈希 URL。

Answer 1

与 angular 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 属性中，您可以指定参数。我只选择了您的一些参数。

$stateParams 服务将注入(inject)在 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 的事情。我只是在状态 Controller 中添加所有内容以保持演示简单。 您可以将该指令添加到 fractal.html 部分。

请查看下面或此 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>