javascript - AngularJS Restful 路由

Question

我正在尝试使用 Restful/Ruby 约定构建我的应用程序 /<resource>/[method]/[id] .我以前在使用像 CodeIgniter 这样的服务器端 MVC 框架时是如何根据 URI 动态路由的:

例如

www.foo.com/bar/baz/1

然后该应用程序将使用方法 baz在 Controller /类中 bar并返回 views/bar/baz.php (填充了来自 bar->baz 的数据)

我想在 Angular 中做同样的事情，但我不确定它是否支持这个(如果支持，我不确定具体如何去做)。目前我正在使用 $routeProvider的 when指定每个案例的方法。 $location.path()看起来它可能有我需要的东西，但我认为我不能在 app.js 中使用它(在 config() 内)。

我想做的是这样的:

.config([
  '$routeProvider', function($routeProvider) {
    $routeProvider
    .when(//<resource> controller exists
      resource+'/'+method, {
        "templateURL": "views/" + resource + "/" + method + ".html",
        "controller":  resource
      }
    ).otherwise({ "redirectTo":"/error" });
  }
]);

路由器会自动调用合适的方法。

编辑 另外，为什么 $routeProvider当我指定 when('/foo/bar', {…}) 时吓坏了？

EDIT 2 根据 Lee 的建议，我正在考虑做这样的事情:

$routeProvider
  .when(
    '/:resource/:method/:id', {
      "templateUrl": function(routeParams){
        var path = 'views/'+routeParams.resource+'/';
        return ( typeof routeParams.method === 'undefined' ) ?
          path+'index.html' : path+routeParams.method+'.html';
      },
      "controller": RESOURCE
  })
  .otherwise({redirectTo: '/error'});

我在 $routeProvider 中注意到以下内容的文档:

templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.

If templateUrl is a function, it will be called with the following parameters:

• {Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route

编辑:选项设置templateUrl一个功能是不稳定的一部分1.1.2构建:#1963 (但从 2013 年 2 月 7 日开始不起作用)。

在 AngularJS 的 Github 上有关于添加此功能的讨论:#1193 #1524 , 但我不知道它是否真的实现了(在上面引用的 Dash 的文档中，它看起来已经实现了，而且网站上的文档还没有更新)。

EDIT 3 为了阐明我想要发生的事情(根据 lee 的要求)，用最简单的话来说，我想去 www.foo.com/index.html#/people

Angular 应该使用 Controller people , 自动调用其 index方法，应该服务

./views/people/index.html
./views/people/map.html

此外，如果我转到 www.foo.com/index.html#/people/map

Angular 应该使用 people Controller ，但这次自动调用它的 map方法并提供 ...map.html(因为 map 是在 url 中指定的)

./views/people/index.html
./views/people/map.html

那么，如果我去

www.foo.com/index.html#/widgets

Angular 应该服务

./views/widgets/index.html
./views/widgets/details.html

路由器的代码应该非常通用——我不应该指定 .when()对于每条路线。

Answer 1

再考虑一下。对于那些通用的 CRUD/REST 类型操作，您可以只使用一个 Controller 。然后使用资源和 View 参数加载模板。

• 创建
  • #/foo/create/0
  • 它有自己的表单模板“/views/foo/create.html”，0 os 只是一个占位符。
  • 在提交时，您将在 Controller 上调用一个方法 ng-click="save()"，该方法将通过 POST "/rest/foo"发送到服务器。
• 阅读
  • #/foo/view/1
  • 同样，模板“/views/foo/view.html”只是数据 View
  • 您可以使用 GET "/rest/foo/1"调用服务方法从您的服务器获取数据
• 更新-#/foo/编辑/1
  • 可以使用与创建相同的模板，也可以根据需要使用不同的“/views/foo/edit.html”。
  • 同时使用 GET "/rest/foo/1"拉取数据
  • 使用 PUT "/rest/foo/1"提交数据
• 删除
  • #/foo/删除/1
  • 服务方法会调用 DELETE "/rest/foo/1"
  • 我认为您不需要为此使用散列，但您可以使用散列，因为 Controller 实际上可以进行验证或任何您喜欢的操作来确认删除。也许有一个名为“/views/foo/delete.html”的 View 询问您是否要删除记录。然后你可以在某处的按钮上设置 ng-click="delete(itemid)"通过 ajax 删除项目。

所有这些都可以使用单个 Controller /服务并动态生成服务和 View url 来完成。

任何自定义的内容都需要自定义 Controller 以及自定义路由和服务方法。我可能可以举一个例子，但不是今晚。