Angular Module Routing not working - angularjs

Here's my code:
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html"
controller: "GroceryListItemsController"
})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
and index.html is
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
groceryList.html is
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
When running index.html in chrome the output is {{appTitle}}. I assume the ngRoute isn't being recognized here. Please help.
All the lib files are correctly in place too.
The grocery list is supposed to be visible. It had worked without the routing mechanism
Thanks


Change your order angular.min.js should be loaded ahead of lib/angular-route.min.js
<script src="lib/angular.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>


The issue is definitely with the sequence of the scripts. So here's what I did.
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "../views/groceryList.html",
controller: "GroceryListItemsController"
})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./js/app.js"></script>
</body>
</html>
groceryList.html
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
Since I didn't have most of the code, I just created this bare minimum project from the code that you supplied and served it using this Web Server
And it works at my end:
I did use relative paths instead of absolute paths though.
Hope this helps.

Related

Updating AngularJS Modules & Routing

Here is my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span>
Grocery List
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html",
controller: "HomeController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemController"
})
.when("/addItem/edit/:id",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemController"
})
.otherwise({
redirectTo: "/"
})
});
app.service("GroceryService",function(){
var groceryService = {};
groceryService.groceryItems = [
{
id:1,
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
id:2,
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
id:3,
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
id:4,
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
id:5,
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
id:6,
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
id:7,
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
id:8,
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
];
groceryService.findById = function(id){
for( var item in groceryService.groceryItems){
if(groceryService.groceryItems[item].id === id) {
console.log(groceryService.groceryItems[item]);
return groceryService.groceryItems[item];
}
}
};
groceryService.getNewId = function(){
if(groceryService.newId){
groceryService.newId++;
return groceryService.newId;
}else{
var maxId = _.max(groceryService.groceryItems,function(entry){return entry.id;})
groceryService.newId = maxId.id + 1;
return groceryService.newId;
}
};
groceryService.save = function(entry){
entry.id = groceryService.getNewId();
groceryService.groceryItems.push(entry);
};
return groceryService;
});
app.controller("HomeController", ["$scope","GroceryService", function"($scope, GroceryService) {
$scope.groceryItems = GroceryService.groceryItems;
}]);
app.controller("GroceryListItemController", ["$scope","$routeParams","$location","GroceryService", function($scope,$routeParams,$location,GroceryService) {
if(!$routeParams.id){
$scope.groceryItem = { id:0, completed:false, itemName: "", date: new Date() };
}else{
$scope.groceryItem = GroceryService.findById(parseInt($routeParams.Id));
}
//$scope.groceryItems = GroceryService.groceryItems;
//$scope.rp ="Route Parameter Values:" + $routeParams.id;
// $scope.groceryItem ={ id:7,completed:true, itemName: "cheese",date: new Date() }
$scope.save = function(){
GroceryService.save( $scope.groceryItem );
$location.path("/");
};
//console.log($scope.groceryItems);
}]);
groceryList.html
<div class="col-xs-12">
<a href="#!/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
<a href="#!/addItem/edit/{{item.id}}" class="btn btn-nm btn-default pull-right">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</li>
</ul>
</div>
addItem.html
<div class="col-xs-12">
<div class="jumbotron text-center">
<h1>Add Item Below</h1>
</div>
<form name="groceryForm">
<div class="form-group">
<input type="text" class="form-control" placeholder ="Grocery Item" ng-model="groceryItem.itemName">
</div>
<div class="form-group">
<button type="button" class="btn btn-success btn lg btn-block" ng-click="save()">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</button>
</div>
<div class="form-group">
<a href="#/" class="btn btn-default btn lg btn-block">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</a>
</div>
</form>
</div>
After running index.html on a web server, the output in the browser is :
Grocery List
However, the list of grocery items are not displayed along with "Grocery List"
The various items are supposed to be displayed on the same page.
Are the brackets and all correct?
Please help!!!
Thank You!!

You need a state to be defined for listing out the grocery as
.when("/grocery", {
templateUrl: "groceryList.html",
controller: "HomeController"
})
and change the template as
<a class="navbar-brand" href="#grocery">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> Grocery List
</a>
DEMO

AngularJS Routing multiple Redirection

