CODEWITHSUNDEEP
angularjsfirebaseangular-ui-router
user883807
user883807

Reputation:

AngularJS, ui-router & Firebase app not working in Plunker

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.

Upvotes: 1

Views: 331

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123881

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

Upvotes: 3

Related Questions