I'm using angular-material and ui-router within an angular-meteor project. I managed to successfully use ui-router with angular-material and everything's working except for one thing: if you notice, angular material tabs have a tiny animation making each tab's content slide from left or right when clicking on the tab. Using ui-router this animation is lost. Is there any way to keep it using ui-router? Thanks beforehand.
First of all you need to use 'ui-sref' attribute with states in your tabs instead of this pastebin.com/x4MJLfBE 'ui-view' to display your templates from the states.
<md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect>
<md-tab label="Configuration" ui-sref="admin.configurations"></md-tab>
<md-tab label="Users" ui-sref="admin.users.list"></md-tab>
<md-tab label="Songs" ui-sref="admin.songs"></md-tab>
</md-tabs>
<div ui-view></div>
ui-sref it's your states
.state('admin.configurations', {
url: '/configurations',
templateUrl: 'app/admin/configurations/configurations.tmpl.html',
controller: 'ConfigurationsController as ctrl',
})
.state('admin.users.list', {
url: '/list',
templateUrl: 'app/admin/users/users.tmpl.html',
controller: 'UsersListController as ctrl'
})
Plus your parent state must be abstract. It means that now you in admin state where you have template with your tabs
.state('admin', {
url: '/admin',
templateUrl: 'app/admin/admin.tmpl.html',
controller: 'AdminController as ctrl'
})
Ok I solved this way: it is sufficient avoiding "template" or "templateUrl" inside the router state definition and embed each content inside md-tab itself. Let the router state definition just change the url and everything will work.
Related
This is my code
app.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('student',{
url: '/student',
views: {
'list': {
templateUrl: 'list.html',
controller: 'StudentsCtrl'
},
'edit':{
templateUrl: 'edit.html',
controller: 'StudentEditCtrl'
}
}
})
}]);
<html ng-app="app">
<div ui-view="list"></div>
<div ui-view="edit"></div>
</html>
I have layout with two panels side by side,i tried the above code but at the time of page loading two panels html pages displayed at a time. But i want to display first list.html in left side then user clicks add or edit buttons in list.html that time render the edit.html in right side of the panel.
Any reason why you can't combine the HTML and controller together? The StudentCtrl could toggle showing the edit html when the add or edit buttons are clicked.
I can't think of a simple way to make it work with how you have it designed now. You'd have to some coordinating controller in your main HTML and/or some sort of shared Angular service which seems messy.
I am trying to setup my app with ui-router. I am familiar with basic nested views but I am wanting to do something more complex. I have my basic setup for the main views. I would like to have a chat popup that has its own views that are independent from the main views. I want to be able to navigate the main views and not affect the states in the chat popup. So how is this done? Do i need to have a abstract state for the chat? and then have nested views from there?
here is a visual.
and here is a plunker
plunker
$stateProvider
.state('root', {
abstract: true,
views: {
'#': {
template: '<ui-view />',
controller: 'RootCtrl',
controllerAs: 'rootCtrl'
},
'header#': {
templateUrl: 'header.html',
controller: 'HeaderCtrl',
controllerAs: 'headerCtrl'
},
'footer#': {
templateUrl: 'footer.html',
controller: 'FooterCtrl',
controllerAs: 'footerCtrl'
}
}
})
.state('root.home',{
parent:'root',
url:'/home',
templateUrl:'home.html',
controller: 'HomeController',
controllerAs:'homeCtrl'
})
.state('root.about',{
parent:'root',
url:'/about',
templateUrl:'about.html'
});
});
I suggest that, don't use footer as a ui-view, because it is completely independent of your states.
Then how?
Make your footer part as a template and use ng-include to render your footer part.
<footer ng-include="'/footer.html'"></footer>
And within footer.html you can specifies the controller for the footer view.
Benefits
No need to handle footer on each state
No need to pass chat history on every change in state.
Create Chat service/function with controllers in different js files and inject to the index.html and script.js. use bootstrap collapsible modal for pop-up chats.
Looking # your plunkr, you're on right track,though injecting controller from script.js via controllerAs is not scalable for larger app.
Instead you can create js files for each controller and service and separate partial views, just need to inject the services and controllers to index.html and mention partial views in stateprovider function.
I am not sure if You want to use route for the chat but there are two ways for you may be more
Use modals that can collabse and open when clicked like that of facebook here
Modals for bootstrap
Use angulars ngHide ngShow
For your navigation while using at sub elements on chat you can create one state for the chat and nest chat navigation in to you chat state so that any state change will not change your other chat states.
That means you will need to use substate concepts of ui-router
I'm having an issue with nested states in UI-Router. I have a two states, and upon button click it should transition to another state, and the url changes, but the template does not. Here is my code for the state logic:
$stateProvider.state('accounts', {
url: '/accounts',
views: {
'menu': {
templateUrl: 'templates/menu.html',
controller: 'MenuController'
},
'main': {
templateUrl: 'templates/accounts.html',
controller: 'AccountsController'
}
}
});
$stateProvider.state('accounts.detail', {
url: '/:accountID',
views: {
'main': {
templateUrl: 'templates/accounts.detail.html',
controller: 'AccountsDetailController'
}
}
});
And my button logic: $state.go('accounts.detail', { accountID : account.accountID});
Both of my views are wrapped up in ui-view tags. All other root states work correctly (/home, /orders) however /accounts/:accountID will not trigger the template to load and transition. Any insight will be greatly appreciated.
<ion-view /> is not the equivalent of <ui-view />, in Ionic Framework it is just a container to insert header/footer bars and content.
use <ion-nav-view /> http://ionicframework.com/docs/api/directive/ionNavView/
and reference by name this nested view in your parent view: <ion-nav-view name="main" />
My issue was that I wasn't referring to my views correctly. Because of how they are nested, I needed to use the absolute name to cause the view to show. The linked UI-router documentation describes my issue.
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names
Angular UI-Router works as expected as long as I do not use nested states. For example, this works:
$urlRouterProvider.otherwise("/marketing");
$stateProvider
.state('marketing', {
url: '/marketing',
templateUrl: 'partials/marketing',
})
.state('landing', {
url: '/landing',
templateUrl: 'partials/marketing-landing',
})
.state('features', {
url: '/features',
templateUrl: 'partials/marketing-features',
})
And this doesn't:
$urlRouterProvider.otherwise("/marketing");
$stateProvider
.state('marketing', {
url: '/marketing',
templateUrl: 'partials/marketing',
})
.state('marketing.landing', {
url: '/landing',
templateUrl: 'partials/marketing-landing',
})
.state('marketing.features', {
url: '/features',
templateUrl: 'partials/marketing-features',
})
In any case where a child URL (ie. /marketing/landing) is loaded either via a sref link or direct URL entry, only the parent partial (partials/marketing) is displayed, despite the address bar changing to the child's URL.
Index.jade:
div(ui-view)
marketing.jade:
h1 marketing layout
div(ui-view)
marketing-landing.jade:
h1 This is the landing page
marketing-features.jade:
h1 This is the features page
This is my first time using AngularUI. Let me know any other relevant information I can provide.
Turned out to be a bug in Jade / bad assumption made by UI-Router (not sure which). From: https://github.com/angular-ui/ui-router/issues/247
Use HTML in your jade file. Jade won't expand it.
First .ui-view - work correct!
But nested ui-view must be markup by plain HTML like this:
.row
.col-md-12
h4 Nested UI-VIEW
<div ui-view></div>
Assigning an empty string to the ui-view attribute seems to work for me. This keeps plain HTML out of the jade template and provides the ability to nest default jade content within the ui-view.
.row
.col-md-12
h4 Nested UI-VIEW
div(ui-view='')
p Using this approach we can have default content before ui-view is loaded
Sorry if the title of this is confusing.
I'm converting a template I purchased into an angular.js app.
I want to use different modules to organize the app.
I'm also using version 0.2.5 of angular-ui-router which allows routing with separate modules.
All is well except the template I'm using looks like this:
<div>Global Nav Bar</div>
<div>Content that changes with different states right below Nav Bar</div>
<div class="wrapsContentAndPushesToBottom">
<div>Content that changes with different states at
bottom of page thanks to parent div's class</div>
<div>Global Footer also on bottom of page due
to parent div's class</div>
</div>
I'm having a hard time getting that global footer to work because of that parent wrapping div.
Can someone help me get this to work?
UPDATE:
I can't get suggested ng-include to work with my plunkr example: http://plnkr.co/edit/dgNkHX
I also can't it working using a named view for the footer: http://plnkr.co/edit/BO8NDO
I think you're looking for ng-include. http://docs.angularjs.org/api/ng.directive:ngInclude
That will enable you to extract that global footer out to a separate file and just include it in your template.
<div ng-include src="'globalFooter.tpl.html'"></div>
Try something like this:
.state('root', {
abstract: true,
views: {
'#': {
},
'sideBar#': { templateUrl: 'views/sidebar.html', controller: 'SideBarCtrl' },
'header#': { templateUrl: 'views/header.html' },
'footer#': { templateUrl: 'views/footer.html' }
}
})
.state('main', {
url: '/',
parent: 'root',
views: {
'#': { templateUrl: 'views/main_content.html', controller: 'MainCtrl' }
}
})
This is working for me.. I have a global footer.