Here is my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html",
controller: "GroceryListItemsController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemsController"
})
// .otherwise({
// redirectTo: "/"
//})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
groceryList.html
<div class="col-xs-12">
<a href="#/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
addItem.html
<div class="col-xs-12">
<div class="jumbotron text-center">
<h1>Add Item Below</h1>
</div>
<form name="groceryForm">
<div class="form-group">
<input type="text" class="form-control" placeholder ="Grocery Item">
</div>
<div class="form-group">
<a href="#/" class="btn btn-success btn lg btn-block">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</a>
</div>
<div class="form-group">
<a href="#/" class="btn btn-default btn lg btn-block">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</a>
</div>
</form>
</div>
The output is showing the Add Grocery Item button along with the grocery items. However when clicking the add grocery item button ,its not redirecting to any page. This is an extension to Angular Module Routing not working
Thanks for you help.

I ran your code locally and the problem seems to be related to route's hashPrefix.
It seems that the default prefix is #!/, so your URLs should start with it:
<a href="#!/addItem" ...>
<a href="#!/" ...>
Instead of:
<a href="#/addItem" ...>
<a href="#/" ...>
This will require that you change every herf in the website. Though the more elegant solution would be to get rid of the ! mark all together using:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider...
// Register routes...
});
This will change the default prefix and make it #/ instead of #!/.
By doing so, all your website URLs will work without the need to change anything else.

AngularJS Modules not working

