angular ui路由器-多次使用相同的templateUrl和控制器

angular ui router - using the same templateUrl and controller multiple times

本文关键字：templateUrl 控制器 路由器 ui angular      更新时间：2023-09-26

我第一次使用AngularUI Router框架，想知道如何改进下面的代码。

基本上，这一切都很好，但最终（在我正在进行的项目中）会有20个或更多的问题，我不想说同样的"templateUrl"&amp控制器’。

以下是我的意思的精简版本：

index.html

<div ui-view></div>

问题.html

<a ui-sref="q1">q1</a>
<a ui-sref="q2">q2</a>
<div ng-show="$state.current.name === 'q1'">q1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere.</div> 
<div ng-show="$state.current.name === 'q2'">q2. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>

app.js

angular.module('foo', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('q1', {
        url: '/',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'
    })
    .state('q2', {
        url: '/q2',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'   
    });     
})
.controller('questionsCtrl', function($scope, $state) {
    $scope.$state = $state;
});
;

我想遵循最佳实践，尽可能地保持app.js的小/可管理性。

干杯

只需使用此处描述的URL参数https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-参数

然后您可以有一个状态，例如：

.state('question', {
    url: '/:questionID',
    templateUrl: 'questions.html',
    controller: 'questionsCtrl'   
});

您可以使用需要注入控制器的$stateParams访问questionID。

在聊天中进行了一些讨论后，我们能够使用状态参数构建一个函数型plunker。

html:

<a ui-sref="question({questionID:'q1'})">q1</a>
<a ui-sref="question({questionID:'q2'})">q2</a>
{{questionID}}
<div ng-show="questionID == 'q1'">q1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere.</div> 
<div ng-show="questionID == 'q2'">q2. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>

app.js:

.state('question', {
        url: '/:questionID',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'
})
.controller('questionsCtrl', function($scope, $stateParams) {
    
    //$scope.$state = $state;
    $scope.questionID = $stateParams.questionID;
    
});

聊天记录在https://chat.stackoverflow.com/transcript/60150

相关文章：