Praveen Krishna P Praveen Krishna P - 6 months ago 16
AngularJS Question

$routeProvider, injection in angularjs, not able to identify the error

On clicking register, just the url changes and not taked to register.html or displayed the content

Screenshot

html file

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="Script/Scc.js"></script>
</head>
<body ng-app="sampleApp">
First Name<input type="text" ng-model="reg.firstName" /><br />
Last Name<input type="text" ng-model="reg.lastName" /> <br />
<a href="#Register"> Register </a>
</body>




Scc.js

var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/#Register', {
templateUrl: '/register.html',
controller: 'registerController'
})
}]);
sampleApp.controller('registerController', function ($scope,$route) {
var reg = {
firstName: 'Mmm',
lastName: 'Nnn',
};
$scope.reg = reg;
});


register.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h2>Registration</h2>
First Name is{{ reg.firstName }}<br />
Last Name is {{reg.lastName}}
</body>
</html>


not able to retrieve the textbox content and display it in register.html...

T J T J
Answer

You need ng-view directive in your html to indicate where the template should be injected. Something like <div ng-view></div>.

And your register.html shouldn't be a full HTML document, it should be a partial template contaning just the data that needs to be injected.

And you don't need the # in route:

when('/Register', {
    templateUrl: '/register.html',
    controller: 'registerController'
});

Make sure the path to template is correct.