Passing a parameter using ngroute
here is my
angularroute.html
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularApp"> <head> <title></title> <script src="angular.js"></script> <script src="angular-route.js"></script> <script type="text/javascript"> var AngApp = angular.module('AngularApp', ['ngRoute']); AngApp.config(function ($routeProvider) { $routeProvider .when('/Route1/:ID', { templateUrl:'Route1.html', controller:'Route1' }) .when('/Route2', { templateUrl: 'Route2.html', controller:'Route2' }) .otherwise({ redirectTo: '/' }); }); </script> </head> <body> <p>Routing Explained</p> <a href="#Route1/100">Route1</a><br> <a href="#Route2">Route2</a> <div ng-view> </div> <script src="Route.js"></script> </body> </html> The Route.js file contains.
angular.module('Route1').controller('Route1', function ($scope, $routeParams) { $scope.ID = $routeParams.ID; }); angular.module('Route2').controller('Route2', function () { }); Route1.html
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Route1"> <head> <title></title> </head> <body ng-controller="Route1"> {{ID}} {{4+10}} </body> </html> the problem is that it loads the page, but I canβt get the parameter value, on route1.html, the expression also doesnβt get an estimate. What could be the problem? thanks.
Delete everything that you do not need in the route template. Only content that you have added to your template body is required.
This will be included angular in the ng-view with the controller that you configured on your route. This is a partial rather than a complete html file.
Also your route.js code route.js incorrect. You can create the angular.module('route', []).controller('route1Controller', function(){...}) module and use it as a dependency in your application.
Dropping the brackets, as you did in route.js , you get a module that is already defined.
Please see the updated code below or in this fiddle .
var AngApp = angular.module('AngularApp', ['ngRoute']) .controller('Route1Controller', Route1Controller) .controller('Route2Controller', Route2Controller); AngApp.config(function ($routeProvider) { $routeProvider .when('/Route1/:ID', { templateUrl:'Route1.html', controller:'Route1Controller' }) .when('/Route2', { templateUrl: 'Route2.html', controller:'Route2Controller' }) .otherwise({ redirectTo: '/' }); }); function Route1Controller($scope, $routeParams) { $scope.ID = $routeParams.ID; } function Route2Controller($scope) { } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script> <div ng-app="AngularApp"> <script type="text/ng-template" id="Route1.html"> Route1 {{ID}} {{4+10}} </script> <script type="text/ng-template" id="Route2.html"> Route2 {{4+10}} </script> <p>Routing Explained</p> <a href="#Route1/100">Route1</a><br/> <a href="#Route2">Route2</a> <div ng-view> </div> </div>