1

I just took an app I'm working on and converted it to a Plunk but Angular and/or ui-router is not populating the two views I have in index.html. On my local box the app loads fine but there I have the app modularize. So when I converted it to a Plunk I had to rewire the files together since I can't make modules in Plunker AFAIK. Also, when I load the Plunk in a separate window and open Dev Tools I get no errors so I'm at a loss right now.

Here is link to the Plunk code I made:

http://plnkr.co/edit/2f1RITT6ysZhB5i0UcUw?p=preview

And here is the link to the embedded view (more convenient if you want to use Dev Tools):

http://embed.plnkr.co/2f1RITT6ysZhB5i0UcUw/preview/posts

I should mention that the route has to end in /posts since that it the url of the state named posts. I have no state defined for the root / url. Also the following url failed:

http://embed.plnkr.co/2f1RITT6ysZhB5i0UcUw/posts

Thanks in advance.

3
  • no reason you shouldn't be able to use modules in plunker Commented Nov 22, 2014 at 0:29
  • Ok. Perhaps next time I will combine each of my modules's files into one module file and include them but right now after my rewiring I think my app should be functioning properly. I double checked my paths and everything looks right. Commented Nov 22, 2014 at 0:47
  • See the docs for working ui-router examples with Angular/Firebase: firebase.com/docs/web/libraries/angular/… Commented Nov 22, 2014 at 16:15

1 Answer 1

3

I've made few changes. Here is a working plunker

Firstly I upgraded your version to UI-Router 0.2.13 (fixes some issues, simply always use the latest)

The /post is now default

//$urlRouterProvider.otherwise('/');
$urlRouterProvider.otherwise('/posts');

I changed your controller, to not use router params,

// wrong old 
/*
app.controller('ProfileCtrl', function ($scope, $routeParams, Profile) {
        var uid = $routeParams.userId;
        $scope.profile = Profile.get(uid);
         Profile.getPosts(uid).then(function(posts) {
            $scope.posts = posts;
        });
    });
*/

// the way with UI-Router
app.controller('ProfileCtrl', function ($scope, $stateParams, Profile) {
    var uid = $stateParams.userId;
    $scope.profile = Profile.get(uid); 
    ...

JUST to know what is post holding
Also, the passed userId into state contains values like: "simplelogin:82", to observe taht, I added overview of processed post, which is showing info like this:

{
  "creator": "3lf",
  "creatorUID": "simplelogin:82", // this is passed as userId, is it ok?
  "title": "a",
  "url": "http://a",
  "$id": "-JazOHpnlqdNzxxJG-4r",
  "$priority": null
}

Also, this is a fixed way how to call state posts.postview

<!-- wrong -->
<!-- <a ui-sref="posts({postId:post.$id})">comments</a> -->
<!-- correct -->
<a ui-sref="posts.postview({postId:post.$id})">comments</a>

And alos, if the postview should be injected into main area, this should be its defintion

var postView = {
    name: 'posts.postview',
    parent: posts,
    url: '/:postId',
    views: {
        'navbar@': {
            templateUrl: 'nav.tpl.html',
            controller: 'NavCtrl'
        },
        //'@posts.postview': {
        '@': {
            templateUrl: 'postview.tpl.html',
            controller: 'PostViewCtrl'
        }
    }
};

Check it all here

SUMMARY: Working navigation is among posts - users... the "comments" link is also working, but the target is just loaded ... with many other errors... out of scope here

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks. That was a big help. One thing I notice is that when I click a user or comment link, I see the user profile and individual posts load but the URL never changes. Plunker does not let the URLs of their preview change it seems. You see the same thing? Also, I'm not sure why simplelogin:# is being used as the userId but I will be changing that in the future.
I am not 100% what you say, but if you talk about my plunker - please, click on the BLUE icon on the RIGHT - TOP corner (mouse over it to see: "Launch the preview in sepearate window"... You should see plunker in a new window, and url will be changing on click... does it help?
Ok I see it now. I was talking about the embedded view in my comment. The Plunker embedded view URL always ends in /preview. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.