I need help with Intel XDK, How can I apply different Background style for each page. For now, when I select one background Style to the specific page, It automatically applies to every other page.
P.S, I am developing an app in Design mode.
you can do it throw js , by changing the style of you body depend on rout/url
if you use Angularjs for example it gonna be like that
.state('home', {
url: '/',
templateUrl: 'index.html',
controller: 'HomeController',
containerClass: 'Homecss'
})
.state('otherpage', {
url: '/otherpage',
templateUrl: 'otherpage.html',
controller: 'otherpageController',
containerClass: 'otherpagecss'
})
then
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
$rootScope.containerClass = toState.containerClass;
});
and in your html
<div ng-class="{{containerClass}}">...</div>
there is also angularjs modules help to make it easy like angular-css
Related
I have an Angular 1.x project with the following configuration:
Html root:
<base href="/admin/" />
<div ui-view="mainView">
State provider config:
config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('cats_state', {
url: 'cats',
views: {
'mainView': {
templateUrl: '/app/components/cats/cats.html'
}
}
})
.state('dogs_state', {
url: 'dogs',
views: {
'mainView': {
templateUrl: '/app/components/dogs/dogs.html'
}
}
})
}])
The cats_state and dogs_state states are associated with urls that are relative to /admin/ path and they load a specific html template on the same area. When I click on any of them, the browser url is changed to /admin/cats and/or /admin/dogs. The only issue is: how to reload the same state/template when I manually reload the /admin/cats url? I want to achieve this using angular ui-router only, if possible.
While people are viewing this question (but not answering), I have found the solution: and that is to define the
<base href="/" />
and the urls for various states as:
config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('cats_state', {
url: '/admin/cats',
views: {
'mainView': {
templateUrl: '/app/components/cats/cats.html'
}
}
})
.state('dogs_state', {
url: '/admin/dogs',
views: {
'mainView': {
templateUrl: '/app/components/dogs/dogs.html'
}
}
})
}])
I didn't quite understood why this is happening, but it works like this. Also, I have noticed that the / path is reloaded first (and therefore all dependencies), and after this, the ui-router somehow resolves the current url, probably based on the states configuration as being the one from the browser's address.
I have downloaded ace admin http://www.bootstraptemplates.net/ace-responsive-admin-template
Now I try to use it in my AngularJS project. The problem comes when I use parts of the template and separate it into custom directives. I have tried to reduce the code as much as possible and isolate the problem I am trying to describe and I have made a https://plnkr.co/edit/4Xdk9dSlTWl4rWap7zav?p=info plunker.
If you open page-content.html there is a
<sidebar></sidebar>
directive.
This directive causes the
<div class="main-content-inner">
to fall under it.
But when you copy the code from sidebar.html and replace the
<sidebar></sidebar>
directive with it you get the desired layout.
I have no idea how to deal with this behaviour.
Give this a Try
app.js
angular.module('myApp', [])
.directive("pageContent", function () {
return {
templateUrl: "page-content.html",
};
})
.directive("sidebar", function () {
return {
templateUrl: "sidebar.html",
replace:true,
};
});
I have a page with 2 ui-views, the top view has a form and some controls and the bottom view will be changed by the top view, but defaults to displaying a few tables.
I decided to try and do this initial page all in one state, and I am wondering if this is the correct way in this case. The state is called "tracker" and has the views with content as described above. When the user clicks a button in the top view, I want the bottom view to display alternate content (e.g. a map).
I can figure out how to change state "tracker" (views loaded with "controls.html" and "content.html") to a complete second state ("controls.html" and "map.html").
What I'm confused about is how would I change only the bottom view content#tracker between "contact.html" and "map.html" based on the button state in the top view.
The router is:
(function() {
'use strict';
angular.module('pb.tracker').config(function($stateProvider) {
$stateProvider.state('tracker', {
url: '/tracker',
controller: 'TrackerController as track',
data: {
pageTitle: 'Parcel Tracker',
access: 'public',
bodyClass: 'tracker'
},
views: {
'': {
templateUrl: 'modules/tracker/templates/tracker.html'
},
'controls#tracker': {
templateUrl: 'modules/tracker/templates/tracker-controls.html'
},
'content#tracker': {
templateUrl: 'modules/tracker/templates/tracker-details.html'
}
}
});
});
})();
and the base page's html is
<div class="container">
<div class="row spacer-top-xl">
<div class="col-md-12">
<div ui-view="controls"></div>
<div ui-view="content"></div>
</div>
</div>
</div>
One way out is using $broadcast and $on :
From the top view controller..
$scope.sendBroadcast = function() {
$rootScope.$broadcast('myAction');
}
and from the bottom view controller
$scope.$on('myAction', function() {
//Message received
});
another option may be using a service and $watch on a particular value for change.
I am trying to use multiple UI-views in my AngularJS app and it is not working as expected. The app is a dashboard.
My directory structure is as follows:
index.html
app/
app.js
dashboard/
dashboard.html
dashboard.js
partials/
business.html
items.html
orders.html
sales.html
login/
login.html
login.js
The problem that I am having is that my index.html file has the following line of code:
<div ui-view></div>
The above line enables my application to show the login.html page and dashboard.html page. Now I want to be able to have partial views in my dashboard.html page and so I have also put the same line of code
<div ui-view></div>
in order to be able to embed partial views in my dashboard page. Instead of embedding though, the page instead just redirects. So for example if I am in my dashboard.html and click on a navigation item such as 'business', I am redirected to partials/business.html instead of the content being embedded.
1) Can I have multiple ui-views embedded within each other?
2) Am I correctly embedding the partial views?
I have scoured the internet but cannot find a solution. Thanks in advance for the help!
You can definitely have multiple embedded views.
Check out these AngularJS UI-Router tutorials: Nested Views and Multiple Named Views.
Let me know if you still have issues after looking them over.
You can define a ui-view inside another ui-view. I have implemented it in the following manner and its pretty straight forward.
Inside index.html I have code:
<div ui-view=""></div>
Then inside user.html I have code
<div ui-view=""></div>
And I have defined a config for displaying my views as
.config(function($urlRouterProvider, $stateProvider) {
var users = {
//Name must be in format Parent.Child
name: 'users',
url: '/user',
templateUrl: 'users/user.html',
controller: 'usersHandler',
data: {
pageTitle: 'Welcome to Users'
},
},
createUsers = {
name: 'users.createUsers',
url: '/createUser',
templateUrl: 'users/createUser.html',
data: {
pageTitle: 'Create Users'
}
},
listUsers = {
name: 'users.listUsers',
url: '/listUsers',
templateUrl: 'users/userLists.html',
data: {
pageTitle: 'Users listing'
}
},
getUserDealer = {
name: 'users.getUserDealer',
url: '/getUserDealer',
templateUrl: 'users/getUserDealer.html',
data: {
pageTitle: 'Users dealer listing'
}
},
editUser = {
name: 'users.editUser',
url: '/editUser',
templateUrl: 'users/editUser.html',
data: {
pageTitle: 'Edit User'
}
};
//Similarly define all the combination you want to separate
//add routes to stateProvider
$stateProvider
.state('users', users)
.state('users.createUsers', createUsers)
.state('users.listUsers', listUsers)
.state('users.getUserDealer', getUserDealer)
.state('users.editUser', editUser);
$urlRouterProvider.otherwise('/user/listUsers');
});
Whats happening is this that user.html is my parent file which is loaded inside index.html and editUser.html, getUserDealer.html and userLists.html etc are its children which I load within user.html using ui-view.
And I provide the links for nested pages as:
<ul class="nav navbar-nav">
<li>NEW USER</li>
<li>GET USER</li>
</ul>
This can be extended to additional parents and their children as per the need.
Hope it helps!!
In my HTML I have three columns where I am rendering 3 different HTML templates.
<div id="col1" ui-view="col1"></div>
<div id="col2" ui-view="col2"></div>
<div id="col3" ui-view="col3"></div>
State demo which will render all this is like following.
$stateProvider
.state('demo',{
views: {
'col1': {
templateUrl: 'FirstTemplate.html'
},
'col2': {
templateUrl: 'SecondTemplate.html'
},
'col3': {
templateUrl: 'ThirdTemplate.html'
}
}
})
My question is, how can I change templateurl of col3 from ThirdTemplate.html to NewTemplate.html, without changing the state.
To answer this:
My question is, how can I change templateurl of col3 from ThirdTemplate.html to NewTemplate.html, without changing the state. ?
It is not possible. It is not intended nor supported.
The idea behind the UI-Router is navigation among states (even without using url, $state.go()). Once the state TO is found/resolved, all its setting are converted into implementations (controllerProvider returning controller or string which is used to find controller, templateProvider returning template, etc.)
After that, state is stable and solid. We can use some other angular features (directives) to manipulate the DOM, but unless we will change the state - its parts are fixed.
In case, we can accept state change (including current state reload) we can profit e.g. from Template Provider:
Trying to Dynamically set a templateUrl in controller based on constant
Angular and UI-Router, how to set a dynamic templateUrl
NOTE: state change above means: 1) navigate to other or 2) reload current.
<div ng-include="'NewTemplate.html'"></div>
<div ng-hide="'NewTemplate.html'">Thirdtemplate.html</div>