AngularJS Restful Routing

Question

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

恩.

www.foo.com/bar/baz/1

然后应用程序将使用baz控制器/类中的方法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', {…})？

编辑2 Per 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的doc中注意到以下内容:

templateUrl - {string = | function()=} - 返回应由ngView使用的html模板路径的路径或函数.

如果templateUrl是一个函数,它将使用以下参数调用:

•{Array.<Object>} - 通过应用当前路由从当前$ location.path()中提取的路由参数

编辑:设置templateUrl为函数的选项是不稳定1.1.2版本的一部分:#1963(但从2013-02-07开始不起作用).

有关在AngularJS的Github上添加此功能的讨论:#1193 #1524,但我无法判断它是否实际实现(在上面引用的Dash文档中,它看起来像是,以及网站上的文档尚未更新).

编辑3为了澄清我想要发生的事情(按照李的要求),简单来说,我想去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再次使用控制器,但这次自动调用它的map方法并提供... map.html(因为地图是在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 类型操作。然后使用资源和视图参数加载模板。

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

所有这些都可以使用单个控制器/服务并动态生成服务和视图 URL 来完成。

任何自定义的内容都需要自定义控制器以及自定义路由和服务方法。我也许可以举一个例子，但今晚不行。

Answer 2

现在 0.2.8 可以实现这一点ui-router：

\n\n

$stateProvider\n    .state(\'base\', {\n        url: \'/:resource/:collection/:id\',\n        controllerProvider: function( $stateParams )\n        {   // assuming app.controller(\'FooCtrl\',[\xe2\x80\xa6])\n            return $stateParams.collection + \'Ctrl\';\n        },\n        templateUrl: function( $stateParams )\n        {\n            return \'/partials/\' + $stateParams.collection + \'.html\';\n        }\n    });\n

\n\n

但为了利用$state.includes()导航菜单，这可能会更好：

\n\n

$stateProvider\n    .state(\'base.RESOURCE_NAME1\', {\n        url: \'/:collection/:id\',\n        controllerProvider: function( $stateParams )\n        {   // assuming the convention FooCtrl\n            return $stateParams.collection + \'Ctrl\';\n        },\n        templateUrl: function( $stateParams )\n        {\n            return \'/partials/\' + $stateParams.collection + \'.html\';\n        }\n    }).state(\'base.RESOURCE_NAME2\', {\n        url: \'/:collection/:id\',\n        controllerProvider: function( $stateParams )\n        {   // assuming the convention FooCtrl\n            return $stateParams.collection + \'Ctrl\';\n        },\n        templateUrl: function( $stateParams )\n        {\n            return \'/partials/\' + $stateParams.collection + \'.html\';\n        }\n    });\n

\n\n

state上面的内容可以通过一个循环来简化，以从资源数组构建 s （ $stateProvider基本上支持在任何时候添加状态）：

\n\n

var resources = [ \'r1\', \'r2\', \'\xe2\x80\xa6\' ];\n\nfor ( var r = resources.length-1; r >=0; r-- )\n{\n    var name = resources[r];\n    $stateProvider.state(\'base.\'+name, {\n        \xe2\x80\xa6\n    });\n}\n

\n\n

警告ui-router 并不真正支持可选状态参数（计划用于 v0.4）

\n