Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building with AngularJS and APIs

Alec Plummer
Alec Plummer
15,181 Points
Posted by Alec Plummer
Alec Plummer
15,181 Points

$routeProvider, could not figure out how to make it work

Hmm, I can't seem to make my code work and I'm wondering if it could be because of the difference in API versions that dribbble is using compared to this video? I followed along letter for letter and went over it a few more times just to make sure that it wasn't a typo on my end. The API version that's being used for this video is deprecated, could that be the reason why it isn't working as expected?

EDIT: The issue I'm having starts at the 27min marker.

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

I suggest posting your code so that people can see what you may or may not be doing incorrectly.

Alec Plummer
Alec Plummer
15,181 Points
Alec Plummer
Alec Plummer
15,181 Points

Right on, here is where I'm at right now. Everything up until this point worked perfectly fine.

app.js file - 

var app = angular.module('dabble', ['dabble.controllers']);

app.config(function($routeProvider) {
    $routeProvider
        .when("/:list", {controller:"ShotsListCtrl", templateUrl: "partials/shots_list.html"})
        .otherwise({redirectTo: "/popular"});
});

controllers.js file -

var controllers = angular.module('dabble.controllers', []);

controllers.controller('ShotsListCtrl', function($scope, $http) {

    $http.jsonp('http://api.dribbble.com/shots/popular?callback=JSON_CALLBACK').then(function(data) {
        $scope.list = data.data;
    });
});

In my index.html file I've added the ng-view div and have my shots_list.html within a folder named partials. I couldn't find any syntax errors (though maybe I've been looking at it too long) which is why I'm wondering if the API version makes a difference. The current version is v1, whereas the video uses the beta version that has since been deprecated. Any thoughts?

1 Answer

Alec Plummer
Alec Plummer
15,181 Points
Alec Plummer
Alec Plummer
15,181 Points

Alas, I figured it out! So the API is fine, my problem was with angular itself. I was searching through google and found that you need to download angular-route.js and include it right after your angular.js file. Then you need to declare 'ngRoute' as a dependency within your module. Here's what the code looks like.

app.js file -

var app = angular.module('dabble', ['dabble.controllers', 'ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/shots/:id", {
            controller: "ShotsCtrl",
            templateUrl: "partials/shot.html"
        })
        .when("/:list", {
            controller: "ShotsListCtrl",
            templateUrl: "partials/shots_list.html"
        })
        .otherwise({
            redirectTo: "/popular"
        });
});

index.html file -

<body>

    <div id="header">
        <div class="row">
            <div class="small-4 columns">
                <a href="index.html"><h2>Dabble</h2></a>
            </div>
        </div>
    </div>

    <div ng-view></div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</body>