I have the next code:
var app = angular.module('ForclazApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when("/", {
templateUrl: "partials/header.html"
})
.when("/motos", {
templateUrl: "partials/motos.html"
})
.when("/repuestos", {
templateUrl: "partials/repuestos.html"
})
.when("/taller", {
templateUrl: "partials/taller.html"
})
.when("/blog", {
templateUrl: "partials/blog.html"
})
.when("/contacto", {
templateUrl: "partials/contacto.html"
})
.otherwise({
redirectTo: '/'
});
});
Doesn't matter in which link you click, it always redirects to header.html template. I'm using AngularJS 1.6.3.
The console log doesn't show me any error.
The menu's links:
<ul class="nav navbar-nav navbar-right">
<li class="nav-li">Inicio </li>
<li class="nav-li">Motos </li>
<li class="nav-li">Repuestos </li>
<li class="nav-li">Taller </li>
<li class="nav-li">Blog </li>
<li class="nav-li">Contacto </li>
</ul>
.otherwise({
redirectTo: '/'
});
Is basically saying that if none of the other options are matched go to to the route /. Which in your case is main. Your .when(.. checks aren't matching the way you want them to.
In your html. Remove the / from all of your links. So it should look like this:
<li class="nav-li">Contacto </li>
that will match it the way you want it to.
you should remove all # . And i think you should use ui-router instead ng-router . it better for you
https://github.com/angular-ui/ui-router
Related
This is the link for the hotels
<ul>
<li ng-repeat="hotel in vm.hotels">
<a ng-href="#/hotel/{{ hotel._id }}">{{ hotel.name }}</a>
</li>
</ul>
and the route is this
angular.module('myApp', ['ngRoute']).config(config);
function config($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'angular-app/hotel-list/hotels.html',
controller: HotelsController,
controllerAs: 'vm'
})
.when('/hotel/:id', {
templateUrl: 'angular-app/hotel-display/hotel.html',
controller: HotelController,
controllerAs: 'vm'
});
}
there is no error in the console, I have put <div ng-view></div> in the correct place
but it is not giving what I wanted. Any corrections please?Thank you!
With AngularJS V1.6, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c
<ul>
<li ng-repeat="hotel in vm.hotels">
̶<̶a̶ ̶n̶g̶-̶h̶r̶e̶f̶=̶"̶#̶/̶h̶o̶t̶e̶l̶/̶{̶{̶ ̶h̶o̶t̶e̶l̶.̶_̶i̶d̶ ̶}̶}̶"̶>̶{̶{̶ ̶h̶o̶t̶e̶l̶.̶n̶a̶m̶e̶ ̶}̶}̶<̶/̶a̶>̶
<a ng-href="#!/hotel/{{ hotel._id }}">{{ hotel.name }}</a>
</li>
</ul>
For more information, see AngularJS Developer Guide - Migrating to V1.6 - $location
I am not able to figure out why this behaviour occur. Each time I try to load new location by clicking anchors, it redirect to root location. I am builing my app in subdirectory http://localhost/myapp/. Kindly see the code below.
Here is HTML Code:
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Insert Leave</li>
<li>Current Year</li>
</li>
</ul>
Here is script:
var app = angular.module('leaveApp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'templates/temp.php',
controller : 'homeCtrl'
})
.when('/insertLeaveDetails',{
templateUrl : 'templates/temp.php',
controller : 'insertLeaveDetailsCtrl'
})
.when('/currentYearDetails',{
templateUrl : 'templates/temp.php',
controller : 'currentYearDetailsCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
app.controller('homeCtrl',['$scope',function($scope){
console.log('home ctrl');
$scope.msg = 'This is home ctrl';
}]);
app.controller('insertLeaveDetailsCtrl',['$scope',function($scope){
console.log('insert ctrl');
$scope.msg = 'This is leave ctrl';
}]);
app.controller('currentYearDetailsCtrl',['$scope',function($scope){
console.log('current deatail ctrl');
$scope.msg = 'This is current year ctrl';
}]);
The default value for $locationProvider.hashPrefix is "!". This means that, unless you change the provider value, your links should look like
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Insert Leave</li>
<li>Current Year</li>
</ul>
I am developing a web application using angular js & spring-mvc.
In the header of my application
header.jsp
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header" >
<a class="navbar-brand"
href="<c:url value="/home"/>" >Pipeline Tracker
</a >
</div >
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active">
<a ui-sref="empty">PIPELINE</a>
</li>
<li ui-sref-active="active">
<a ui-sref="employees">ADMIN</a>
</li>
</ul>
</div>
</div>
</nav>
app.js
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('empty', {
url: '/',
view: {
'main':{
templateUrl: 'views/templates/empty.html',
controller: 'EmptyController'
}
}
})
.state('employees',{
url: '/admin/employees',
view: {
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
$urlRouterProvider.otherwise('/');
});
I am unable to set the templateUrl property, so my app navigates perfectly. I can see url changing accordingly to '#/' and '#/admin/employees' but nothing is displayed. There is no error in the console also.
I tried to set templateUrl two ways. One with html and another with jsp using context url. None of them working.
I removed routing and checked the data loads pefectly. No issue with data loading.
for loading dependencies:
var app = angular.module('pipeline', [
'ngResource',
'infinite-scroll',
'angularSpinner',
'jcs-autoValidate',
'angular-ladda',
'mgcrea.ngStrap',
'toaster',
'ngAnimate',
'ui.router'
]);
index.jsp
<div class="container main-content">
<div ui-view="main"></div>
</div>
How to set this templateUrl property? I am relatively new to angular, so do let know if you need any more info on this.
I believe it's a syntax error, should be "views" and not "view".
.state('employees',{
url: '/admin/employees',
views: { <--- change view to views
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
I'm not familiar with the "view:" syntax you're using. does it work if you do:
.state("test", {
templateUrl: "views/templates/empty.html",
controller: 'EmptyController'
}
http://localhost:8070/#/test
I have an AngularJS webapp. I´m changing the application so the URLs can be multilanguage (for SEO indexing purposes).
I´m setting up my app.js, like this:
$routeProvider.when('/:language', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
$routeProvider.when('/:language/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});
Then, in a service I get the language parameter with $routeParams and call my translation code with angular-translate to serve the page in the corresponding language.
Everything is working so far.
But, moreover, in the menu bar, I have a select combo box to choose the language. So, when user change the language, the url language parameter should change.
How should I do this?
Here's an example. Like I said in your other question, I'd use ui-router for this.
http://plnkr.co/edit/bCNgS07BblMHz55VBRSQ?p=preview
The language dropdown will preserve the currently selected state. So if you go to home -> paragraph, then change language, you will remain on the paragraph route but the language parameter will change.
app.js:
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/en');
$stateProvider
.state('lang', {
url: '/:language',
templateUrl: 'partial-lang.html',
abstract: true,
controller: function($state, $scope) {
$scope.changeLanguage = function(language) {
$state.go($state.current.name, {language: language});
}
}
})
.state('lang.home', {
url: '',
templateUrl: 'partial-home.html'
})
.state('lang.home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('lang.home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
.state('lang.about', {
url: '/about',
templateUrl: 'partial-about.html'
});
});
partial-lang.html:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref=".home">Home</a></li>
<li><a ui-sref=".about">About</a></li>
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Language: {{$state.params.language | uppercase}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href ng-click="changeLanguage('en')">English</a></li>
<li><a href ng-click="changeLanguage('fr')">Français</a></li>
<li><a href ng-click="changeLanguage('ru')">Русский</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
index.html
<body ng-app="routerApp">
<div ui-view></div>
<pre>
<p>state = {{$state | json}}</p>
</pre>
</body>
The rest of the files are self-explanatory
You bind your combo box to a variable, then you can use $watch to know when it changes, and finally you can user $route to update language.
$watch info
$route info
Update:
Something like this:
$scope.$watch('language', function (newValue, oldValue) {
if (newValue !== oldValue) {
$route.updateParams({language: newValue});
}
});
UPDATE VERSION 1.0.7
$scope.$watch('language', function (newValue, oldValue) {
if (newValue !== oldValue) {
var path = $location.path();
path = path.replace('/'+oldValue+'/', '/'+newValue+'/');
console.log(path);
$location.path(path);
$route.reload();
}
});
I'm working on a project that has implemented the UI router and it's using ui-sref-active="active" to add the active class to the navigation menu item when that item is the current route. However, when you navigate to a nested view within that view, the parent menu item is no longer active. See the following Plunker:
http://plnkr.co/edit/2CoEdS?p=preview
By default (or if you click on it) Route 1 is "active". When you click on "Show List," you will see that Route 1 is no longer active.
Edit:
The only difference between this example and my actual project is that the navigation menu in my actual project has its own controller and so does not use the same scope as the controller for "route1".
EDIT For updated ui-router 0.2.13:
ui-sref-active="active" now sets the 'active' class when the current state is the ui-sref's state or any child
ui-sref-active-eq="active" behaves as the previous iterations of ui-sref-active, and only sets the class for the exact state
Original Answer:
See open ui-router issues:
https://github.com/angular-ui/ui-router/issues/704 and 818
A general workaround people are suggesting is:
ng-class="{active:$state.includes('route1')}"
Of course, $state must be added to $scope. See updated plunk: http://plnkr.co/edit/KHLDJP?p=preview
You are having a wrong understanding of ui-sref-active="active"
<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>
This will show special css highlighting only when you are in state route1 (reference https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active). This is the case when you click on route 1. But when you click on "Show list" you are no longer in route1.
Rather you are in state "route1.list" . You can verify this by writing the following code. This is strictly for understanding how state works.
js
inside controller
$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
inside html
{{currentState}}
If you look closely at documentation of ui-sref-active, it not only looks at stateName but also stateParams, hence when you go to substate it no longer changes css. From the sourcecode it becomes clearer.
function update() {
if ($state.$current.self === state && matchesParams()) {
$element.addClass(activeClass);
} else {
$element.removeClass(activeClass);
}// route1===route1.list will not be true.
to solve the problem, remember scope variables are inherited in nested views.
inside controller of route.
$scope.route1Active = true;
in html
<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
Angular UI router now supports this natively. See commit https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01
My solution was to set:
<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">
The state was already previously added to the controller's scope:
$scope.state = $state;
You do not need to do any thing in the controllers. Here is my example code:
<ul class="nav nav-pills nav-stacked" role="tablist">
<li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
<li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
</ul>
In route configuration:
$stateProvider.state('Booking', {
abstract: true,
url: '/Booking',
templateUrl: "TourApp/Templates/Booking/SideMenu.html",
controller: "SideMenuController"
});
$stateProvider.state('Booking.Step1', {
url: "/Step1",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step1.html",
controller: "Step1Controller"
}
}
});
$stateProvider.state('Booking.Step2', {
url: "/Step2",
views: {
'content': {
templateUrl: "TourApp/Templates/Booking/Step2.html",
controller: "Step2Controller"
}
}
});
Now they have updated and the new way to do that is
<a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>
Below is the state file
angular.module('manage.people', ['people.invite'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('main.app.manage.people', {
url: '/people',
abstract: true,
cache: false,
views: {
'tabContent': {
template: '<div ui-view="peopleContent"></div>',
controller: 'peopleController'
}
}
})
.state('main.app.manage.people.list', {
url: '/list',
views: {
'peopleContent': {
templateUrl: '/internal/main/app/manage/people/views/people.html',
controller: 'peopleListController'
}
}
});
We already have a solution without any "hack" HERE
That's the way to do:
HTML >
<li ui-sref-active="active" >
<a href="#" class="submenu" ui-sref="bands">
<i class="fa fa-location-arrow" aria-hidden="true"></i>
Bands
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li ui-sref-active="active">
<a ui-sref="bands.nirvana">
Nirvana
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.iron">
Iron
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="bands.metalica">
Metalica
</a>
</li>
</ul>
Our router config will be like this >
$stateProvider.state('bands', {
abstract: true,
url: '/bands',
templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view>
controller: "SomeController as vm"
}).state('bands.nirvana', {
url: '/nirvana',
templateUrl: "myapp/categories/band.nirvana.html",
controller: "SomeController as vm"
}).state('bands.iron', {
url: '/iron',
templateUrl: "myapp/categories/band.iron.html",
controller: "SomeController as vm"
}).state('bands.meatlica', {
url: '/metalica',
templateUrl: "myapp/categories/band.metalica.html",
controller: "SomeController as vm"
})
I have come here 2 years later the question was asked but angular-ui-router has much proficient approach in solving this issue. It worked for nested states too.
<ul>
<li ui-sref-active="active" class="item">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
When app navigates to home state, this is how resulting HTML will appear :
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="home">Home</a>
</li>
<!-- ... -->
</ul>
ui-sref-active quick reference :
A directive working alongside ui-sref to add classes to an element
when the related ui-sref directive's state is active, and removing
them when it is inactive. The primary use-case is to simplify the
special appearance of navigation menus relying on ui-sref, by having
the "active" state's menu button appear different, distinguishing it
from the inactive menu items.
Complete documentation.
I hope this is what you have been looking for.Place the parent url in the list class ,now whenever you navigate to child class parent class will be active
Step 1: Add a Controller for your nav bar orin your existing controller where nav bar is included add the following
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
Step2: In your nav bar
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
Thats it.