kannucodert14 kannucodert14 - 3 months ago 20
AngularJS Question

Angular JS UI-Router not working

It doesn't display anything on view nor any error on console log. Have checked with case sensitives too still couldn't solve the problem. Saw other posts too still couldn't find where am making mistake. Is it necessary to use ng-resource for UI-Router?

<!DOCTYPE html>
<html>
<head>
<title>Fad Street Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>
<body cz-shortcut-listen="true">
<div>
{{name}}
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="services.js"></script>
</body>
</html>


App.js file

var app=angular.module('myApp', ['ui.router']);
.config(function($stateProvider,$urlRouterProvider)
{
$stateProvider
.state('home',
{
url:'/',
views:
{
'header':
{
templateUrl:"header.html"
},
'content':
{
templateUrl:"body.html",
controller:"productscontroller"
}
}
})
$urlRouterProvider.otherwise('/');
})


Controller.js File

var app=angular.module('myApp');
app.controller('productscontroller',
['$scope','productservice',function($scope,productservice)
{
$scope.name="kannan";
productservice.productlists().then(function(response)
{
$scope.ans=response.data;
console.log($scope.ans);
},function(response)
{
console.log(response.status);
return response.status;
});
}]);


Header.html

<body ng-app="myApp" ng-controller="productscontroller">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">Home</a></li>
<li><a ui-sref="home">Home</a></li>
</ul>
</body>


Body.html

<body ng-app="myApp" ng-controller="productscontroller">
<div>
<div style="height: 200px;" ng-repeat="x in ans">
<img style="width: 100px;height: 100px;float: left;" class="img-responsive"
ng-src="{{x.imageURL1}}">
<h1>{{x.color}}</h1>
<p>{{x.brand}}</p>
<p>{{x.gender}}</p>
</div>
</div>
</body>

Answer

We have to provide ng-app="myApp" at the most root level possible. Mostly on the index.html

<body ng-app="myApp" ...

or even on the <html> (e.g. to be able to adjust <title> which is part of <head>)

<html ng-app="myApp" ...

the header.html and body.html (as shown above) would not work, because that would not trigger the application at all