CODEWITHSUNDEEP
angularjsroutes
Irondonut
Irondonut

Reputation: 25

angularjs routing :param always undefined

has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"

ctrl.js:

angular.module('AutApp', ['ngRoute'])

.config(function($routeProvider){
  $routeProvider.when("/:message",
    {
      templateUrl: "index.html",
      controller: "ctrl"
    }
  );
})

.controller('ctrl', function($routeParams) {
  document.getElementById("test").innerHTML = $routeParams.message;
});

index.html:

<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
    <div id = "test"></div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="ctrl.js"></script>
</body>
</html>

Thank you for your help!

Upvotes: 0

Views: 120

Answers (1)

surfthecity
surfthecity

Reputation: 160

You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route

<!DOCTYPE html>
<body ng-app="AutApp">
  <div ng-view></div>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
  <script>

  angular.module('AutApp', ['ngRoute'])

    .config(function($routeProvider){
      $routeProvider.when("/:message",
    {
      template: '<div id = "test"></div>',
      controller: "ctrl"
    }
  );
})

.controller('ctrl', function($routeParams) {
  document.getElementById("test").innerHTML = $routeParams.message;
});

</script>

Upvotes: 1

Related Questions