javascript - AngularJs ui-router 任务完成

Question

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

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.

$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 参数，我知道如何共享单个状态，但是我如何根据这些动态加载 View 和 Controller 参数 ?

谢谢!!

Answer 1

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

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

然后我将创建另一个名为 partial 的文件夹，并将所有 View 放在那里 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