Menu
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 it loads the page but i can not receive get the parameter value , on route1.html ,the expression also do not get evaluated . what could be the problem? thanks.
459
asked Oct 11 '15 18:10
If you want to pass additional parameters to an Angular service, what you are looking for is @Inject decorator. It helps you pass your parameters to the service through Angular's dependency injection mechanism. @Inject() is a manual mechanism for letting Angular know that a parameter must be injected.
Remove everything that's not needed from your route template. Only the content that you added in your body of the template is required.
That will be included by angular into ng-view with the controller that you have configured in your route. It's a partial and not a complete html file.
Also your route.js code is not correct. You could create a module angular.module('route', []).controller('route1Controller', function(){...}) and use it as dependency in your app.
With-out the brackets like you did in your route.js you're getting a module that's already defined.
Please have a look at your 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
