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
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'm trying to create the 'main layout' for my page using ui-router views, but I can't seem to get it working right (various errors, controllers not getting called, templates not getting loaded).
<!DOCTYPE html>
<html ng-app="App">
<head>
...
</head>
<body>
<header ui-view="header">
</header>
<section ui-view="navigation">
</section>
<section ui-view="content">
</section
</body>
</html>
The idea is to have a state representing the "root" state for the whole site providing templates for navigation and header as well as a "root controller". Every other state loads it's content into the "content" view without affecting the others.
$stateProvider
.state("index", {
url: "/",
controller: "App.IndexController",
controllerAs: "vm",
views: {
"header#index" : { templateUrl: "app/main/header.html" }
// nav etc.
}
The app loads without any errors, but the templates as well as the controller never get invoked. Did I miss something?
I also saw that many people provide a separate "layout" view that get's loaded into an unnamed view (mostly on the <body> tag), but I consider this useless as the main index.html file is already my layout. Or: Is there a better way to achieve what I want?
There is an answer Angular UI Router - Nested States with multiple layouts with a working plunker showing layout: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=preview
The point is that there is index.html with
<div ui-view="layout"></div>
And the root state then injects into that ui-view="layout" its own template (layout) and also injects into layout views.
So firstly the layout template:
<div>
<section class="top">
<div ui-view="top"></div>
</section>
<section class="middle">
<section class="left">
<div ui-view="left"></div>
</section>
<section class="main">
<div ui-view="main"></div>
</section>
</section>
</div>
And here is state def
$stateProvider
.state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header#root': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer#root': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})
And how it is working? we are using the absolute and relative target names.
View Names - Relative vs. Absolute Names
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname#statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
For example, the previous example could also be written as:
.state('report',{
views: {
'filters#': { },
'tabledata#': { },
'graph#': { }
}
})
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.
I am working on a site using angularjs. I divide the page into two section: menu and content.
for example
this a page: /mainpage
<div>
<div id="menu">
<div ng-click="setTemplate('firstPage.html')">Page 1</div>
<div ng-click="setTemplate('secondPage.html')">Page 2</div>
<div ng-click="setTemplate('thirdPage.html')">Page 3</div>
</div>
<div id="content" ng-template="template">
</div>
</div>
controller:
$scope.template = 'firstPage.html';
$scope.setTemplate = function(value){
$scope.template = value;
}
So after click on Page 1 Then Page 2 Then Page 3. So when i click on the back button, it load the last page / but not /mainpage with the right template. How would i handle the back button to not go back to previous page and go to previous template if there was a template change?
Thanks.
You should look at https://github.com/angular-ui/ui-router. You could build the functionality yourself, but ui-router is pretty much where you will end up.
The problem is you have nothing for it to default to. When you click back, it's just loading /mainpage, but it has no template to load in. Usually you use a $routeprovider for this:
$routeProvider
.when('/',
{
controller: 'yourControllerName.js',
templateUrl:'mainpage.html'
})
.otherwise(
{
redirectTo : '/'
});
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