I am using routes and would like to change my background image when I am on a specific route. For some reason the background image does not change/is not reading the value of my rootScope. I make the value true in my controller for the route that needs the different background image. Anyone know what I am doing wrong here? Can I not use $rootScope in my routes to change the class of my body?
HTML:
<body ng-app="ciscoImaDashboardApp" dynamicBodyBg ng-controller="navCtrl" >
JS:
.directive('dynamicBodyBg', function($rootScope, $route){
return {
restrict: 'A',
link: function($scope, el){
$rootScope.$on('$routeChangeSuccess',
function() {
if ($route.current.locals.needToChange()){
el.css({background: url('images/background-bark#2x.jpg')});
}
else {
el.css({background: url('images/background#2x.jpg')});
}
}
);
}
}
});
Routes:
angular.module('ciscoImaDashboardApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl'
})
.when('/overall-results', {
templateUrl: 'views/overall.html',
controller: 'overallCtrl'
})
.when('/swim-lane-results', {
templateUrl: 'views/swim-lane.html',
controller: 'swimlaneCtrl'
})
.when('/key-exemplifiers', {
templateUrl: 'views/key-exemplifiers.html',
controller: 'petalCtrl'
})
.when('/key-exemplifiers/:exemplifier', {
templateUrl: 'views/single-exemplifier.html',
controller: 'keyCtrl',
resolve: {
needToChange: function(){
return true; //or false
}
}
})
.otherwise({
redirectTo: '/'
});
});
If you are using ng-route, you can do the following:
Add this directive to your body element.
app.directive('dynamicBodyBg', function($rootScope, $route){
return {
link: function($scope, el){
$rootScope.$on('$routeChangeSuccess',
function() {
//your router has changed and u can change the background
//add the logic here
if ($route.current.locals.needToChange){
el.css({background: url('//whatever background u want'});
}
else {
el.css({background: url('//restore'});
}
}
);
}
}
});
In your $routeProvider
$routeProvider
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl',
resolve: {
needToChange: function(){
return true; //or false
}
}
})
P.S Suggest you to switch to ui-router, which is much easier to understand and maintain.
Solved this by creating a rootScope and changing it for all the views.
$rootScope.backgroundImg = "url('../images/background#2x.jpg')";
And then using it in my view like this:
<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl" ng-style="
{'background-image': backgroundImg}" >
Related
I had created js (angular js code) file like below, but this js file not allowing to work other Javascript components.
'use strict';
// declare modules
angular.module('Authentication', []);
angular.module('Home', []);
angular.module('BasicHttpAuthExample', [
'Authentication',
'Home',
'ngRoute',
'ngCookies'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'modules/authentication/views/login.html',
hideMenus: true
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html'
})
.when('/component1', {
controller: 'ComponentsController',
templateUrl: 'modules/home/views/components/component1.html'
})
.when('/databaseconfig',{
controller: 'DatabaseConfigController',
templateUrl: 'modules/home/view/components/databaseConfig.html'
})
.otherwise({ redirectTo: '/login' });
}])
When ('/component1', { controller: 'ComponentsController', templateUrl: 'modules/home/views/components/component1.html' })
let us say in component1.html file, I am using ng-show/ng-hide is not working. If I use jquery components like hide/show the div based on the radio button is not working. When I am not importing above mentioned js file in component1.html then jquery (hide/show div based on radio button) angularjs (ng-show/ng-hide) components are working.
.run(['$rootScope','$location','$cookieStore','$http',
function ($rootScope, $location, $cookieStore, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
if ($rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
}
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in
if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
$location.path('/login');
}
});
}]);
i have an angularjs app with components and i want to add a view as child of another view using ui.router. i honestly dont think that ui.router fully support component, this may happen in upcomping 1.0 version. But in the meanwhile is anything that i can do to use display view dynamically?
this is my $stateProvider (i've done my attempts)
$stateProvider
.state('home', {
url :'/home',
template :'<home></home>'
})
.state('projects', {
url:'/projects',
template: "<project-list></project-list>"
})
.state('projectDetails',{
url:'/:projectId',
template : '<project-detail projectDetails="projectDetails"></project-detail>'
, views :{
'chat':{
template : '<chat></chat>'
}
}
});
$urlRouterProvider.otherwise('home');
i have created a component in this way:
(function() {
'use strict';
function ChatController($scope, $element, $attrs, $firebaseArray) {
var ctrl = this;
console.log("it works");
}
angular.module('myapp').component('chat', {
templateUrl: '/app/component/project/chat.html',
controller: ChatController
});
})(window.angular);
and then i've added the view in projectDetails
<div ui-view="chat"></div>
My understanding of your requirement is that you have a component called 'Chat' which you want to load in the state 'project-details' as a nested/child view.
As you have already observed ui-router does not support this.
But this can be achieved by making your 'project-details' as a parent state and load other components included as a child state.
Plunker Demo
angular.module('app', [
'ui.router'
]).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
template: '<home></home>'
}).state('home.parts', {
url: '/',
views: {
'about-view#home': {
template: "<about></about>"
},
'chat-view#home': {
template: "<chat></chat>"
}
}
});
}).component('app', {
templateUrl: 'app.html'
}).component('home', {
templateUrl: 'home.html',
controller: homeController,
controllerAs: 'vm'
}).component('about', {
templateUrl: 'about.html',
controller: aboutController,
controllerAs: 'vm'
}).component('chat', {
templateUrl: 'chat.html',
controller: chatController,
controllerAs: 'vm'
});
function chatController() {
this.name = "chat";
}
function aboutController() {
this.name = "about";
}
function homeController() {
this.name = "home";
}
Hope this is what you wanted.Please do not add url to the parent state.Consider making it a abstract state.
This is my app.js code (main js)
var currentUserId;
window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile',
'myApp.Registermdl',
'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.createMap', 'ui.bootstrap',
'myApp.logout', 'myApp.viewCollege']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/login', { templateUrl: 'app/Login/login.html', controller: 'LoginCtrl' });
$routeProvider.when('/home', { templateUrl: 'app/Home/home.htm', controller: 'HomeCtrl' });
$routeProvider.when('/createuser', { templateUrl: 'app/CreateUser/createUser.html', controller: 'CreateUserCtrl' });
$routeProvider.when('/signup', { templateUrl: 'app/Register/register.html', controller: 'RegisterCtrl' });
$routeProvider.when('/logout', { templateUrl: 'app/Login/login.html', controller: 'LogoutCtrl' });
$routeProvider.when('/view-map', { templateUrl: 'app/ViewMap/viewmap.html', controller: 'ViewMapCtrl' });
$routeProvider.when('/create-map', { templateUrl: 'app/CreateMapAddress/create-mapaddress.html', controller: 'CreateMapAddressCtrl' });
$routeProvider.when('/view-college', { templateUrl: 'app/ViewColleges/viewcolleges.html', controller: 'ViewCollegeCtrl' });
$routeProvider.otherwise({ redirectTo: '/login' });
}]).directive("collegeAppMain", function ($location) {
return {
restrict: "A",
link: function (scope) {
scope.getClass = function (path) {
if ($location.path() == path) {
return "active"
} else {
return ""
}
}
}
};
});
This is my directive code
directive("collegeAppMain", function ($location) {
return {
restrict: "A",
link: function (scope) {
scope.getClass = function (path) {
if ($location.path() == path) {
return "active"
} else {
return ""
}
}
}
};
});
I have called this collegeAppMain directive in my index page
<body>
<nav class="navbar navbar-default nav-custom" **collegeAppMain** role="navigation"></nav>
.
.
.
.
.</body>
It is not working. But if i change the directive name collegeAppMain to "dfhsfksksdf"
then it's working. I want to work with this collegeAppMain name
I am confused with this. Please tell me it why? How can i solve this problem?
Why its working if i gave the directive name is 'dfhsfksksdf' and why it's not working if i gave the directive name is 'collegeAppMain '?
when naming a directive using camelCase, the directive should be called from HTML like this: camel-case.
in your case, html should look like this:
<nav college-app-main class="navbar navbar-default nav-custom" role="navigation"></nav>
take a look at this answer.
for farther information about directives you can look at this tutorial.
another thing to consider is re-formatiing the code.
$routeprovider uses 'method chaining', so you can write your code like this:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/Login/login.html',
controller: 'LoginCtrl' })
.when('/home', {
templateUrl: 'app/Home/home.htm',
controller: 'HomeCtrl' })
.otherwise({
templateUrl: 'some.html',
controller: 'Home2Ctrl'
})
});
it's alot easier on the eyes.
take a look at this short video tutorial by EggHead
I want to show url as "www.test.com/!#" for that i am using $locationProvider.hashPrefix("!") ; but it shows url as "www.test.com/#!" . i want "!" before hash not after hash.
Thanks
var app = angular.module('app', []);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix("!");
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
}
)
.when('/Program', {
templateUrl: "detail1.html",
controller: "Redirect"
})
.when('/Program/123456/channel/78458585',
{
templateUrl: "details.html",
controller: "Detail"
});
});
app.controller("AppCtrl", function ($scope) {
});
app.controller("Detail", function ($scope, $location) {
});
app.controller("Redirect", function ($scope, $location) {
$location.path("/Program/123456/channel/78458585")
});
If you want a ! in the URL before the fragment identifier begins, then you need to put it in the URL to start with and not try to do it with Angular.
http://www.example.com/#foo and http://www.example.com/#!foo are different parts of the same page.
But http://www.example.com/#foo and http://www.example.com/!#foo are different pages altogether.
I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet.
This is my controllers.js:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
function greetCntr($scope, $window) {
$scope.greet = function() {
$("#modal").slideDown();
}
}
app.js
angular.module('phoneapp', []).
config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}])
Inject $locationProvider into your config, and set $locationProvider.html5Mode(true).
http://docs.angularjs.org/api/ng.$locationProvider
Simple example:
JS:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});
HTML:
Page 1 | Page 2