I have a problem with my code:
var app = angular.module( "myApp", ['ngRoute'] );
app.config( function ( $routeProvider ) {
$routeProvider
.when( '/home', { templateUrl: 'strony/home.html' } )
.when( '/about', { templateUrl: 'strony/about.html' } )
.when( '/contact', { templateUrl: 'strony/contact.html' } )
.otherwise( { redirectTo: '/this' } );
});
app.controller( 'MainCtrl', function ( $scope ) {
});
<div ng-controller="MainCtrl">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<div ng-view></div>
</div>
and i have three html positions in folder: 'strony'. If i click on link adress name is changing but on site nothing happenes. Can you help me with this?
Related
I have been having some issues regarding routing of directives within directives.
This is my app.config for ui-routing:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('modules', {
url: '/home',
templateUrl: 'resources/modules/home/templates/module-panel.jsp'
})
.state('customer', {
url: '/customer',
templateUrl: 'resources/modules/customer/templates/customer-panel.jsp'
})
.state('customerProfile', {
url: '/customer/customerProfile',
templateUrl: 'resources/modules/customer/templates/customer-profile.jsp'
})
.state('customerList', {
url: '/customer/customerList',
templateUrl: 'resources/modules/customer/templates/customer-list.jsp'
});
;
/*$locationProvider.html5Mode(true);*/
As far as my directives are concerned, the main directive is "customer" and its sub-directives are "customer-list" and "customer-profile" respectively.
This is the html for "customer" directive:
<span ng-controller="CustomerController as custCtrl">
<div class="sub-menu">
<ul class="menuList">
<li class=""><a class="anime" ui-sref="customerList" ng-class="{active: custCtrl.customerListPanel}" ng-click="custCtrl.openCustomerList()">Customer List</a></li>
<li class=""><a class="anime" ui-sref="customerProfile" ng-class="{active: custCtrl.customerProfilePanel}" ng-click="custCtrl.openCustomerProfile()">Customer Profile</a></li>
</ul>
</div>
<div ng-show="custCtrl.customerListPanel">
<customer-list></customer-list>
</div>
<div ng-show="custCtrl.customerProfilePanel">
<customer-profile></customer-profile>
</div>
</span>
But the problem is, when the control goes to either of "customer-profile" or "customer-list", the content of "customer" are gone. I want "customer" directive to act as the "master" and both of these directives should use the main "customer" template other than their respective html.
I'm new to both ui router and angularjs. The problem I'm facing is -
In my header
<li ng-class="{active: $state.includes('settings')}" id="header01">
<a ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>
</li>
In my main.js i have -
$stateProvider.state("settings",{
abstract: true,
url: '/Settings',
templateUrl: 'Settings/settings.html',
resolve: {
},
controller: ['$scope', '$state', 'contacts', 'utils',
]
});
$stateProvider.state("settings.personal",{
url:'/Personal',
controller: "settingPersonal",
templateUrl: "Settings/personal.html"
});
$stateProvider.state("settings.additional",{
url:'/Additional',
controller: "settingPersonal",
templateUrl: "Settings/Additional.html"
});
$stateProvider.state("settings.reset",{
url:'/ResetPass',
controller: "myCtrl2 as second",
templateUrl: "Settings/password_reset.html"
});
Now when i change from personal to any other tab, the settings in header becomes inactive. How to solve this.
Thank you.
One approach would be to use state.data, eg:
.state('settings', {
url: '/settings',
templateUrl: 'settings/settings.html',
data: {
pageTitle: 'Settings'
}
})
Then in your view you can access $state.current.data:
<li ng-class="{active: $state.current.data.pageTitle('Settings')}">
<a ui-sref="settings">Settings</a>
</li>
<li ng-class="{active: $state.current.data.pageTitle('About')}">
<a ui-sref="settings">About</a>
</li>
But personally, i'd probably put the nav items in an ng-repeat, and create the page title/class dynamically with state.data, to avoid hard coding page titles.
I am using Angular Routing on my page and I also want to highlight menu item corresponded to current content.
I tried to use ngClass and controller like in this post but it has no effect
Here's the code:
index.html
<body ng-app="sApp">
<div ng-controller="NavCtrl" class="nav">
<ul>
<li ng-class="{ active-btn: isActive('/')}">
HOME
</li>
<li ng-class="{ active-btn: isActive('/1')}">
PAGE1
</li>
<li ng-class="{ active-btn: isActive('/2')}">
PAGE2
</li>
</ul>
</div>
<div class="content" ng-view=""></div>
style.css
.nav {
padding: 1rem;
text-align: center;
background-color: #ffa500;
}
.nav ul li {
display: inline;
font-weight: 700;
}
.menu-btn {
padding: 1rem;
}
.menu-btn:hover {
background-color: #ee82ee;
}
.active-btn {
background-color: #00f;
}
script.js
'use strict';
var sApp;
sApp = angular.module('sApp', ['ngRoute']);
sApp.config(function($routeProvider) {
return $routeProvider
.when('/', {templateUrl: 'h.html'})
.when('/1', {templateUrl: '1.html'})
.when('/2', {templateUrl: '2.html'})
.otherwise({redirectTo: '/'});
});
sApp.controller('NavCtrl', function($scope, $location) {
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});
Here is the plunker:
It looks like that menu items can't change the classes to active-btn.
Can you help me please?
You can do something like this:
<li ng-class="{active: $route.current.loadedTemplateUrl=='/1'}">
My 1 active
</li>
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="sApp">
<div ng-controller="NavCtrl" class="nav">
<ul>
<li ng-class="classActive('/')">
HOME
</li>
<li ng-class="classActive('/1')">
PAGE1
</li>
<li ng-class="classActive('/2')">
PAGE2
</li>
</ul>
</div>
<div class="content" ng-view=""></div>
</body>
</html>
And the script.js
'use strict';
var sApp;
sApp = angular.module('sApp', ['ngRoute']);
sApp.config(function($routeProvider) {
return $routeProvider
.when('/', {templateUrl: 'h.html'})
.when('/1', {templateUrl: '1.html'})
.when('/2', {templateUrl: '2.html'})
.otherwise({redirectTo: '/'});
});
sApp.controller('NavCtrl', function($scope, $location) {
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
$scope.classActive = function( viewLocation ) {
if( $scope.isActive(viewLocation) ) {
return 'active-btn';
}
else {
return 'inactive-btn';
}
}
});
Its better to not put too much logic in the html, to have a function like this makes a lot more sense. Even more sense would be to wrap all the menu stuff in a object and just iterate the object. Then you can also listen to locationsuccess for instance and just change the object, without changing it on click. That way its not dependent on a click.
Thats how i would do it, that way the logic can stay in a abstract service too and is more reusable.
Goodluck!
Say you have a basic router set up in Angular as follows:
app.config(function($routeProvider) {
$routeProvider.when('/', {
redirectTo: "/news"
}).when('/news', {
templateUrl: "partials/pages/news.html",
controller: "NewsCtrl"
}).when('/about', {
templateUrl: "partials/pages/about.html",
controller: "AboutCtrl"
})
});
And then you have an index.html that looks like:
<nav>
<ul>
<li>news</li>
<li>about</li>
</ul>
</nav>
<section ng-view></section>
What's the best way to add the .active class to the link corresponding to the route? Create a controller for the navigation? Use $rootScope? Etc. I'm having a problem with both those options, as neither seems very clean when I implement it.
I use next code:
<ul class="navigation">
<li ng-class="{active : (current == '/')}"><span>Articles</span></li>
<li ng-class="{active : (current == '/about')}"><span>About</span></li>
<li ng-class="{active : (current == '/contact')}"><span>Contact</span></li>
</ul>
In JS:
app.run(['$location', '$rootScope', function($location, $rootScope, $document) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
$rootScope.current = $location.path();
});
}]);
I am looking to show a block of HTML only when $state.current.name equals about.list. So far I have the following code but it doesn't seem to be toggling the element depending on the state.
index.html
<nav class="global-navigation">
<ul class="list">
<li class="list-item">
<a class="list-item-link" ui-sref="home">
Home
</a>
</li>
<li class="list-item">
<a class="list-item-link" ui-sref="about">
About
</a>
</li>
<li class="list-item" ng-show="$state.current.name == 'about.list'">
<a class="list-item-link" ui-sref="about.list">
List
</a>
</li>
</ul>
</nav>
app.js
var myApp = angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/404.html');
$stateProvider.
// Home
state('home', {
url: '/',
templateUrl: 'partials/_home.html',
controller: 'homeCtrl'
}).
// About
state('about', {
url: '/about',
templateUrl: 'partials/_about.html',
controller: 'aboutCtrl'
}).
// About List
state('about.list', {
url: '/list',
controller: 'aboutCtrl',
templateUrl: 'partials/_about.list.html',
views: {
'list': { templateUrl: 'partials/_about.list.html' }
}
});
}]
);
You can use filters like isState or includedByState.
ng-if="'about.list' | isState" // exactly 'about.list'
ng-if="'about' | includedByState" // works for about and its children about.*
Or
JS
.run(function ($state,$rootScope) {
$rootScope.$state = $state;
})
HTML
data-ng-show="$state.includes('about.list')"
The view (html) doesn't know about the variable $state. It only knows the $scope that is associated with the view.
You can expose the $state variable on the $scope inside the controller that is associated with this view (you might have to inject $state into your controller as well):
$scope.uiRouterState = $state;
Then change the expression in your markup slightly:
<li class="list-item" ng-show="uiRouterState.current.name == 'about.list'">