AngularJs ui-router任务完成。

hey guys I have this task, and need some help here because it's challenging, can you give me some hints

嘿，伙计们，我有这个任务，需要一些帮助因为这很有挑战性，你能给我一些提示吗

1) Use ui-route to create at least 3 pages that share a single state for loading them. To achieve this, have state url parameters by dynamic and load views/controllers based on those parameters. Create a method which can load the controller and template of each page on demand, when route changes. Make the state url option have 2 parameters with the second one optional (this can be done by using regexp on the url parameters) so that one of the pages can load additional information inside another ui-view based on that parameter.

1)使用ui-route创建至少3个共享单个状态的页面来加载它们。要实现这一点，可以使用动态url参数和基于这些参数的load视图/控制器。创建一个方法，当路径改变时，可以根据需要加载每个页面的控制器和模板。让状态url选项有两个参数，第二个参数是可选的(这可以通过在url参数上使用regexp来实现)，以便其中一个页面可以根据该参数在另一个ui视图中加载其他信息。

$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)
            }})

I already am in here, I have a clue on how a single state could be shared if a do a ng-repeat in front-end and change the url paramaters, but how can I dynamically load views and controllers based on those paramteres ?

我已经在这里了，我有了一个线索，如果在前端执行ng-repeat并更改url参数，如何能够根据这些参数动态加载视图和控制器呢?

Thank you !!

谢谢你! !

2 个解决方案

#1

you can not use same route for different states. I will ceate only one route like.

对于不同的状态，不能使用相同的路由。我只走一条路。

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

Then I will create another folder called partial and put all views there 1.html 2 n 3.

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

we can have conditional

我们可以有条件

<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

thank you for all the support, and from your help and guidence I managed to do it like this:

谢谢你们的支持，在你们的帮助和指导下，我做到了:

$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;
          }})
        }

I do a lot of panic :D :D

D:D

#1