Here's my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="1">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span>
{{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-controller="GroceryListItemsController">
<div class="col-xs-12">
<ul class="list-group">
<li ng-repeat="items in groceryListItems | orderBy: 'date'" class="list-group-item-text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
</li>
</ul>
</div>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script type="lib/bootstrap.min.js"></script>
<script type="lib/angular.min.js"></script>
<script type="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module ("groceryListApp", []);
app.controller("HomeController",["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope){
$scope.groceryItems = [
{completed: true, itemName: 'milk', date:'2017-10-01'},
{completed: true, itemName: 'cookies', date:'2017-10-02'},
{completed: true, itemName: 'ice cream',date:'2017-10-03'}.
{completed: true, itemName: 'potatoes', date:'2017-10-04'}
{completed: true, itemName: 'cereal', date:'2017-10-05'},
{completed: true, itemName: 'bread', date:'2017-10-06'},
{completed: true, itemName: 'eggs', date:'2017-10-07'},
{completed: true, itemName: 'tortillas',date:'2017-10-08'}
]
}]);
when opening the html file with chrome, the output comes as
{{appTitle}}
{{item.itemName | uppercase}}
The controllers arent working here?
I have used boostrap version-v3.3.4
and the angular is of the latest version.
Please do tell me what I should do.
Thanks

script type should be script src , Change
From
<script type="lib/bootstrap.min.js"></script>
<script type="lib/angular.min.js"></script>
<script type="js/app.js"></script>
To
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>

Cannot read property '$$phase' of null at Object.$$debounceViewValueCommit

I am getting this error while moving from one page to another. I have add order page with forms if I go to add order page directly it works fine but if go orders list page and then go to add order page then i got this error and all my forms fields on add order page set touched automatically . what could be the issue please help . thanks in advance
here is my home.html code
<div class="container body" ng-cloak>
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<img src="../assets/images/logo1.PNG" style="width:25%; float:left;"/>
<span>Trackerist</span>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix padding-2x">
<h5 class="text-center">Welcome</h5>
<h5 class="text-center">{{domain | capitalize}}</h5>
</div>
<!-- /menu profile quick info -->
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<!-- <h3>General</h3> -->
<ul class="nav side-menu">
<li><i class="fa fa-dashboard"></i> DASHBOARD
</li>
<li ng-if="is_admin"><a><i class="fa fa-truck"></i> COMPANY <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.inviteCompany">Invite companies</a></li>
<li><a ui-sref="home.listCompany">List companies</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-book"></i> ORDERS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.orderAdd">Create Order</a></li>
<li><a ui-sref="home.orderListing">List Orders</a></li>
<li><a ui-sref="home.savedOrders">Saved Orders</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-user"></i> AGENTS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.agentAdd">Add Agent</a></li>
<li><a ui-sref="home.agentListing">List Agents</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-truck"></i> DRIVERS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.driverAdd">Add Driver</a></li>
<li><a ui-sref="home.driverListing">List Drivers</a></li>
<li><a ui-sref="home.mapView">Live Map View</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-archive"></i> WAREHOUSES <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.warehouseAdd">Add Warehouse</a></li>
<li><a ui-sref="home.warehouseListing">List Warehouses</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right" style="display:flex">
<form ng-show="showSearchBar" class="navbar-form" role="search" style="width:80%">
<div class="input-group" style="width:100%">
<input type="text" ng-model="searchText" class="form-control" placeholder="Search">
<span class="input-group-btn" style="width: 10%;" ng-click="showSearchBar=false">
<button type="reset" class="btn btn-default">
<span class="glyphicon glyphicon-remove">
<span class="sr-only">Close</span>
</span>
</button>
</span>
</div>
</form>
<button type="submit" class="btn btn-default" style="width:10%" ng-click="searchIt()">
<span class="glyphicon glyphicon-search">
<span class="sr-only">Search</span>
</span>
</button>
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li> Profile </li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li>Help</li>
<li><a ng-click="logout()"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="">
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Copyright Trackerist © 2017. All rights reserved.
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<script>
$(document).ready(function () {
$.getScript('assets/js/custom.js');
});
</script>
here is my index.html file
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Logistics </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/animate.min.css" rel="stylesheet">
<link href="assets/vendors/bootstrap-daterangepicker/daterangepicker.css"
rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- jQuery -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="assets/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="assets/vendors/bootstrap-progressbar/bootstrap-
progressbar.min.js"></script>
<!-- iCheck -->
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="assets/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="assets/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Switchery -->
<script src="assets/vendors/switchery/dist/switchery.min.js"></script>
<link href="assets/vendors/switchery/dist/switchery.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="assets/vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="assets/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-local-storage/src/angular-local-storage.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!--<script src="node_modules/angular-loading-bar/build/loading-bar.js"></script>-->
<!--<script src="node_modules/angular-loading-bar/build/loading-bar.css"></script>-->
<script src="http://maps.googleapis.com/maps/api/js?
libraries=places&key=AIzaSyDLy0G_2BB47UWc6NwDCqHsrpaRfx2OyR8"></script>
<!--<script src="http://jvandemo.github.io/angularjs-google-maps/dist/angularjs-google-maps.js"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
<!--<script src="assets/js/custom.js"></script>-->
<!-- jQuery Smart Wizard -->
<script src="assets/js/jquery.smartWizard.js"></script>
<script src="assets/js/vs-google-autocomplete.js"></script>
<script src="index.js"></script>
<script src="factories/subDomian.js"></script>
</head>
<body ng-app="logistics" class="{{ bodylayout }}">
<ui-view>
</ui-view>
</body>
</html>
there are the routes
.state('home.orderAdd', {
url: "/orders/add",
controller: "orderController",
templateUrl: "views/order/add.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderListing', {
url: "/orders/listing",
controller: "orderController",
templateUrl: "views/order/listing.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderDetails', {
url: "/orders/details?order_id",
controller: "orderController",
templateUrl: "views/order/details.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({serie: true,
name: "login",
files:[
"controllers/orders.js",
"node_modules/qrcode-generator/qrcode.js",
"node_modules/qrcode-generator/qrcode_UTF8.js",
"node_modules/angular-qrcode/angular-qrcode.js"
]
});
}]
},
authenticate: true
})
.state('home.savedOrders', {
url: "/orders/savedOrders-listing",
controller: "orderController",
templateUrl: "views/order/saved_listing.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderDetail', {
url: "/orders/details/:order_id",
controller: "orderController",
templateUrl: "views/order/add.html",
params: {
'order_id': null,
'order_obj': null,
'type': 'order-details',
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({serie: true,
name: "login",
files:[
"controllers/orders.js",
"node_modules/qrcode-generator/qrcode.js",
"node_modules/qrcode-generator/qrcode_UTF8.js",
"node_modules/angular-qrcode/angular-qrcode.js"
]
});
}]
},
authenticate: true
})
.state('home.orderEdit', {
url: "/orders/edit?order_id",
controller: "orderController",
templateUrl: "views/order/add.html",
params:{
'order_id': null,
'order_obj': null,
'type': 'order-edit',
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
here is my versions
"dependencies": {
"angular": "1.6.6",
"angular-animate": "^1.6.6",
"angular-aria": "^1.6.6",
"angular-jwt": "0.1.9",
"angular-loading-bar": "^0.9.0",
"angular-local-storage": "^0.7.1",
"angular-material": "^1.1.5",
"angular-qrcode": "^7.2.0",
"angular-ui-router": "1.0.3",
"nprogress": "^0.2.0",
"oclazyload": "^1.1.0",
"sweetalert": "^2.0.6",
"vsGoogleAutocomplete": "^0.5.0"
}
cause of error
<div class="right_col ng-scope" role="main" ui-view="" data-ng-animate="1">

how to redirect to login view in admin panel in angular js

I have Login page which has very simple contents without sidebar, top navigation, and the another page the home view which has main contents, sidebar, top navigation but wants to load login view without sidebar, top navigation.
app.js
var app = angular.module('myApp',['ui.router' , 'ngMessages']);
app.config(function($stateProvider , $urlRouterProvider){
$stateProvider
.state('index',{
url: '/',
templateUrl: 'views/index.html'
})
.state("helper",{
url:"/helper",
templateUrl : "views/helper.html",
controller: 'helperController',
})
.state('login',{
url: '/login',
templateUrl: 'views/login.html',
})
//By Default Load the template
$urlRouterProvider.otherwise('/');
});
app.controller('helperController',function($scope , $http){
$scope.addHelper = function(){
var data = [{
first_name : $scope.first_name,
last_name : $scope.last_name,
email : $scope.email,
phone : $scope.phone,
state : $scope.state,
city : $scope.city,
zip_code : $scope.zip_code,
address : $scope.address,
password : $scope.password,
}];
console.log(data);
}
});
app.controller('loginController', ["$scope", "$rootScope", "$state", function ($scope, $rootScope, $state) {
$state.go('login');
}]);
login page:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentallela Alela! | </title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/icheck/flat/green.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body style="background:#F7F7F7;">
<div class="">
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<section class="login_content">
<form>
<h1>Login Form</h1>
<div>
<input type="text" class="form-control" placeholder="Username" required="" />
</div>
<div>
<input type="password" class="form-control" placeholder="Password" required="" />
</div>
<div>
<a class="btn btn-default submit" href="index.html">Log in</a>
<a class="reset_pass" href="#">Lost your password?</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">New to site?
Create Account
</p>
<div class="clearfix"></div>
<br />
<div>
<h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>
<p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
</div>
</div>
</form>
<!-- form -->
</section>
<!-- content -->
</div>
<div id="register" class="animate form">
<section class="login_content">
<form>
<h1>Create Account</h1>
<div>
<input type="text" class="form-control" placeholder="Username" required="" />
</div>
<div>
<input type="email" class="form-control" placeholder="Email" required="" />
</div>
<div>
<input type="password" class="form-control" placeholder="Password" required="" />
</div>
<div>
<a class="btn btn-default submit" href="index.html">Submit</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">Already a member ?
Log in
</p>
<div class="clearfix"></div>
<br />
<div>
<h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>
<p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
</div>
</div>
</form>
<!-- form -->
</section>
<!-- content -->
</div>
</div>
</div>
</body>
</html>
master layout:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentallela Alela! | </title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/maps/jquery-jvectormap-2.0.3.css" />
<link href="css/icheck/flat/green.css" rel="stylesheet" />
<link href="css/floatexamples.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-messages.min.js"></script>
<script src="js/app.js"></script>
</head>
<body class="nav-md" ng-app="myApp">
<div ui-view="login"></div>
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-paw"></i> <span>Gentellela Alela!</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<!-- /menu prile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><i class="fa fa-home"></i> Dashboard
</li>
<li><a><i class="fa fa-edit"></i> Helper <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>Add New Helpers
</li>
<li>List Helpers
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-toggle="tooltip" data-placement="top" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Lock">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Logout">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li> Profile
</li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li>
Help
</li>
<li><i class="fa fa-sign-out pull-right"></i> Log Out
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green">6</span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image">
<img src="images/img.jpg" alt="Profile Image" />
</span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image">
<img src="images/img.jpg" alt="Profile Image" />
</span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image">
<img src="images/img.jpg" alt="Profile Image" />
</span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image">
<img src="images/img.jpg" alt="Profile Image" />
</span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<div class="text-center">
<a href="inbox.html">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div ui-view>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Gentelella - Bootstrap Admin Template by Colorlib
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
</ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
<script src="js/bootstrap.min.js"></script>
<!-- gauge js -->
<script type="text/javascript" src="js/gauge/gauge.min.js"></script>
<script type="text/javascript" src="js/gauge/gauge_demo.js"></script>
<!-- bootstrap progress js -->
<script src="js/progressbar/bootstrap-progressbar.min.js"></script>
<!-- icheck -->
<script src="js/icheck/icheck.min.js"></script>
<!-- daterangepicker -->
<script type="text/javascript" src="js/moment/moment.min.js"></script>
<script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
<!-- chart js -->
<script src="js/chartjs/chart.min.js"></script>
<script src="js/custom.js"></script>
<!-- flot js -->
<!--[if lte IE 8]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="js/flot/date.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.spline.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.stack.js"></script>
<script type="text/javascript" src="js/flot/curvedLines.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
<script>
$(document).ready(function() {
// [17, 74, 6, 39, 20, 85, 7]
//[82, 23, 66, 9, 99, 6, 2]
var data1 = [
[gd(2012, 1, 1), 17],
[gd(2012, 1, 2), 74],
[gd(2012, 1, 3), 6],
[gd(2012, 1, 4), 39],
[gd(2012, 1, 5), 20],
[gd(2012, 1, 6), 85],
[gd(2012, 1, 7), 7]
];
var data2 = [
[gd(2012, 1, 1), 82],
[gd(2012, 1, 2), 23],
[gd(2012, 1, 3), 66],
[gd(2012, 1, 4), 9],
[gd(2012, 1, 5), 119],
[gd(2012, 1, 6), 6],
[gd(2012, 1, 7), 9]
];
$("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
data1, data2
], {
series: {
lines: {
show: false,
fill: true
},
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 0,
show: true
},
shadowSize: 2
},
grid: {
verticalLines: true,
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#fff'
},
colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
xaxis: {
tickColor: "rgba(51, 51, 51, 0.06)",
mode: "time",
tickSize: [1, "day"],
//tickLength: 10,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
//mode: "time", timeformat: "%m/%d/%y", minTickSize: [1, "day"]
},
yaxis: {
ticks: 8,
tickColor: "rgba(51, 51, 51, 0.06)",
},
tooltip: false
});
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
});
</script>
<!-- worldmap -->
<script type="text/javascript" src="js/maps/jquery-jvectormap-2.0.3.min.js"></script>
<script type="text/javascript" src="js/maps/gdp-data.js"></script>
<script type="text/javascript" src="js/maps/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="js/maps/jquery-jvectormap-us-aea-en.js"></script>
<!-- pace -->
<script src="js/pace/pace.min.js"></script>
<script>
$(function() {
$('#world-map-gdp').vectorMap({
map: 'world_mill_en',
backgroundColor: 'transparent',
zoomOnScroll: false,
series: {
regions: [{
values: gdpData,
scale: ['#E6F2F0', '#149B7E'],
normalizeFunction: 'polynomial'
}]
},
onRegionTipShow: function(e, el, code) {
el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
}
});
});
</script>
<!-- skycons -->
<script src="js/skycons/skycons.min.js"></script>
<script>
var icons = new Skycons({
"color": "#73879C"
}),
list = [
"clear-day", "clear-night", "partly-cloudy-day",
"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
"fog"
],
i;
for (i = list.length; i--;)
icons.set(list[i], list[i]);
icons.play();
</script>
<!-- Doughnut Chart -->
<script>
$('document').ready(function() {
var options = {
legend: false,
responsive: false
};
new Chart(document.getElementById("canvas1"), {
type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: [
"Symbian",
"Blackberry",
"Other",
"Android",
"IOS"
],
datasets: [{
data: [15, 20, 30, 10, 30],
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#E74C3C",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#E95E4F",
"#36CAAB",
"#49A9EA"
]
}]
},
options: options
});
});
</script>
<!-- /Doughnut Chart -->
<!-- datepicker -->
<script type="text/javascript">
$(document).ready(function() {
var cb = function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
//alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
}
var optionSet1 = {
startDate: moment().subtract(29, 'days'),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2015',
dateLimit: {
days: 60
},
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Clear',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
};
$('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#reportrange').daterangepicker(optionSet1, cb);
$('#reportrange').on('show.daterangepicker', function() {
console.log("show event fired");
});
$('#reportrange').on('hide.daterangepicker', function() {
console.log("hide event fired");
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
});
$('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
console.log("cancel event fired");
});
$('#options1').click(function() {
$('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
});
$('#options2').click(function() {
$('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
});
$('#destroy').click(function() {
$('#reportrange').data('daterangepicker').remove();
});
});
</script>
<script>
NProgress.done();
</script>
<!-- /datepicker -->
<!-- /footer content -->
</body>
</html>

#saddam, yes, you can do this with a flag.
Create two varous Content in the Header.html file with an ng-if="toggleHeader".
one content is used to display the before login i.e., when toggleHeader is FALSE.
Another content will be loaded when login is success. we have to set the toggleHeader to 'TRUE'
Steps:
1.open login screen.
2. Provide Credentials for Login and once the BackEnd Call gets success set a flag value i.e., $scope.toggleHeader = true; Send these values via $stateParams
3. That's it, your task will be completed.
Please reply for any queries here, just in case.

Resources