last day (14 days later) » 

Adi
8:25 AM
Hello? Didnt relaise SO had chat functionality now :)
 
chat rooms have been available for quite a while, I like using them when the case you have is a bit more difficult.
 
Adi
Just pasted this for ref in reply to @wawy
@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 just now
 
so, reading through your question, I can see how you were thinking to approach the problem you have
you have a large number of questions that you want to list, and want a static URL string for each question for permanency
 
Adi
yep (and i believe this isnt possible with the basic ng-view) so ui-view/ui-routing is the way to go?
(the questions are in one html file)
tommyd456 just posted an answer. Do you agree with this?
 
right, so the ng-show would be ok, though it would be definitely better in the long run if the questions were pulled from a data source somewhere
that's where I was going to point at to start, using parameters
 
Adi
8:32 AM
can you use ng-animate (ng-enter ng-leave) with ui-view like you can with ng-view to your knowledge?
 
yes, ui-view should have all the features of ng-view
so since the question has an answer, and it appears to be a good place to start, I think maybe you are good reading the relevant documentation there?
 
Adi
trying to work out if I need to use 'state' or 'when'?
.state('contacts.detail', {
url: "/contacts/:contactId",
templateUrl: 'contacts.detail.html',
controller: function ($stateParams) {
// If we got here from a url of /contacts/42
expect($stateParams).toBe({contactId: 42});
}
})
.when('partyDetail', {
url: '/party/:partyID/:partyLocation'
});
(taken from 2 different sites)
 
in your case, you are dynamically changing the output at the page level, not the route level
so you want the $stateParams to be passed to the page, so the page can react to the value.
 
Adi
just struggling to get anything to show now. I have (in questions.html)
<a ui-sref="question/{ questionID: 1 }">q1</a>
<a ui-sref="question/{ questionID: 2 }">q2</a>
.state('q1', {
url: '/question/:questionID/',
templateUrl: 'questions.html',
controller: 'questionsCtrl'
})
now im guessing state 'q1' doesnt exist which is why its a blank page?
 
right, first you don't need to specify the variable name in the ui-sref, it's matched up by the parameter value
so your URL looks like /question/q1
the final url, that is
 
Adi
8:45 AM
so instead of .state('q1', { i should put? (sorry to be a pain but really appreciate this)
 
/question matches up to the first part, then q1 is matched up to the :questionID
so you only have one state in the $stateProvider
so, you would have:
in the app.js
.state('question', {
url: '/:questionID',
templateUrl: 'questions.html',
controller: 'questionsCtrl'
});
in the html:
<a ui-sref="q1">q1</a>
your controller:
.controller('questionsCtrl', function($scope,$stateProvider){
$scope.questionID = $stateProvider.questionID
}
in your div:
<div ngshow="$scope.questionID == 'q1'"> blah blah </div>
that actually makes a link that is /q1, /q2, /q3, etc
 
Adi
@AndrewCounts what is questionID pointing to here? I get an error in dev tools
Error: [$injector:unpr] errors.angularjs.org/1.2.23$injector/unpr?p0=%24stateProviderProvider%20‌​%3C-%20%24stateProvider
 
you might want the url: '/questions/:questionID' with a ui-sref="/questions/:questionID"
that's an issue injecting the $stateProvider into the controller, not with the questionID variable
you have 'ui.router' in your angular.module, right?
 
Adi
yeah
angular.module('foo', ['ui.router'])
was working with my basic SO example but didnt want to repeat all the questions (with the same controller and templaet)
 
oh oops I'm sorry it's not $stateProvider, it's $stateParams
switching between too many windows at once there :/
 
Adi
8:59 AM
:) no worries
 
what $stateParams does is create a variable, and attach a property to itself for each :var in the url match
 
Adi
.controller('questionsCtrl', function($scope, $stateParams) {

//$scope.$state = $state;
$scope.questionID = $stateParams.questionID

});
 
so if your url is /:abc/:def you would have $stateParams.abc and $stateParams.def
yep, that should work, it should match and create variables to compare against
 
Adi
still doesnt like it. let me create a super fast jsfiddle
 
you still have the default state, yes?
 
Adi
9:04 AM
dont think so. just getting an error on page load atm
 
ok, right, you still need a match for '/' in the states, that goes to a default state
if you want / to go to q1, you can do an otherwise state
.otherwise('/q1');
 
Adi
i have this before stateprovider
$urlRouterProvider.otherwise('/');
 
you want the otherwise to go to a route that makes sense, if you don't provide a url, you want it to go to the q1, yes?
because '/' doesn't have a match (there is no variable being passed in the url)
 
Adi
ive made it q1 but i get this error on load
Error: [$parse:lexerr] errors.angularjs.org/1.2.23$parse/lexerr?p0=Unterminated%20quote&p1=s%20‌​21-24%20%5B'q1%5D&p2=<div ng-show="$scope.questionID == 'q1" class="ng-scope">cope.questionID%20%3D%3D%20'q1
 
there is a ' and then a ", looks like you're missing the '
 
Adi
9:14 AM
lets have a look...
 
also, we probably are not going to be able to use ui-sref, because those go to different states, and here you have a single state called 'question', and are passing parameters
 
Adi
all seems fine. sublime would have picked somethingh up if there was a syntax issue
 
$scope.questionID == 'q1" definitely is showing a ' at the start and only a " at the end
according to the error
 
Adi
can you see this?
contains all files in their current state
(and can see the ' error now) let me change
updated the plunk with fixed ' issue
now no error on load but cant see and div ng-show (and error on clicking link)
Error: Could not resolve 'q2' from state 'question'
 
ok let's move the otherwise to the state provider
hmm ok we're getting somewhere but it's not exactly what we want yet
 
Adi
9:31 AM
can you see results in plunkr? im at work and its been blocked when i run (for some reason)
 
I've been making some changes, when I have a working example based on your code I'll fork it
 
Adi
youre a star
 
9:47 AM
ok so I forked this after I tweaked it a bit more
so if / is loaded, it goes to the otherwise, which just pushes /q1
if your url matches /questionID (/q1, /q2/, /q3, etc) it will match that state, pass the controller
in the controller all we are doing is taking the parameter off the query string
in your html, you have to actually tell ui-sref which variable to set when it's making the URLs, so you should see the change there
then I just echoed out the question ID, and did the comparison
you can see in the comparison you don't have to use $scope=, just compare against the variable itself
 
Adi
cool. can you send the link to the fork? Not sure where it is
 
hopefully that helps you get a start of a handle on how those things interact
 
Adi
you are a superstar :) many many thanks
do you want to post an answer so I can accept it?
 
you could, of course, simply use <a href="#/q1" Q1 </a> and avoid the use of ui-sref
/q1 would still work, and all the #/ does is keep angular from doing a page reload
if you look, in the end, ui-sref ends up building #/q1 and #/q2 for us anyway
 
Adi
(y)
 
10:03 AM
posted the answer, along with a couple links and the transcript from this chat
anyway, good luck with your app :)
 
Adi
10:15 AM
thanks mate
 

last day (14 days later) »