I am trying to do something here but it does not work, I have the following view:
<header ui-view="header">
</header>
and here is my app.js file:
.state('root', {
url: '',
views: {
'header': {
templateUrl: '/js/app/partials/layout/header.html',
controller: 'HeaderController'
},
'slider': {
templateUrl: '/js/app/partials/slider.html'
},
'container#': {
templateUrl: '/js/app/partials/home.html',
controller: 'HomeController'
},
'sidebar': {
templateUrl: '/js/app/partials/layout/sidebar.html',
controller: 'SideBarController'
},
'footer':{
templateUrl: '/js/app/partials/layout/footer.html'
}
}
})
Now this particular view:
'slider': {
templateUrl: '/js/app/partials/slider.html'
},
is not in my index.html file but rather within my /partial/layout/header.html file. Now the header template is being loaded into the header view, but the slider view does not show.
This is my header.html partial with my slider view inside:
<div class="container-fluid">
<div class="col-md-12">
<a href="#" class="pull-left">
<img src="images/logo.png" alt="Your Happy Family" class="img-responsive">
</a>
<!-- Begin Top Navigation -->
<div class="menu_block">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul class="sf-menu">
<li class="home"><a ui-sref="root.home">home</a></li>
<li class="tickets">
tickets
<ul>
<li class="bus">Bus</li>
<li class="airline">Local Airline</li>
<li class="events">Events</li>
</ul>
<div class="clear"></div>
</li>
<li class="partners"><a ui-sref="root.partners">partners</a></li>
<li class="contact"><a ui-sref="root.contact">contact us</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<!-- End Top Navigation -->
<div class="clear"></div>
<!-- Slider View -->
<div ui-view="slider">
</div>
<div class="clear"></div>
</div>
</div>
I am doing this for a reason, I need my slider view to appear within the header section.
What you usually need is relative pathing for multiple nested views. If you scroll down to the bottom of the docs (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views) they explain what the syntax of relative pathing does.
This might be what you're looking for but I always get a little tripped up without actually testing the pathing and without a plunker...
'slider#root': {
templateUrl: '/js/app/partials/slider.html'
},
Related
I'm new to Angular UI Router and am trying to create an application with nested views.
I've an index.html which hosts the 'header' state and the 'content' state. Within the content state, I have two nav bars representing a Global view and a Sub view. The Global View should open by default when the user opens the application.
However, at present, whenever I run the application, both Global and Sub view controllers are getting executed together(both views are getting loaded together).
What I wish instead is that only Global controller should get executed at first and then when the user clicks on Sub view, its controller should get executed. Following this, whenever the user switches between both the views, the controllers should reload.
I have been reading through Google and here but wasn't able to find the required solution. Please let me know if this is possible using ui-router. Thanks.
index.html
<html>
<body>
<div class="fluid-container">
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
</body>
</html>
content.html
<div class="row" style="background-color: #F9F9F8">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" href="#globalView">Global</a></li>
<li><a data-toggle="pill" href="#subView">Sub View</a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<br>
<hr></hr>
<div class="tab-content">
<div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div>
<div id="subAccountView" class="tab-pane fade" ui-view="subView"></div>
</div>
</div>
app.js
$urlRouterProvider.otherwise("/firstPage");
$urlRouterProvider.when('', '/firstPage');
$stateProvider
.state('home', {
url: '',
views: {
/** Find the views named in index.html and inject the named views**/
'header': {
templateUrl: 'views/header.html',
controller: 'headerController',
controllerAs: 'headerCtrl'
},
'content': {
templateUrl: 'views/content.html',
controller: 'contentController',
controllerAs: 'contentCtrl',
}
}
})
.state('home.summary', {
url: '/firstPage',
views: {
'globalView': {
templateUrl: "views/globalViewPage.html",
controller: "globalViewController",
controllerAs: "globalViewCtrl"
},
'subView': {
templateUrl: "views/subView.html",
controller: "subViewController",
controllerAs: "subViewCtrl"
}
}
});
I found the solution to my query by going through the tutorial provided by Weedoze in the comments. Below are the updated files.
index.html remains the same as above.
content.html
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a ui-sref=".globalView">Global</a></li>
<li><a ui-sref=".subView">Sub View</a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<br>
<hr></hr>
<div class="tab-content">
<div class="tab-pane fade in active" ui-view></div>
</div>
</div>
A point to add here is that I was earlier having data-toggle="pill" in my anchor tag which was causing issues in navigating between the two child views. After digging further, I found that if this toggle is removed, the navigation works smoothly.
app.js
$urlRouterProvider.otherwise("/globalView");
$urlRouterProvider.when('', '/globalView');
$stateProvider
.state('home', {
url: '',
views: {
/** Find the views named in index.html and inject the named views**/
'header': {
templateUrl: 'views/header.html',
controller: 'headerController',
controllerAs: 'headerCtrl'
},
'content': {
templateUrl: 'views/content.html',
controller: 'contentController',
controllerAs: 'contentCtrl',
}
}
})
.state('home.globalView', {
templateUrl: "views/globalViewPage.html",
controller: "globalViewController",
controllerAs: "globalViewCtrl",
url: '/globalView'
})
.state('home.subView', {
templateUrl: "views/subView.html",
controller: "subViewController",
controllerAs: "subViewCtrl",
url: '/subView'
});
This code lets me switch between the two child views and whenever I toggle between the views, the controllers get reloaded.
I am new to angularjs and trying to change my codes using $routeProvider to $urlRouterProvider.
Here is my code for using $routeProvider:
.when('/cars', {
templateUrl: 'views/cars.html',
controller: 'CarsCtrl'
})
.when('/cars/:id', {
templateUrl: 'views/cardetail.html',
controller: 'CarDetailCtrl'
})
and my html looks like this:
<div class="list-group" ng-repeat="car in cars">
<a href="#/cars/{{car.id}}" class="list-group-item active">
<h4 class="list-group-item-heading">{{car.id}}</h4>
<p class="list-group-item-text">Car name: {{car.name}}</p>
<p class="list-group-item-text">Car date: {{car.date}}</p>
</a>
</div>
So when I click on one of the car arrays, it leads to cardetail.html.
This code works in using $routeProvider. Now, I am trying to convert this to using $urlRouterProvider, and I am having a bit of problem.
What I did so far looks like this (which doesn't work):
.state('cars', {
url: '/cars',
parent: 'dashboard',
templateUrl: 'views/modules/cars/cars.html?v='+window.app_version,
controller: 'CarsCtrl'
})
.state('carDetail', {
url: '/car/:id',
parent: 'dashboard',
templateUrl: 'views/modules/cars/carsDetail.html?v='+window.app_version,
controller: 'CarDetailCtrl'
})
and my HTML:
<pageheader pagename="Cars" subtitle="your cars"></pageheader>
<div class="list-group" ng-repeat="car in cars">
<a ng-href="#/carDetail/{{id}}" class="list-group-item active">
<h4 class="list-group-item-heading">{{car.id}}</h4>
<p class="list-group-item-text">Car name: {{car.name}}</p>
<p class="list-group-item-text">Car date: {{car.date}}</p>
</a>
</div>
Is there a problem in my HTML?
help much appreciated.
Use ui-sref to build your links.
<a ui-sref="carDetail({id: id})" class="list-group-item active">
I am developing a web application using angular js & spring-mvc.
In the header of my application
header.jsp
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header" >
<a class="navbar-brand"
href="<c:url value="/home"/>" >Pipeline Tracker
</a >
</div >
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active">
<a ui-sref="empty">PIPELINE</a>
</li>
<li ui-sref-active="active">
<a ui-sref="employees">ADMIN</a>
</li>
</ul>
</div>
</div>
</nav>
app.js
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('empty', {
url: '/',
view: {
'main':{
templateUrl: 'views/templates/empty.html',
controller: 'EmptyController'
}
}
})
.state('employees',{
url: '/admin/employees',
view: {
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
$urlRouterProvider.otherwise('/');
});
I am unable to set the templateUrl property, so my app navigates perfectly. I can see url changing accordingly to '#/' and '#/admin/employees' but nothing is displayed. There is no error in the console also.
I tried to set templateUrl two ways. One with html and another with jsp using context url. None of them working.
I removed routing and checked the data loads pefectly. No issue with data loading.
for loading dependencies:
var app = angular.module('pipeline', [
'ngResource',
'infinite-scroll',
'angularSpinner',
'jcs-autoValidate',
'angular-ladda',
'mgcrea.ngStrap',
'toaster',
'ngAnimate',
'ui.router'
]);
index.jsp
<div class="container main-content">
<div ui-view="main"></div>
</div>
How to set this templateUrl property? I am relatively new to angular, so do let know if you need any more info on this.
I believe it's a syntax error, should be "views" and not "view".
.state('employees',{
url: '/admin/employees',
views: { <--- change view to views
'main':{
templateUrl: 'http://localhost:8070/PipelineClient/views/templates/employee.jsp',
controller: 'TestController'
}
}
});
I'm not familiar with the "view:" syntax you're using. does it work if you do:
.state("test", {
templateUrl: "views/templates/empty.html",
controller: 'EmptyController'
}
http://localhost:8070/#/test
I am trying to import a toggleable sidebar and trying to use nested views so that I can dynamically change content of each section individually.
My app has 3 main components
1) a sidebar
2) a header
3) a content area
The problem I have is that in the original project everything is inside a single controller and there is an ng-class that toggles the sidebar which is can be toggled on clicking, but I am unable to reproduce it in the my application.
Here is what my index.html code looks like at the moment
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<div id="sidebar-wrapper" ui-view="sidebar">
</div>
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header" ui-view="header">
</div>
<!-- Header Bar -->
<div ui-view="content" ></div>
</div>
</div>
</div>
And my route config.
.state('home', {
url: '/',
views: {
'content': {
templateUrl: 'home.html',
controller: 'HomeCtrl as home'
},
'sidebar': {
controller: 'SidebarCtrl as sidebar',
templateUrl: 'sidebar.html'
},
'header': {
controller: 'HeaderCtrl as header',
templateUrl: 'header.html'
}
}
});
I am confused on how I can toggle the sidebar using ng-class as I cannot place it inside any other template for it to work.
My previous comments as an answer:
in your html:
<div id="page-wrapper" ng-controller="myctrl" ng-class="{'open': toggle}" ng-cloak>
...
</div>
in your script file:
.controller('myctrl',[ '$scope', function($scope){
$scope.toggle = true; // open initially
}]);
Since my app has a navigation menu repeated in several pages, I made a directive for it. Now, the .active class isn't applied to current page anymore. Do I need to put the controller inside the directive?
Though not elegant, here's my code so far. Thanks.
page.html
<div class="app-container">
<div class="header clearfix">
<div ng-controller="NavmenuCtrl">
<nav-menu></nav-menu>
</div><!-- END NavmenuCtrl -->
</div><!-- /header -->
<div class="container"></div>
</div><!-- /app-container -->
navmenu directive
'use strict';
var app = angular.module('tempApp');
app.controller('NavmenuCtrl', function ($scope, $route) {
$scope.navMenuState = function($scope) {
$scope.navState = $route.current.navState;
};
});
app.directive('navMenu', function($route) {
return {
scope: {},
restrict: 'E',
replace: true,
templateUrl: 'views/partials/navmenu.html',
link: function navMenuState(scope, element, attrs, controller){
// Watch for the $location
scope.$watch(function() {
// do I need a scope.$watch?
}
};
});
navmenu.html partial
<div>
<div class="nav-container">
<ul class="navbar">
<li class="col-xs-5" ng-class="{ active:route.current.navState === 'pg1Active' }">
<a href="/#/pg1/">
<img src="images/icon1.png" class="center-block">
</a>
</li>
<li class="col-xs-5" ng-class="{ active:route.current.navState === 'pg2Active' }">
<a href="/#/pg2">
<img src="images/icon2.png" class="center-block">
</a>
</li>
</ul><!-- /.navbar -->
<div class="overflow-menu pull-right dropdown" ng-controller="NavDropdownCtrl">
<a class="dropdown-toggle">
<img ng-src="images/icon3.png">
</a>
<ul class="dropdown-menu">
<li ng-repeat="name in MenuItems">
<h4>
<a ng-href="#/{{ name | lowercase }}/">
{{name}}
</a>
</h4>
</li>
</ul>
</div><!-- /.overflow-menu -->
</div><!-- /.nav-container -->
</div>
app.js
'use strict';
angular.module('tempApp', [
...
])
.config(function ($routeProvider) {
$routeProvider
.when('/pg1/', {
templateUrl: 'views/pg1.html',
controller: 'MainCtrl',
navState: 'pg1Active'
})
.when('/pg2/',
{
templateUrl: 'views/pg2.html',
controller: 'MainCtrl',
navState: 'pg2Active'
})
I also found these related links:
Behavior of controller inside directives
AngularJS - Handle repeated fragments like Header and Footer
http://coder1.com/articles/angularjs-managing-active-nav-elements
You need to inject the $location service into your directive and check for routes there.