current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using the AngularUI Router framework for the first time and wondered how I could improve the below code.

Basically this all works fine but eventually (in the project I am working on) there will be 20 questions or more and I dont want to state the same 'templateUrl' & 'controller' for every state.

The below is a slimmed down version of what I mean:

index.html

<div ui-view></div>

questions.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;

});

;

I would like to follow best practice and keep the app.js as small/manageable as possible.

Cheers

share|improve this question
    
How is it possible that they use the same templateUrl/controller if they are different questions? –  Wawy Aug 28 at 8:13
    
you are really approaching this in the wrong way, but it's a very in depth topic that deserves more than a single post. I set up a chat room chat.stackoverflow.com/rooms/60150/… if you want to discuss what you are doing. –  Andrew Counts Aug 28 at 8:20
    
@Wawy Because the questions are coming from a json and are in a big ng-repeat (ive stripped it down for ease) Having a url for each question is needed for when people click back or need a link to a specific q. –  Adi Aug 28 at 8:26

2 Answers 2

up vote 1 down vote accepted

After a bit of discussion in chat, we were able to build a functional plunker using state parameters.

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;

});

transcript of the chat is at http://chat.stackoverflow.com/transcript/60150

share|improve this answer
up vote 2 down vote

Just use URL parameters as described here https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

You can then have a state such as:

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

You can access the questionID using $stateParams which you need to inject into your controller.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.