Can not display the pages by ng-view using Angular.js
Question
My pages are not coming by using ng-view in angular.js.When i am typing the url http://localhost:8888/dashboard the pages should come.I am explaining my code below.
view/dashboard.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="adminDashboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" /><!-- Vector Map -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" /><!-- Carousal -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body ng-view>
</body>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/enscroll.js"></script>
<script type="text/javascript" src="js/grid-filter.js"></script>
<script type="text/javascript" src="app/routes/dashboard-route.js"></script>
<script type="text/javascript" src="app/controller/dashboard-controller.js"></script>
</html>
public/app/routes/dashboard-route.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/dashboard',{
templateUrl:'app/view/dashboard-partial.html',
controller:'dashboard-controller'
});
}
])
public/app/controller/dashboard-controller.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.controller('dashboard-controller',function($scope){
$.ajax({
type:'GET',
url:"/getAdminData",
success: function(data){
$scope.firstname=data.firstname;
$scope.lastname=data.lastname;
$scope.adminImage=data.image;
},
error: function(data){
console.log(data);
}
});
});
Please help me to resolve this issue so that the template will successfully display.I am also using node.js for client server architecture.
2 answers
solution1
0 2015-08-06 16:39:44
It looks like your dashboad-route.js is using templateUrl:'app/view/dashboard-partial.html' , but the name of your HTML file is view/dashboard.html . Change templateUrl to app/view/dashboard.html (or whatever the correct path is) and see if that fixes things.
solution2
0 2015-08-06 16:40:03
One problem is that if you use $.ajax to do scope changes angular is unaware of them so you need to use $apply() to tell angular to run digest scycle.
For this reason I suggest you don't use $.ajax and use angular $http
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.