Angularjs template fails to work

Question

I am working on an app about routing, my code:

//HTML, I passed a 'test' into routing
<a href="#details/test">Test</a>
<div data-ng-view=""></div>

//Template
<h1>{{res}}</h1>

//Angularjs
var app = angular.module("dictApp", ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/details/:test', {
        templateUrl: 'template.html', 
        controller: 'testCtrl'
    });
}]);

app.controller('testCtrl', function ($scope, $routeProvider) {
    $scope.res = $routeProvider.test;
});

//The template is displayed as
{{res}}

The template page should display 'test', but I don't know why it didn't work.

Thansk in advance.

Muthukannan Kanniappan · Accepted Answer · 2016-06-07 04:06:19Z

1

'test' parameter should be available in $routeParams.

app.controller('testCtrl', function ($scope, $routeParams) {
    $scope.res = $routeParams.test;
});

answered Jun 7, 2016 at 4:06

Muthukannan Kanniappan

2,0791 gold badge16 silver badges18 bronze badges

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

Comments

Aditya Singh · Accepted Answer · 2016-06-07 04:08:07Z

1

The service that exposes the route parameters is $routeParams. $routeProvider is the provider used to configure the routes in the app like the one you have done in your code using .when method as well

You need to inject $routeParams and use it instead of $routeProvider

app.controller('testCtrl', function ($scope, $routeParams) {
  $scope.res = $routeParams.test;
});

answered Jun 7, 2016 at 4:08

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

Collectives™ on Stack Overflow

Angularjs template fails to work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related