I am a rank beginner with angularJS and I'm developing the ui for a single-page app in angularJS using node/bower/grunt and I have installed angular-ui-bootstrap and the route and event utils from angular-ui-utils.
I've used ng-class={active:$uiRoute} on the menu items but when a menu item is selected the active class is not applied...does $uiRoute handle this or do I need to code it separately?
Apologies for asking a dumb question...
Here is the code:
`<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ui-route="/" ng-class="{active:$uiRoute}">Home</li>
<li ui-route="/about" ng-class="{active:$uiRoute}">About</li>
<li ui-route="/other" ng-class="{active:$uiRoute}">Other</li>
</ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`
And
angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/other', {
templateUrl: 'views/other.html',
controller: 'OtherCtrl'
})
.otherwise({
redirectTo: '/'
});
})
Looking through the ui-utils docs, it appears you have not injected the module dependency. Change your myApp to inject ui.utils
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ui.utils'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/other', {
templateUrl: 'views/other.html',
controller: 'OtherCtrl'
})
.otherwise({
redirectTo: '/'
});
});
add ng-class="{'active':isActive('/about')}"
.run([ '$rootScope', '$location', function($rootScope, $location, ) {
$rootScope.isActive = function(path) {
if ($location.path() && $location.path().substring(0, path.length) == path) {
return true;
}
return false;
}
}
I advise you tu use UI router with named states.
Your router will looks like :
angular
.module('myApp', ['ui.router'])
.config(($stateProvider, urlRouterProvider) => {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
})
.state('index.about', {
url: 'about/'
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
});
$urlRouterProvider.otherwise('/');
});
and you will be able to user ui-sref-active directive in your template like :
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="{ 'active': 'index' }">
Home
</li>
<li ui-sref-active="{ 'active': 'index.about' }">
About
</li>
</ul>
</div>
Related
I can't for the life of me get routing to work in SharePoint O365. I'm sure it's just mt $routeProvider, I'm really unclear as to how to reference the html templateUrl's for Sharepoint.
Here's my app.js file.
var app = angular.module("ClinicManagerApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "ClinicManager/views/home.htm",
})
.when("red", {
templateUrl: "ClinicManager/views/red.htm",
})
.when("blue", {
templateUrl: "ClinicManager/views/blue.htm",
})
.when("green", {
templateUrl: "ClinicManager/views/green.htm",
})
.otherwise({
redirectTo: "ClinicManager/views/error.htm"
})
});
The links to trigger the routing are as follows.
<li>Red</li>
<li>Blue</li>
<li>Green</li>
My folder structure is below
A document Library named "/DocLib"
/DocLib/ClinicManager
:index.htm
/DobLib/ClinicManager/views
:blue.htm
:error.htm
:green.htm
:home.htm
:red.htm
The Red link's URL looks like this "mysharepointurl/DocLib/ClinicManager/red"
When I click any link, it'll take me to a "Page not found" page.
Please help!!
Try to add / before each name:
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.htm",
})
.when("/red", {
templateUrl: "views/red.htm",
})
.when("/blue", {
templateUrl: "views/blue.htm",
})
.when("/green", {
templateUrl: "views/green.htm",
})
.otherwise({
redirectTo: "views/error.htm"
})
});
also add # in href:
<li>Red</li>
<li>Blue</li>
<li>Green</li>
Here is example how routing should look like: http://next.plnkr.co/edit/sCeIL7y6jCf3Cv72
So here is my logout on ng-click: (my view)
<div class="navbar navbar-default"><div class="container">
<div id="navbar-main">
<ul class="nav navbar-nav">
<li>Home</li>
<li ng-show="navvm.isLoggedIn" ng-hide="navvm.logout">{{ navvm.currentUser.name }}</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-hide="navvm.isLoggedIn">Sign in</li>
<li ng-show="navvm.isLoggedIn"><a ng-click="logOut()" href="">Logout</a></li>
</ul>
</div>
Then i'm trying to remove the localStorage by removing the token like so: (controller)
(function () {
angular
.module('meanApp')
.controller('logoutCtrl', logoutCtrl);
logoutCtrl.$inject = ['$location', '$window'];
function logoutCtrl($location, $window) {
logout = function() {
$window.localStorage.removeItem('mean-token');
};
}
})();
(controller):
(function () {
angular.module('meanApp', ['ngRoute']);
function config ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/register', {
templateUrl: '/auth/register/register.view.html',
controller: 'registerCtrl',
controllerAs: 'vm'
})
.when('/login', {
templateUrl: '/auth/login/login.view.html',
controller: 'loginCtrl',
controllerAs: 'vm'
})
.when('/profile', {
templateUrl: '/profile/profile.view.html',
controller: 'profileCtrl',
controllerAs: 'vm'
})
.when('/logout', {
templateUrl: '/home/home.view.html',
controller: 'logoutCtrl',
})
.otherwise({redirectTo: '/'});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
function run($rootScope, $location, authentication) {
$rootScope.$on('$routeChangeStart', function(event, nextRoute, currentRoute) {
if ($location.path() === '/profile' && !authentication.isLoggedIn()) {
$location.path('/');
}
});
}
angular
.module('meanApp')
.config(['$routeProvider', '$locationProvider', config])
.run(['$rootScope', '$location', 'authentication', run]);
})();
Whenever I try to logout the localStorage is still defined. I've tried clearing the storage. Tried deleting it. Maybe i'm not doing the angular right. I'm new to all of this so please help. Thank you!
You have to inject the $scope variable into your controller and define logout function on the $scope
logoutCtrl.$inject = ['$location', '$window', '$scope'];//injecting the $scope
function logoutCtrl($location, $window, $scope) {
//defining logout function on the $scope
$scope.logout = function() {
$window.localStorage.removeItem('mean-token');
};
}
Also you have a typo. Remove the 'O' uppercase on logOut()
<a ng-click="logout()" href="">Logout</a>
Try without window.
localStorage.removeItem('mean-token');
Fiddle
Did you try to move logout function to homeCtrl, to check if it works there?
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
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
Angular beginner here. I'm trying to basically have my link be active once I'm on a given page. Found quite couple of examples none of which work, so it must be that I'm doing wrong.
This is what I've been trying (controller) :
angular.module('MyApp')
.controller('HomeCtrl', ['$scope', function ($scope) {
$('body').addClass('homepage');
$scope.isActive = function(route) {
return route === $location.path();
}
}]);
Html :
<li "ng-class" = "{active:isActive('/') || isActive('/home')}">
Home
</li>
<li "ng-class" = "{active:isActive('/about')}">
About
</li>
<li "ng-class" = "{active:isActive('/contact')}">
Contact
</li>
Application itself :
var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'templates',
'ng-token-auth'
]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/contact', {
templateUrl: 'contact.html',
controller: 'ContactCtrl'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}])
So no matter on which page I'm located at, the ng-class does nothing with no errors in the console. However if I do this for home:
<li "ng-class" = "{active:true}">
Home
</li>
Then I get active class on my link, and this is the output :
<li ng-class="{active:true}" class="active">
Home
</li>
What am I doing wrong here? Why doesn't it interpolate the function isActive as it should?
You cannot have the logic to check the active link inside your HomeCtrl as it is one of the routes. When other routes are loaded there is no HomeCtrl loaded.
There should be controller defined outside the ng-view, such as RootCtrl. The isActive function should be added to it.
Since the child view scope would have access to parent scope, you can use the isActive in the child views normally.
Update:
Consider the html
<body ng-controller='RootCtrl'>
<div ng-view></div>
</body>
Add the isActive function on the RootCtrl.