We Keep Coding

How can i set/remove locastorage particular url(route) opened in browser using angularjs?

When user open user.html(user route) need to store(this should be avilable in entire application) localStorage.setItem('user',"true");
when user close user.html(means user close this particular tab(url/route) in browser) need to remove localstorage .how can i achieve this help me out to move forward
below is my code
var app = angular.module('Test', ['ngResource', 'ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/user', {
templateUrl: 'user.html',
controller: 'User'
})
.otherwise({
redirectTo: '/'
});
}]);
app.controller('User', function($scope) {
localStorage.setItem('user',"true");
});

Angular ng-view not displaying [leaning angular]

I'm learning Angular and I'm having problem on the routing. I've tried to solve it myself but have no idea what it can be.
Here's my script and a Plunker link of my script
var singleApp = angular.module('singleApp', ['ngRoute'])
.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// Deletes # in URL with HTML History API
$locationProvider.html5Mode(true);
}])
.controller('mainController', function($scope) {
$scope.message = 'This is the main page';
})
.controller('aboutController', function($scope) {
$scope.message = 'This is the about page';
})
.controller('contactController', function($scope) {
$scope.message = 'This is the message page';
});
I've imported the both angular and routing scripts in html.
The pages has just $message

The first issue is with your config. You're using a great practice by using an array for your injections but the first arguments must be strings. Change this:
.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {
to this
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
Then... remove this line:
$locationProvider.html5Mode(true);
Here's information about HTML5 mode:
https://docs.angularjs.org/error/$location/nobase
Enabling HTML 5 Mode in AngularJS 1.2
http://plnkr.co/edit/EXMiz3bAEttTQac0uvgh?p=preview

You have syntax error, config function should be like this
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview

Removes the following line
//Deletes # in URL with HTML History API
$locationProvider.html5Mode(true);
Many of the errors and especially reference can view them in the browser console
You must modify the parameters of your config, should go well
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

Compare and see your code
var singleApp = angular.module('singleApp', ['ngRoute'])
singleApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
});
singleApp.controller('mainController', function($scope) {
$scope.message = 'This is the main page';
});
singleApp.controller('aboutController', function($scope) {
$scope.message = 'This is the about page';
});
singleApp.controller('contactController', function($scope) {
$scope.message = 'This is the message page';
});

$routeProvider / $locationProvider not a function in AngularJS Routing

I'm trying to create so-called 'SEO-friendly' URLs in AngularJS.
In my script.js for the routing I have:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.html5Mode(true);
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
}]);
app.controller("BlogController", function($scope) {
$scope.title = 'Blog';
});
app.controller("IdeasController", function($scope) {
$scope.title = 'Ideas';
});
To remove the # from the URL, I am enabling the html5 mode with:
$routeProvider.html5Mode(true);
however, this results in the following error:
Failed to instantiate module exampleApp due to:
TypeError: $routeProvider.html5Mode is not a function
Does anyone have a solution for this issue? It means that the content will not display from the views because of it.
Edit: for anyone wondering, the working code is:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
$locationProvider.html5Mode(true);
}]);

html5mode method is available there on $locationProvider provider.
You should include $locationProvider in your config phase to make that dependency available in config block & then enable html5mode for # free URL.
Code
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
//$routerProvider code here
$locationProvider.html5Mode(true);
}]);
Additionally you have to add <base href="/"> tag on the index.html page

state provider and route provider in angularJS

Below is my app.js file
angular
.module('repoApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/login', {
templateUrl: 'views/loginPage.html',
controller: 'loginCtrl'
})
.otherwise({
redirectTo: '/'
});
});
angular
.module('loginState',['ui.router']);
Below is my states file
angular
.module('repoApp')
.config(function ($stateProvider) {
$stateProvider.state('home1', {
url:'/home1',
templateUrl: 'views/modals/test.html'
})
.state('secondState',{
url:'/secondState',
templateUrl: 'views/modals/secondStateTest.html'
});
});
The problem is, using my html i navigate to login page.
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
<li class="loginShift"><a ng-href="#/login">Login</a></li>
</ul>
but I am trying to hit the state as soon my flow hit the controller
angular.module('repoApp')
.controller('loginCtrl', function ($scope,$modal,$state) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$state.go('home1');
$scope.openDialog = function () {
$modal.open({
keyboard: 'static',
templateUrl: 'views/login/loginCred.html',
});
};
});
but I am not able to hit the home state.
If I change my states file i.e
$stateProvider.state('home1', {
url:'/login',
templateUrl: 'views/modals/test.html'
})
here I changed URL. It works fine now.
I have a template from where I want to navigate to a next state
<div>
<button data-ng-click="openDialog()">open ME!</button>
<div><a ui-sref="secondState">click here</a></div>
</div
but as soon I click this anchor tag it navigates me back to home page. ie not to the state I intend to go.
The main issue is URL(i guess) any help will be appreciated.

You shouldn't use both ngRoute and UI-router. Here's a sample code for UI-router:
repoApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html",
controller: 'YourCtrl'
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html",
controller: 'YourOtherCtrl'
});
$urlRouterProvider.otherwise("/state1");
});
//etc.
You can find a great answer on the difference between these two in this thread: What is the difference between angular-route and angular-ui-router?
You can also consult UI-Router's docs here: https://github.com/angular-ui/ui-router

AngularJS, $routeProvider

I'm trying to learn how routes work in AngularJS to make a little application that allows users to login and write comments in a live feed. However the whole concept of routes is a bit blurry for me atm and i can't get this right.
My standard index.html containing an ng-view and necessary scripts.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
<script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
<script src="controller.js"></script>
<title>Test Login App</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
My controller containing module and routeprovider.
var myApp = angular.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase',
'firebase.utils',
'simpleLogin'
]);
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://ivproj.firebaseio.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebase(ref).$asArray();
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || 'anonymous';
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
The $routeprovider function should direct me to handler that is a simple .html file containing two buttons that in turn redirects to other htmls.

I think you have the syntax of the otherwise call in your config section wrong. Change what you have for this instead:
otherwise('/handler');
hope this helps...

you are missing '' in controller part. correct code should look like -
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
Make sure that you are referring the correct path in templateUrl.
and look at my earlier post to get a better idea - How to navigate in Angular App

myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
The $routeProvider.when() method in the above code actually creates a route with the given configuration. And the three .when()'s are creating three different routes.
But in your $routeProvider.otherwise('/handler'), you are telling angular to go to a route called /handler if the user tries to navigate anywhere outside the configured routes.
The mistake you are doing here is, you did not define a route at /handler. So you need to first define that route and then use it in .otherwise().
Try changing your configuration to reflect the below.
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});