I have a mind bugging problem. I`m new to Angular and I want to obtain the following behavior:
I have a defaultView in app.js:
$stateProvider
.state("defaultView", {
url: '/home',
controller: "MatrixController",
templateUrl: "assets/js/angular/templates/matrix.html"
})
.state("defaultView.createDiet", {
url: '/create-diet',
controller: "ModalController",
templateUrl: "assets/js/angular/templates/createDietModal.html"
});
And in the default view, I have:
<div class="wrapperCalendar" ui-view>
<div data-ui-view="defaultView"></div>
<div data-ui-view="createDiet"></div>
</div>
Basically I am trying to achieve an opening of a dialog (bootstrap modal) that is brought from another route, but I don't want to change the main view (defaultview). I just want to get the HTML for the dialog, insert it in the page without losing another section, and open it. Do you have any idea how can I acomplish that ?
Related
I have an AngularJS app with 2 routes /home and /about.
I'm using ng-router and each route has different controllers HomeCtrl and AboutCtrl. The default route is /home.
The thing is that before display the content I want to add a preloader, just a simple div which will hide when the content is loaded.
<div class="myApp">
<div class="preloader"></div>
<div ui-view></div>
</div>
My question is, in which controller should I add this?
Should I add a new controller outside the ng-view for this kind of stuff?
Can someone explain me best practice?
I suppose the best way to do this is to use flag for data loaded indication directle in controller. So depend on this flag with ng-if directive you can show 'div' with loading indicator if dataLoadedFlag is false and div with your data otherwise.
You have ng-view, and your views render over there with its corresponding controller.
So the only thing you need ng-if
<ng-view>
<div ng-if="!$scope.contentIsReady">
content loading
</div>
<div ng-if="$scope.contentIsReady">
content here
</div>
</ng-view>
#Hiero In your case of course, you have to create new controller.
Also you can use nested views. Something like this:
$stateProvider.state('home', {
url: '/home',
views: {
"main": {
templateUrl: '....',
controller: '....'
},
'view-with-data#home': {
templateUrl: '...',
controller: '...',
}
}
});
See more at https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
I'm trying to access a nested view with the direct url, without navigating through links but it's not working.
My config is:
myApp.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('st1', {
url: '/st1',
templateUrl: 'st1.html',
})
.state('st1.st2', {
url: '/st2',
templateUrl: 'st2.html',
})
;
$locationProvider.html5Mode(true);
});
st1.html:
<h1>ST1</h1>
<div ui-view></div>
<a ui-sref="st1.st2">ST2</a>
st2.html:
<h2>ST2</h2>
<a ui-sref="st1">ST1</a>
I go directly to /st1, typing it not clicking a link, st1 html shows up.
When I click the link in st1, the location path changes to /st1/st2 and st2's content shows up, that is what I want, but when I refresh on /st1/st2 the page is empty.
What do I miss?
I am using Angular JS and UI-Routing. The routing works fine. My problem is showing and hiding a slider depending on what page the user is on.
My index.html looks something like this:
<body ng-app="myApp">
<header ng-include="'templates/header.html'"></header>
<div>Code for slider</div>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
</div><!--/container-->
<!-- End Content Part -->
<footer ng-include="'templates/footer.html'"></footer>
my app.js looks like this:
angular
.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'templates/home.html'
})
.state('about',{
url: '/about',
templateUrl: 'templates/about.html'
})
.state('contact',{
url: '/contact',
template: 'CONTACT'
})
}])
.controller()
Now I tried to include the slider in the home.html template but then it does not properly work due to initialisation requirements. When I use a controller in the different routes it is out of scope. So how do I pass a variable referring to the state to a controller indepent of the route so I can use it for it something like
if (state==home) {
$scope.showSlider==true;
}else{ $scope.showSlider==false;}
Thanks,
Gerd
UPDATE:
#Chris T
I have added this to my app.js:
.controller('myController',['$scope', '$state', function($scope,$state){
if ($state.includes('home')){
$scope.showIt=true;
}else{
$scope.showIt=false;
}
}])
Then I applied the controller to a div I wrapped around the slider and used
ng-show="showIt"
Inject $state into your controller. Then check if $state.includes("home");
Update:
I made a plunk with a parent state which controls the slider enabled/disabled based on $state.includes('main.home')
http://plnkr.co/edit/eT1MW0IU53qfca6sGzOl?p=preview
Intro
I'm using AngularJS with the AngularUI module to build an admin interface with several views.
I have a simple Layout for public pages which has one ui-view and another one for admin pages which has four ui-views (header, sidebar, main, footer).
Problem
The problem I have is if I set the ui-view main the public state won't display the login view, but if I won't set the ui-view main the public state will display the login view. The header, sidebar and footer work with any setting. It seems some setting is overriding another even I tried to set absolute names. Could someone explain what's going on here?
ui-view="main" ==> Login doesn't show
ui-view="" ==> Login shows
Visual layout:
Source code (index.html):
<body>
...
<div ui-view="public">
</div>
<div class="admin">
<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<div class="container" style="margin-top:60px" ui-view="">
<!-- ^ add main here -->
</div>
<div ui-view="footer"></div>
</div>
...
</body>
Code example
I set up a minimal full code example to outline the problem:
Plunker Edit
Plunker Run
I've played around with your demo a little bit and had a look at the ui-router documentation.
If you change your 'public' state as shown below then it seems to work.
Original:
.state('public', {
url: '/login',
title: 'Login',
templateUrl: 'login.html'
})
Updated:
.state('public', {
url: '/login',
views: {
'main#': {
title: 'Login',
templateUrl: 'login.html'
}
}
})
Here is an updated plunkr:
http://plnkr.co/edit/okBWMPpWysS9srKrcxeG?p=preview
Is that what you're trying to do, or are you trying to set up login as a nested view?
Here is my code:
.state('profile',{
url : '/profile',
templateUrl: 'views/user.html',
controller: 'UserCtrl'
})
.state('profile.forgot',{
url : '/delivers',
templateUrl: 'views/user_forgot.html', <- this template not appear, when state is active
controller: 'forgotCtrl'
})
<a ui-sref="profile.forgot">Forgot your pasword?</a>
<div class="panel" ui-view=""></div>
When i click on link, in ui-view appeared template and controller of parent state.
AngularJS version is 1.2.0-rc.2
A nested state will render within the ui-view element of its parent template (which, if parentless, renders within the root ui-view). Make sure you read the 'Nested States & Views' section of the docs.
Please Pay attention to parent-child naming convention!
.state('profile.forgot',{
url : '/forgot',
templateUrl: 'views/profile.forgot.html',
controller: 'forgotCtrl'
})