I am working of AngularJs v 1 app with ui routing.
My question simply how to set the home page active without clicking the ui-sref link.
I tried with ng-class="active" but it doesn't achieve the task.
<script>
angular.module("myApp",['ui.router'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state("home",{
url:"home",
views:{
'main':{templateUrl:"home.html"}
}
});
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/home");
</script>
<div class="container" style="margin-top: 60px">
<div ui-view="main"> </div>
</div>
Home page
<div class="row" style=" margin-top:100px; " ng-app="app" ng-class="active">
<h1>Home</h1>
</div>
What you are looking for is ui-sref-active
From the doc
A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive. The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref, by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.
It will add the active for you if you're currently on the right state.
Markup should look something along the line of
<div class="some-navigation-class">
<a ui-sref="home" ui-sref-active="active">Home</a>
<!-- more nav goes here -->
</div>
Related
I am trying to load different form based on user interaction in single page application. ng-view was helpful until i had to load/hide forms in different divs of same page.
div#1: it will have catalog names populated from ng-repeat.
div#2: should populate forms ( order / schedule / list ) based on button click from top nav.
div#3: should only populate sub catalog list when user selects catalog in div#1.
index.html
<div class="left_column">
<ul>
<li ng-repeat="catalog in catalogs">{{ catalog }}</li>
</ul>
</div>
<div class="top_row">
<ng-view></ng-view>
</div>
<div class="bottom_row">
<ng-view></ng-view>
</div>
app.js
myApp.config(function($routeProvider){
$routeProvider
.when('/orderForm', {
templateUrl: '/orderForm.html',
controller: 'orderFormController'
})
.when('/scheduleForm', {
templateUrl: '/views/html/parameterForm.html',
controller: 'parameterFormController'
})
.when('/subCataloglist', {
templateUrl: '/subCataloglist.html',
controller: 'subController'
})
});
How can i load different forms at a time in single page ? is there any better example for multi view logic ?
I think that this attempt isn't correct.
I have seen only one ng-view, which could change class attached according to view url.
But here i propose much simpler architecture.
Use one view. On this view do ng-repeat in div1 as it was.
in div2 do a ng-if statement and connect it with clicking on buttons.
div three simillar - you can use ng-show or ng-if. ng-if doesn't render in dom, ng-show renders but hide.
<div class="top_row">
<form id="form1" ng-if="selval=1">
</form>
<form id="form2" ng-if="selval=2">
</form>
</div>
menu:
<ul>
<li>order</li>
<li>schedule</li>
controller attached to current html view:
$scope.sel = function(n){
$scope.selval = n;
}
As two-way binding is implemented in angular, it will work automatically.
I am building an angular app with nested views using ui-router. The app has a list of posts, each with its own Nav menu to change the post's view.
To simplify the context, lets just say that each nav menu can change the theme of the post it is attached to.
POST 1 CONTENT
[Light theme button] [Dark theme button]
--------------------------------------------
POST 2 CONTENT
[Light theme button] [Dark theme button]
--------------------------------------------
*
*
*
The problem I am facing is when I press a button on one post's nav menu, all the posts change.
I want the nav menu for each post only to effect its respective post.
I am a total beginner to angular and my questions are:
Is this a problem i would want to solve with ui-router? (do i want to
have a router for each post?)
If it is, how do i solve it?
If not, can you point me in the right direction?
any help is appreciated, whether it is a link, explanation, code or just a comment.
PS. in reality i am not just changing the theme, i am changing the content on the post completely. In the future i want to implement more than just 2 options menu options.
here is the code that i am using now (modified a bit to remove redundancy):
Main.js:
angular.module('app',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/postlist');
$stateProvider
.state('postlist', {
url: '/postlist',
templateUrl: 'ListView.html',
controller: ListCtrl
})
.state('postlist.light', {
templateUrl: 'pollViewLight.html',
controller: PollLightCtrl
})
.state('postlist.dark', {
templateUrl: 'pollViewDark.html',
controller: PollDarkCtrl
})
});
simplified part of index.html:
<nav>
<ul>
<li><a ui-sref="postlist">Post List</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
ListView.html:
<div class="row" ng-repeat="post in posts">
<div class="col">
<div ui-view></div>
<ul class="nav nav-pills">
<li><a ui-sref=".light">Light Theme</a></li>
<li><a ui-sref=".dark">Dark Theme</a></li>
</ul>
</div>
</div>
I am brand new to AngularJs and after following some tutorials I decided to try to implement a one page app into one of my projects. I have it working but I had one question about this code. Could I change what is shown on the first page before they navigate to anything? I don't want it shown on every page just when they first land on it before clicking any links.
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('cfgController',function($scope){
/*
Here you can handle controller for specific route as well.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
</div>
<br/>
<div ng-view>
<!--
This DIV loads templates depending upon route.
-->
</div>
</div>
</body>
The pages load fine and if I try to add something to the index.html under ng-view it doesn't show up on the page.
You want to put the content to show up when a user first hits your site under in your "home.html" page which is linked to your "/" route for "ng-view". When a user clicks a link, they will be taken to a new route, and the code/ will be replaced by the route they selected.
I'm using ui-router and I have the following index view:
<div ng-include="'/views/topbar.html'"></div>
<div class="vm-view">
<div class="container-fluid" ui-view></div>
</div>
So, all the content will be loaded under the top bar. Thats ok, but I need to render a single view without the top bar (full screen). I want to do this without use named views. I want to preserve the index structure intact and states hierarchy too.
Try to add some class depending on current state to hide topbar
<div ng-controller="someCtrl">
<div ng-class="{hide:isSpecialState()}" ng-include="'/views/topbar.html'"></div>
<div class="vm-view">
<div class="container-fluid" ui-view></div>
</div>
</div>
app.controller('someCtrl', function($state) {
$scope.isSpecialState = function() {
return $state.is('<STATE_NAME>');
};
})
I am using ng-boilerplate and ui-router in my angular.js app. I have a 3 section layout, a topbar, a sidebar and a main layout. I use ng-switch to show different views in the main layout. Here is how my index.html looks like
<div class="slide-animate" ng-include="HeaderTemplate"></div>
<div class="slide-animate" ng-include="SidebarTemplate"></div>
<div ng-switch on="section">
<div ui-view="secion1" class="secion1" ng-switch-when="secion1"></div>
<div ui-view="secion2" class="secion2" ng-switch-when="secion2"></div>
<div ui-view="secion3" class="secion3" ng-switch-when="secion3"></div>
</div>
My HeaderTemplate and SidebarTemplate are being rendered but the main layout is not being rendered.
I checked the value of section in $scope. It is section1 which is fine and when i inspect in developer tools this is what the DOM looks like
<div ng-switch="" on="section">
<!-- ngSwitchWhen: section1 --><div ui-view="section1" class="section1 ng-scope" ng-switch-when="section1"><!-- ui-view-anchor --></div>
<!-- ngSwitchWhen: section2 -->
<!-- ngSwitchWhen: section3 -->
</div>
So here the correct section is chosen but the ui-view just shows a commented ui-view-anchor.(I have no idea what that is.). I looked at my html source to see if i am getting the templates for my section1, section2, etc and i see that i am getting them. I saw that in the templates-app.js, i am getting the html for my sections. Any idea why it is not rendering the html when it is getting it? My $stateProvider configuration looks like this
$stateProvider.state('section1', {
url: '/section1',
views: {
"section1": {
controller: 'Section1Ctrl',
templateUrl: 'section1/section1.tpl.html'
}
},
data: { pageTitle: 'Section 1' }
});
and so on.
Looks like ui-router v0.2.8 is broken or not compatible with angular.js v1.2.12. I switched back to ui-router v0.2.7 everything works fine