CODEWITHSUNDEEP
djangoangularjs
Nepho
Nepho

Reputation: 1112

Inject variable from the views to my angular controller?

I'm trying to create a website with articles. I have a page that displays a list of all the articles, and I try to do one that displays the detail of an article. I use angular.js to get the json of my datas. I don't have any problem to get the list of my articles since I only need to do : 

function ArticleListCtrl($scope, $http) {
    $http.get('/articles/?format=json').success(function(data) {
        $scope.articles = data;
    });
}

But now I only want to access for example the article with id 4. How do I do that ? Is there a way to inject the primary key entered in the url into the javascript ? I'm new to angular, and I'm pretty sure there is an easy way!

Upvotes: 1

Views: 810

Answers (1)

rantanplan
rantanplan

Reputation: 7450

If I understand correctly, what you need is to define a partial template and a route, for the detail view of your article.

An example is here

More specifically what you'd need is something like the following.

angular.module('myapp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/articles/:articleId', {templateUrl: 'partials/article-detail.html', controller: ArticleDetailCtrl}).
      otherwise({redirectTo: '/articles'});
}]);

What the above does, is to hijack urls of the form /articles/5/ and instead of actually performing that GET request to your server, it will just ask for partials/article-detail.html. This of course will be your article detail template, which will be handled by your ArticleDetailCrtl controller.

In your ArticleDetailCrtl controller function, don't forget to include the $routeParams service. This will give you access to the url parameters, such as articleId, which we defined above.

The final thing to do is to generate these links in your article list template. e.g:

<ul>
<li ng-repeat="article in articles"><a href="/articles/{{article.id}}/">{{article.title}}</a>
</ul>

Upvotes: 1

Related Questions