Maha Dev Maha Dev - 6 months ago 20
PHP Question

Angular Js routing not working properly

i am new on angularjs. I have done all regarding routing but its not working. I want my home page will be the default page. Whenever i open index.php page, it shows black screen. Here is my code,

//index.php
<body ng-app="app">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/angularjs">Angular JS Practice</a>
</div>

<ul class="nav navbar-nav navbar-right">
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#students"><i class="fa fa-shield"></i> Student</a></li>
</ul>
</div>
</nav>
</header>

<div class="container-fluid">
<div ng-view></div>

<script type = "text/ng-template" id = "home.htm">
<h2> {{pagename}} </h2>
{{message}}
</script>

<script type = "text/ng-template" id = "students.htm">
<h2> {{pagename}} </h2>
{{message}}
</script>

</div>
<!--1.4.8-->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>


App.js

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


app.config(['$routeProvider',function($routeProvider){
$routeProvider.when("/",{
templeteUrl:"home.htm",
controller:'myctrl'
}).when("/students",{
templateUrl:"students.htm",
controller:"studentCtrl"
}).otherwise({
templateUrl:"404.php",
controller:"notfoundCtrl"
})

}]);

app.controller("notfoundCtrl",function($scope){
$scope.pagename='Not Found';
$scope.message='The page you are request not found';

});

app.controller("studentCtrl",function($scope){
$scope.pagename='Students';
$scope.message="This is student page";
});

app.controller("myctrl",function($scope){
$scope.pagename="Home Page";
$scope.message="This is home page";
});

Answer

You wrote templeteUrl:"home.htm", can you try changing that to templateUrl:"home.htm"?