I have controller and template views of that controllers.
ProductCtrl => Products.html
SomeCrtl => Some.html
FooCtrl => Foo.html
I have a ui-view on home page.
<html>
<body>
<div ui-view></div>
....
State config like this:
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider.state("product", {
url: "/product",
templateUrl: "templates/Products.html",
controller: "ProductCtrl"
});
}])
My last view is appearing on ui-view when application started. But I want that ui-view should be empty. When I click a link then should view that content.
Try to wrap your ui-view with an HTML element, and manipulate hide it using ng-hide depending on the current state.
Code sample
<div ng-hide="$state.current.name === 'home'">
<div ui-view></div>
</div>
Another way to do what #bookmarker mentioned:
<div ng-hide="$state.includes('home')">
<div ui-view></div>
</div>
$state.includes('...') can be used to see if a state contains a specified state, that is, check if a child state contains a certain parent state.
Related
Login page (partial/login.html)
Includes a login form that will be shown using (ng-view)
Member page (partial/main.html)
Includes a nav bar
Includes the main container for contents (ng-view)
Question is how can I "hide" the nav bar in the Login page and only show it after the user has logged in?
Both my login page and member page shared the same index.html ng-view.
Sample index.html
<html ng-app>
<!-- LOGGED IN, SHOW NAV AND CONTENT-->
<div ng-if="logged" class="main_container">
<nav>
... nav bar contents here...
</nav>
<div class="main_container">
<div ng-view>... show partials ...</div>
</div>
</div><!-- end of LOGGED IN, SHOW NAV AND CONTENT-->
<!-- NOT LOGGED IN -->
<div ng-if="!logged" class="main_container">
<div ng-view></div>
</div>
<footer>...</footer
</html>
Tried using ng-if, but controllers are being called twice. May I know what others alternatives do I have?
ng-view should only be used once.
$routeProvider will help you load different view when $route changed, like:
app.config(function($routeProvider){
$routeProvider.when('/login', {
controller: 'LoginController',
templateUrl: 'partial/login.html'
})
.when('/', {
controller: 'MainController',
templateUrl: 'partial.main.html'
});
});
So now you only need to show/hide nav by your root controller, which can be injected in more top div in your page.
<div ng-controller="RootController" class="main_container">
<nav ng-if="logged">
... nav bar contents here...
</nav>
<div class="main_container">
<div ng-view>... show partials ...</div>
</div>
</div>
Next, you can set/get logged in RootController or its child controllers. Notice setting variables in child controller may create a new variable in child scope, so I suggest add a function in RootController to set logged or use a service/factory to store logged status.
You can do this using the ng-show directive, with the help of a function inside your controller.
<nav ng-show="loginStatus()">
... nav bar contents here...
</nav>
And inside your controller, you can add a function as such...
$scope.loginStatus= function() {
return $loginVariable;
}
Use the loginVariable to return true/false based on the users login status.
Similarly, you can use the ng-hide directive to hide the main_container div.
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
Hi I am trying to render a new view based on clicks of a button in a navbar. However, it is not working.
Here is my HTML Code:
<!-- Links to all the pages with data entry forms -->
<div id="data_links" ng-controller="MainCtrl">
<ul>
<li>
Home
</li>
</ul>
</div>
</div>
<!-- Modify views here -->
<div class="main" ng-controller="MainCtrl">
<main role="main">
<div ng-view> <!-- Where we will inject html --> </div>
</main>
</div>
<!-- Application Files -->
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>
Here is my app.js:
angular.module('DataEntry', [
'ngRoute'
]).config(function ( $routeProvider ) {
$routeProvider
.when('instructions', {
templateUrl: 'views/instructions.html',
controller: 'MainCtrl'
});
});
Here is my controller main.js:
angular.module('DataEntry')
.controller('MainCtrl',
function MainCtrl ( $scope, $location ) {
'use strict';
$scope.ChangeView = function(view) {
alert(view);
$location.url(view);
}
});
This is my instructions.html page for testing to see if it loads:
<div class="module instructions">
<div class="module_instructions">
<h1> Testing Loaded! </h1>
<p> Test <br>
Test <br> Test <br> Test
</p>
</div>
</div>
I want to eventually be able to click on multiple links within a navbar, such as home, instructions, etc. and render different views within the ng-view section. However, it is not working right now and I am not sure how to scale it so I can add more .html pages for the different views I want to render. Can someone help me move forward?
This line
<a href="#" title="Home Page" ng-click = "ChangeView('instructions')"> Home
Can be changed to this:
Home
You don't need to use a function on your controller to set the url, although you can navigate this way - sometimes you want to redirect the user programatically and this works for those cases.
Also, leaving href="#" in that line is causing you a problem. In a non-angular page # is used as a href placeholder but on an Angular href="#" is actually going to be picked up by $routeProvider which will try to change the contents of the ng-view container. What loads will depend upon how you set up your .config section, but is generally not desirable behavior.
As you create more pages, add paths to your .config section and you can link to them from your html the same way as I did above with the /instructions path.
Here's an example:
angular.module('DataEntry', ['ngRoute'])
.config(function ( $routeProvider ) {
$routeProvider
.when('instructions', {
templateUrl: 'views/instructions.html',
controller: 'MainCtrl'
})
.when('faq', {
templateUrl: 'views/faq.html',
controller: 'FaqCtrl'
})
.when('example', {
templateUrl: 'views/example.html',
controller: 'ExampleCtrl'
})
});
and in your markup:
Home
FAQ
Example
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
In my home:
.state('home',{
url: '',
views: {
'': {
templateUrl: 'views/main.html',
controller:'MainCtrl'
}
...
I loop through some books and also have a simple search field to filter the items:
<input type="text" ng-model="search">
<article class="items" ng-repeat="book in allBooks | filter: search" >
This works, but I would like to add the input filed inside a sidebar, and have that sidebar in a seperate view - so that I would not have to duplicate it in every view. So in my index.html I have the following code
<div ng-include ng-controller="MainCtrl" src="'views/sidebar.html'" class="sidebar"></div>
<div class="container" ui-view></div>
Assuming that this is a good practice, is there a way to add the search input field inside the sidebar, and still have it effect the loop in the home state?
Thanks
You can make the home state a nested view of the sidebar. The ng-model that your filter is bound to in the sidebar view will then be available to the home state. The home state will delegate to the above sidebar scope when it doesn't find a search property on its own scope.
Here's my quick and dirty example:
http://plnkr.co/gmUaDLSfJxOL42EPZ9ak