I am using angularjs with ui-router and need a dashboard pattern with this.
I have a menu and I want to open a widget on clicking this button with its content and when I click 2nd button another widget with it's content should be loaded without disturbing 1st one.
my idea was this.
Routing
$stateProvider
.state("dashboard", {
abstract:true,
url: "/",
templateUrl:partialDir+"dashbord.html",
controller:"dashboardCtrl"
})
.state("dashboard.home",{
url:"home",
views:{
'teacher':{
//teacher's partial and controller alongwith further child routes
},
'Student':{
//student's partial and controller alongwith further child routes
},
//same for employee
}
});
})
DashboardCtrl
it manages an array against click event.click on teacher in menu will send view="teacher"
this array is generating against every click correctly but i want something like this....
<ul ng-repeat="view in views|unique:'name'">
<li><ui-view="{{view.name}}"></ui-view></li>
</ul>
which is not working.
InShort I want to show multiple named views but not at once.wanna show them against click event with separate scope for each widget.
I think I have cleared my app's structure will anyone help n tell me why these named views are not working as I want.Am I doing something wrong?
Related
So not certain if this is possible with ui.router, but thought I would add a nice little modal that launches and says welcome to the site, give the user a chance to enter some details and so forth.
Setup is that the base view have two ui-views (mainview and menuview), and I added formview in the modal. I can get it to work so that when the modal opens it loads formview
.state('form-welcome', {
views: {
formview:
{
templateUrl: "/modals/form-welcome",
},
},
//parent:"index"
})
Didn't actually think it would work that easy, but it did, the problem is that as soon as it has loaded, it resets mainview and menuview (and as it is a modal, that means the background goes grey).
I tried to make form-welcome a child of index (the initial view), however, that breaks the whole thing. (index looks as follows)
.state('index', {
url:"/int/index",
views: {
mainview: {
templateUrl: "/pages/index",
controller: "sketchMagController"
},
menuview: {templateUrl: "/pages/top-menu"},
},
})
I can reload all three views (mainview, menuview and formview), and other than a flickering screen its not to bad. But is there a way I can limit state, so that it only changes formview but leaves the other ones alone.
Reason is that I want to change formview through five different screens, and hate flickering pages:)
It seems to me like it should be possible, but I may have missunderstood how it works
UI-router is for changing the application state, not nesting views together. For that purpose you have angular#component.
var app = angular.module('app', []);
app.component('myModal', {
template: '<div ng-show="isShowing">Hello User</div>',
controller: 'modalCtrl'
});
app.controller('modalCtrl', ['$scope', 'modalService', function($scope, modalService) {
//Save showing state in a service (default to false) so you don't popup your modal everytime user visit homepage
$scope.isShowing = modalService.getShowStatus();
$scope.pressButton = function() {
$scope.isShowing = false;
modalService.setShowStatus(false);
}
});
Then using ui-router, declare your index state, with its template as follow
<-- INDEX.HTML -->
<my-modal></my-modal>
<div ui-view='mainview'></div>
<div ui-view='menuview'></div>
The power of ui-router is the ability to replace the ui-views by different template each different state
stateIndex: abstract
stateIndex.stateA: mainview: /home.html
stateIndex.stateB: mainview: /information.html
So ask yourself, will menuview gonna change to different templates in future states? If not, make it a component.
I would try a different approach, and not having this "welcome" modal part of UI router. It doesn't sounds it should be a "state" in an app, where you can navigate to etc.
I would just pop up this welcome modal after your app finished to bootstrap (e.g. in your run() method or after w/e logic you have to start your app), based on your business logic (e.g. show it only one time).
Why not try $uibModal, part of ui-bootstrap? https://angular-ui.github.io/bootstrap/
It sounds like its everything you need, It pretty much has its own state (includes its own view and controller) so piping data in is easy. You can even pass on data captured within the modal with a simple result.then(function(){} . We use it at work and it doesn't reload the state its on.
You'll probably just want to have it be a function that runs automatically in your controller. If you want to limit how often it pops up you can even have some logic for determining when it pops up in the resolve, pass it to your controller and open the modal based on the resolve.
I think the best way to accomplish what you want is to listen on state changed event and fire the modal. The idea is you fire the welcome modal when the first view is opened and then you set variable in localStorage or some service (depends what you want to achive). Here is an example
$rootScope.$on(['$stateChangeSuccess', function(){
var welcomeModalFired = localStorage.get('welcomeModalFired');
if(!welcomeModalFired) {
//fire modal
localStorage.set('welcomeModalFired', true);
}
})
I have menu, when i click on menu i want html page to be displayed within the same page. I am displaying html content in body of my parent html.I used ui-sref and it works fine when i link to html page but it does not work when i link to external site eg: google.com. Please let me know how to open external link using ui-sref. Is there any other way to do other than ui-sref? i used ng-href, but the problem is it will open new page . i want content of google.com inside my html page with menu bar displaying and in body i should be able to display google.com site . Please let me know is there any way to do this.
Note: i dont want to redirect to new page. I want html content to be displayed inside parent html . In my case i have menu bar in parent html. when i click on link in menu bar child html should be displayed inside parent template and i should be seeing both menu bar and child html page . Is there any way to do this in angular js?
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html' //working fine
})
.state('about', {
url: '/about',
templateUrl: 'http:google.com' //not working
})
here is the plunker https://plnkr.co/edit/RB5rxEvxxeN7T5fufSeV
Please let me know is there any way to do this. If it is not possible in ui-sref then please let me know alternate way to do this in angular
My navbar should be on top of almost every page (but not all), so I'm trying to load it for some pages using ui-view, but I'm stuck.
What I'm trying to do is to attach my navbar to main states (like contacts, about) and their child states (contacts.list, contacts.detail, etc), but If I do it that way, nav is injected into their main divs so it gets smaller, so I need to attach it into index.html directly.
I copied ui-router's demo app, created a ui-view called navbar, removed navigation part from index.html and created navbar.html.
Here's my plunk : http://plnkr.co/edit/i0DuDcocH04TZadim2Oo
I can't load your plunkr but i already did something like that.
If you want to use a navbar that is independant from the rest you'll need to use views for each part of your main page (like : header / content /foooter).
For that you can have an index like this :
<body>
<section>
<div ui-view="header"/>
</section>
<section>
<div ui-view="content"/>
</section>
</body>
Then define your main state
$state.state('home', {
url:'/'
views:{
'header':{
templateUrl:'navbar.html',
controller:'navbarController'
},
'content':{
templateUrl:'content.html'
controller:'contentController'
}
}
});
In your navbar template you have now a dedicated template and controller so you can do whatever you want with it.
If you need to listen for change event for instance :
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
// transitionTo() promise will be rejected with
// a 'transition prevented' error
})
from : http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
The $rootScope is normal, events are only broadcasted through $rootScope.
If you need to pass data between the view you have to stored your variable in the $rootScope. I searched for other way to do it but it's just to much way simplier and enough to use the $rootScope for this.
If ypou want to add some classes when some state (or children) are active you can use the directive ui-sref-active : http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active. Directive ui-sref-active-eq for strict equality.
When using views you will have a trouble about using subState if you don't want using your app in full view but just normal state with template and controller. The best for that is to have an intermediate state wit a view define like this :
views:{
'#':{
template:'<div ui-view/>'
}
}
Then you can define children of this state normally without using views.
Though i can really say if that's what you're searching for without loading your plunkr i hope this will help you.
I would have two sets of nested states. For the main.xx group you would inject your navbar and create nested states from there. Then each non-nav partial would have it's own set of states. Here is an example.
I've been playing with UI-Router since ngRoute doesn't quite cover what I needed based on my different layouts requiring multiple nested views. What I can't figure out in UI-Router is how to load default nested views without having to click a link. I created a crude example of what I'm mean in a plunker
Essentially there are two main route within each there is a container which hosts nested views. I want to load a default view into them without have to click a ui-sref.
<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login
Thanks
On your parent state add a param
.state('parentState', {
//...
params: {
autoActivateChild: 'parentState.childState'
}
//...
})
And add this somewhere
$rootScope.$on('$stateChangeSuccess', function(event, toState){
var aac;
if(aac = toState && toState.params && toState.params.autoActivateChild){
$state.go(aac);
}
});
If you wanted to navigate automatically to a default child state when the parent loads, you could trigger a click on that particular ui-sref in your controller.
angular.element("#childElementId").trigger('click');
I have a view in which I am listing out existing contacts.
route : /contacts
controller : contacts.list
view : /templates/list.html
I have another view in which I want to add a new contact
route : /contacts/add
controller : contacts.add
view : /templates/add.html
Using route, I am able to show either of these when needed.
But the challenge I am facing is to show the add form page in a popup when clicked on Add button instead of replacing list view.
Basically I want to link "Add" with the /contacts/add URL which will load the view in a popup and bind the controller to it, instead of replacing the entire view.
Please help me in how to think in Angular to achieve this.
Following is what I have currently.
var myModule =
angular
.module('myModule', [])
.config(['$routeProvider', function config($routeProvider){
$routeProvider
.when('/contacts', {
controller : 'contacts.list',
templateUrl : 'templates/contacts/list.html'
})
.when('/cotnacts/add', {
controller : 'contacts.add',
templateUrl : 'templates/contacts/add.html'
});
}]);
You might want to map angular routes to custom events and not really using <ng-view>
See this: www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm