AngularJS doesn't render view specified in $routeProvider - javascript

var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
myApp.config(function ($routeProvider) {
$routeProvider
.when("", {
templateUrl: "Views/Employee/Employees.html",
controller: "EmployeesController"
}).otherwise({ redirectTo: 'Views/Employee/Employees' });
});
It routes the URL mentioned in otherwise, not the URL mentioned in the .when

Root route of your Angular app will be "/", not "".
Then, redirectTo takes as value a route defined in your route provider.
myApp.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/Employee/Employees.html",
controller: "EmployeesController"
})
.otherwise({ redirectTo: '/' });
});

Related

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 write $routeProvider.whenLoggedIn function in common place for all modules

I have a config function in each module file like below
in app.js
config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.otherwise({redirectTo: '/home'});
}]);
in home.js
config(['$routeProvider','ChartJsProvider',
function ($routeProvider,ChartJsProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
now I want to write a $routeProvider.whenLoggedIn function like
config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.whenLoggedIn=function(){
console.log('Do something');
}
$routeProvider.otherwise({redirectTo: '/home'});
}]);
when I wrote code like code below
$routeProvider.whenLoggedIn('/profile', {
templateUrl: 'home/profile.html',
controller: 'ProfileCtrl'
});
I want to call the function whenLoggedIn. Please let me know how to write whenLoggedIn function in common place instead writing this function in every module config function
You need to add $stateProvider in app.config
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true).hashPrefix('*');
$urlRouterProvider.otherwise('/account/login');
$stateProvider
.state('account', {
abstract: true,
url: '/account',
cache: false,
template: '<div ui-view></div>',
})
//login
.state('account.login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'app/Account/login.html',
})
//forgot password
.state('account.forgotpassword', {
url: '/forgotpassword',
controller: 'ForgotPswdCtrl',
templateUrl: 'app/Account/forgotpassword.html',
})
}])

Routing in Angular

How can I organize the following code in a way that I can only get template.html and not the template1.html?
App.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: "template/home.html",
controller: "homeCtrl"
})
.when('/artist', {
templateUrl: "template/artist.html",
controller: "artistCtrl"
})
.when('/:collectionId', {
templateUrl: "template/template.html",
controller: "templateCtrl"
})
.when('/:trackId', {
templateUrl: "template/template1.html",
controller: "templateCtrl"
})
.otherwise({
redirectTo: "/"
});
}]);
Thank you for your help!
You should rename your routes.
.when('/collection:id', {
templateUrl: 'your/template.html',
controller: 'yourController'
});
})

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

controller not a function AngularJS

I have a problem. my routes do not find my controllers except /vehicules
app.js
angular.module('myApp', ['ngRoute', 'ui.grid']);
angular.module('myApp').config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/main.html',
controller: ''
})
.when('/vehicules', {
templateUrl: 'views/vehicules.html',
controller: 'VehiculeCtrl'
})
.when('/vehicule/:id', {
templateUrl: 'views/vehicule.html',
controller: 'VoirVehiculeCtrl'
})
.when('/agents', {
templateUrl: 'views/agents.html',
controller: 'AgentsCtrl'
})
.when('/agences', {
templateUrl: 'views/agences.html',
controller: 'AgencesCtrl'
})
.when('/status', {
templateUrl: 'views/status.html',
controller: 'StatusCtrl'
})
.otherwise({
redirectTo: '/'
});
});
VoirVehiculeCtrl.js
angular.module('myApp').controller('VoirVehiculeCtrl', function($scope) {});
my tree:
Javascript
controllers
VehiculeCtrl.js
VoirVehiculeCtrl.js
App.js
Views
please help me !! and sorry for my english xD

Categories