CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangular-routing
Fallenreaper
Fallenreaper

Reputation: 10694

routeParams doesnt inject into my controller?

I was looking at some how-tos on doing angular-routing and to pass parameters into a controller. This is what i did:

.controller("myController", ["$scope", "$routeParams", function($scope, $routeParams, Units, Tests){
  //Units and Tests are both factories i created to reference within this function.
  var id = $routeParams.id;
  console.log(id);
}]);

When I did this, it failed to inject "$routeParams" into my application.

I looked at the angular.js file, and it looks like i am running: @license AngularJS v1.5.3

Is this way of doing it no longer the correct way? I tried to update it to:

.controller("myController", ["$scope", "ngRoute", function($scope, ngRoute, Units, Tests){
  // ...
}]);

but that seemed to also not inject correctly.

Is there something I am missing?

Currently I am developing with the Ionic Framework, which is leveraging the AngularJS tools.

Upvotes: 2

Views: 316

Answers (2)

Fallenreaper
Fallenreaper

Reputation: 10694

When dealing with ionic, as stated within the question, you connect to the $stateProvider so when you are creating a state such as:

$stateProvider
  .state("unit", {
    url: "/unit/:id",
    templateUrl: "templates/unit.html",
    controller: "UnitController"
  })

you would then in your controller do:

.controller("myController", ["$scope", 
    "$stateParams", 
    function($scope, $stateParams, Units, Tests){
  var id = $stateParams.id;
  console.log(id);
}]);

This is the way to do it in Ionic, since it is leveraging a $stateProvider over a $routeProvider

Upvotes: 2

Wasiq Muhammad
Wasiq Muhammad

Reputation: 3118

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.

The ngRoute module routes your application to different pages without reloading the entire application.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    })
    .when("/blue", {
        templateUrl : "blue.html"
    });
});

Your application needs a container to put the content provided by the routing.

This container is the ng-view directive.

like this

<div ng-view></div>

You can also define controllers for each view

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/london", {
        templateUrl : "test.html",
        controller : "myController"
    })

});

Upvotes: 1

Related Questions