CODEWITHSUNDEEP
angularjs
Darthg8r
Darthg8r

Reputation: 12685

Injecting $routeParams into controller

I'm trying to pull some data out of url to pass into a controller for use in the controller. I've been trying to do it via Angular Routing.

<!DOCTYPE html>

<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-controller="SearchController" >

        <input type="text" ng-model="SearchText" />

    </div>
    <script type="text/javascript">

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

        app.config(function ($locationProvider, $routeProvider) {
            $locationProvider.html5Mode(true);
            $routeProvider
                .when('/angularroute/edit/:sometext', {
                    controller: 'SearchController'
                });

        });

        app.controller("SearchController", ['$scope', '$routeParams', SearchController]);

        function SearchController($scope, $routeParams) {

            $scope.SearchText = $routeParams.sometext;

        }

        SearchController.$inject = ['$scope'];
    </script>
</body>
</html>
    <html ng-app>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Edit</title>
        <script src="~/Scripts/angular.min.js"></script>    
    </head>
<body>
    <div ng-controller="SearchController" >

        <input type="text" ng-model="SearchText" />

    </div>
    <script type="text/javascript">

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

    app.config(function ($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/angularroute/edit/:sometext', {
                controller: 'SearchController'
            });

    });

    app.controller("SearchController", ['$scope', '$routeParams', SearchController]);

    function SearchController($scope, $routeParams) {

        $scope.SearchText = $routeParams.sometext;

    }

    SearchController.$inject = ['$scope'];
</script>
</body>
</html>

$routeParams in the controller is always null. Why?

Secondly, the url of the page that this is used on will be something like this: http://www.blah.com/angularroute/edit/32432 Is this an appropriate use of Angular routing?

Upvotes: 0

Views: 5236

Answers (2)

Marko Gledic
Marko Gledic

Reputation: 1

Had the same problem with AngularJS 1.3.0, updating to 1.3.13 fixed it.

Upvotes: 0

sylwester
sylwester

Reputation: 16508

Hi it looks like you miss reference to angular-route.js script please see example here: http://plnkr.co/edit/RZxt3t9dNQxbyW94V9jQ?p=preview

JS:

var app = angular.module('app', ['ngRoute']);
app.config(function($locationProvider, $routeProvider) {

  $routeProvider
    .when('/angularroute/edit/:sometext', {
      controller: 'SearchController',
      templateUrl: 'http://run.plnkr.co/d8ZBAv3VEkfIJI4h/search.html'
    });

  $locationProvider.html5Mode(true);

});
app.controller('firstCtrl', function($scope) {

});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);

function SearchController($scope, $routeParams) {

  console.log($routeParams);

  $scope.SearchText = $routeParams.sometext;

}

html:

<!DOCTYPE html>
<html>

  <head>
       <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>


<body ng-app="app">
  <div ng-controller="firstCtrl">
    <a href="/angularroute/edit/elephant">Search for elephant</a><br/>
     <a href="/angularroute/edit/horse">Search for horse</a><br/>
      <a href="/angularroute/edit/tigger">Search for tigger</a><br/>
      </div>
  <div ng-view="">

  </div>
  </body>

</html>

Upvotes: 1

Related Questions