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");
});

How to correctly load javascript across pages when using the $routeProvider in Angular1

Currently, I make use of Angular's $routeProvider and $locationProvider to browse an SPA.
It's unclear to me how to implement javascript across pages using a controller.
As soon as I switch pages the javascript controller doesn't get executed.
I have posted an example below.
My script is called from mainScript.js
app.config(['$routeProvider', '$locationProvider', function ($routeProvider,
$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "partials/home.html"
, controller: "PageCtrl"
})
// Pages
.when("/pricing", {
templateUrl: "partials/pricing.html"
, controller: "PageCtrl"
})
.otherwise("/404", {
templateUrl: "partials/404.html"
, controller: "PageCtrl"
});
}]);
app.controller('PageCtrl', function ( $scope ) {
$scope.menuCtrl = function(){
//execute code across pages
}
$scope.menuCtrl();
});
}());

you can using oclazyload .first inject oc.lazyload in your app then :
app.config(['$routeProvider', '$locationProvider', function ($routeProvider,
$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "partials/home.html"
, controller: "PageCtrl",
resolve:{
loadFiles: [
"$ocLazyLoad", function ($ocLazyLoad) {
return $ocLazyLoad.load([
"mainScript.js",
]);
}
]
}
})

$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

AngularJS $routeProvider issue

When I click on the Home link, the goTo function is executed. However, it redirects me to a blank page like so:
When I click on the browser's back button, it redirects me to the page I wanted to go to (firstPage).
Any suggestions on what I am doing wrong?
HTML:
<footer ng-controller = "footerLink">
Home
About us
Our Team
Blog
Services
Portfolio
Contact
Sitemap
</footer>
JS
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
}).
when('/buttonView', {
templateUrl: 'buttonView/buttonView.html',
controller: 'buttonViewCtrl'
}).
when('/firstPage', {
templateUrl: 'view2/view2.html',
controller: 'footerLink'
}).
when('/home', {
templateUrl: 'view1/view1.html',
controller: 'logo'
});
}])
.controller('footerLink', ['$scope', '$location', function($scope, $location) {
$scope.goTo = function (url) {
$location.path(url);
};
}])
UPDATE
I directly redirected the anchor to the firstPage route instead of calling another function. Here is what I changed to make it work:
<footer ng-controller = "footerLink">
Home
About us
Our Team
Blog
Services
Portfolio
Contact
Sitemap
</footer>

it is because you do not have a redirection rule or a route configuration for '/' you can redirect the user to home if there is no matching route.
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
}).
when('/buttonView', {
templateUrl: 'buttonView/buttonView.html',
controller: 'buttonViewCtrl'
}).
when('/firstPage', {
templateUrl: 'view2/view2.html',
controller: 'footerLink'
}).
when('/home', {
templateUrl: 'view1/view1.html',
controller: 'logo'
}).otherwise({redirectTo: '/home'});
}])
.controller('footerLink', ['$scope', '$location', function($scope, $location) {
$scope.goTo = function (url) {
$location.path(url);
}; // this function is not really required
}]);
and instead of creating another function to redirect user you can use the use the href on html as you are not doing any other processing there except redirecting user.
<footer ng-controller = "footerLink">
Home
About us
Our Team
Blog
Services
Portfolio
Contact
Sitemap
</footer>

Error on removing # from URL using $locationProvider

I keep getting Uncaught Error: [$injector:modulerr] when using $locationProvider to remove the # from root. How can I fix it?
var myApp = angular.module('myApp', ['ngRoute']);
// routes
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
});
myApp.controller('mainController', function($scope) {
$scope.message = 'hello';
});
I am calling both angular/angular-route and using base href="/" on head.

Are you minifying the code?
You should add the dependencies as string before the function arguments.
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
}]);