AngularJs ui-router 任务完成答案

【问题标题】：AngularJs ui-router task for completionAngularJs ui-router 任务完成
【发布时间】：2016-07-31 13:33:43
【问题描述】：

大家好，我有这个任务，在这里需要一些帮助，因为它具有挑战性，你能给我一些提示

1) 使用 ui-route 创建至少 3 个共享单一状态的页面来加载它们。要实现这一点，请通过动态获取状态 url 参数，并根据这些参数加载视图/控制器。创建一个方法，当路由发生变化时，可以按需加载每个页面的控制器和模板。使状态 url 选项有 2 个参数，第二个参数是可选的（这可以通过在 url 参数上使用正则表达式来完成），以便其中一个页面可以根据该参数在另一个 ui-view 中加载附加信息。

$urlRouterProvider.otherwise('/');
        $stateProvider
          .state('student',{
            url: "/student/:id",
            templateUrl: 'partials/1.html',
            controller: function ($stateParams) {
                alert(1)
            }})
            .state('studentTwo',{
            url: "/student/:id",
            templateUrl: 'partials/2.html',
            controller: function ($stateParams) {
                alert(2)
            }})
            .state('studentThree',{
            url: "/student/:id",
            templateUrl: 'partials/3.html',
            controller: function ($stateParams) {
                alert(3)
            }})

我已经在这里了，如果在前端执行 ng-repeat 并更改 url 参数，我知道如何共享单个状态，但是如何根据这些动态加载视图和控制器参数？

谢谢！！

【问题讨论】：

阿隆你为什么这么刻薄？也许他只需要一些提示......
@AlonEitan，我已经在处理它了，是的，你是对的，因为我没有提供代码，所以我为此道歉。
@gentos：你可以浏览 ui-router 文档。他们有工作人员，并记录了每一步。我相信你可以自己做。即使你是 ui-router 的新手，实现起来也不是什么难事。
@gentos 当您还提供代码并向我们展示您已经尝试过的内容时，可以提出问题。现在你的问题很好:) 谢谢

标签： javascript angularjs angular-ui-router

【解决方案1】：

您不能对不同的州使用相同的路线。我只会选择一条路线。

$urlRouterProvider.otherwise('/');
    $stateProvider
      .state('student',{
        url: "/student/:id",
        templateUrl: 'main.html',
        controller: function ($stateParams) {
            alert(1)
        }})

然后我将创建另一个名为 partial 的文件夹并将所有视图放在那里 1.html 2 n 3。

我们可以有条件的

<ng-include src="'1.html'"></ng-include>//condition1
<ng-include src="'2.html'"></ng-include>//condition2
<ng-include src="'3.html'"></ng-include>//condition3

【讨论】：

【解决方案2】：

感谢您的所有支持，在您的帮助和指导下，我设法做到了：

$urlRouterProvider.otherwise('/');
        $stateProvider
          .state('student',{
            url: "/student/:id",
            templateUrl: function ($stateParams){
                return 'partials/' + $stateParams.id + '.html';
                },
            controllerProvider: function($stateParams) {
              var ctrlName = $stateParams.type + "Controller";
              return ctrlName;
          }})
        }

我很恐慌 :D :D

【讨论】：

所以我们根据 params.id 给 html 文件动态！酷