CODEWITHSUNDEEP
angularjsparameter-passingngrouteng-viewangularjs-ng-route
Calum
Calum

Reputation: 104

Angularjs Routing parameters not working

I am trying the following code in my Apache server and it's not working (When click the link, nothing happen). It suppose to show title/content for each link.

index.html

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
        <script src="app.js"></script>
        <script src="post.js"></script>
    </head>
    <body ng-app="blogApp">
        <nav>
            <a href="#/post/1">Blog post</a>
            <a href="#/post/2">Other post</a>
            <a href="#/post/3">Last post</a>
        </nav>
        <!-- Place where our user will be displayed -->
        <div ng-view>
        </div>
    </body>
</html>

app.js

angular.module('blogApp', ['ngRoute'])
    // Setting configuration for application
    .config(function ($routeProvider) {
        $routeProvider.when('/post/:postId', {
            controller: postCtrl,
            templateUrl: 'post.html'
        })

    })
    // Ignore code below. This is usually in seperate html files
    .run(function ($templateCache){
        $templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>');
    });

post.js

function postCtrl ($scope, $routeParams) {
    $scope.title = "Error";
    $scope.content = "No post with that number";

    $scope.postId = $routeParams.postId;
    switch ($routeParams.postId) {
        case '1':
            $scope.title = "Hello world";
            $scope.content = "This is my first post";
            break;
        case '2':
            $scope.title = "Post no 2";
            $scope.content = "This is my first post";
            break;
        case '3':
            $scope.title = "Last post";
            $scope.content = "Bye";
            break;
    }
}

Appreciate any help.

Upvotes: 2

Views: 3188

Answers (1)

sylwester
sylwester

Reputation: 16498

Your code seems to be fine, just you miss a one important bit

 app.controller('postCtrl', postCtrl);

please see demo below

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

// Setting configuration for application
app.config(function($routeProvider) {
    $routeProvider.when('/post/:postId', {
      controller: postCtrl,
      templateUrl: 'post.html'
    })

  })
  // Ignore code below. This is usually in seperate html files
  .run(function($templateCache) {
    $templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>');
  });


app.controller('postCtrl', postCtrl);

function postCtrl($scope, $routeParams) {
  $scope.title = "Error";
  $scope.content = "No post with that number";

  $scope.postId = $routeParams.postId;
  switch ($routeParams.postId) {
    case '1':
      $scope.title = "Hello world";
      $scope.content = "This is my first post";
      break;
    case '2':
      $scope.title = "Post no 2";
      $scope.content = "This is my first post";
      break;
    case '3':
      $scope.title = "Last post";
      $scope.content = "Bye";
      break;
  }
}
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>
<body ng-app="blogApp">
  <nav>
    <a href="#/post/1">Blog post</a>
    <a href="#/post/2">Other post</a>
    <a href="#/post/3">Last post</a>
  </nav>
  <!-- Place where our user will be displayed -->
  <div ng-view>
  </div>
</body>

Upvotes: 2

Related Questions