Develop Reference

Use nested states as tabs in ui-router

The documentation seems a little sparse on this particular case, however I'm working off of the "Multiple Views About Page" section of this tutorial, which is supported by this SO post.
I'm trying to convert one of my pages to a parent state that renders each tab as child states. The syntax below doesn't throw an error, however only the tab headers are rendering, none of the content. I've set breakpoints in the init functions in the child controllers and nothing fires, and I'm not getting any errors back in the console. I've also created a breakpoint in the $stateChangeError callback and am getting nothing in there as well.
parent state
<div class="container">
<h2> <i class="fa fa-user"></i> Click to Call Settings for {{user.fullName}}</h2>
<uib-tabset active="active" id="usersettings">
<uib-tab index="0" heading="SIP Settings">
<div ui-view="sipSettings"></div>
</uib-tab>
<uib-tab index="1" heading="Favorites">
<div ui-view="favorites"></div>
</uib-tab>
</uib-tabset>
</div>>
favoritesPartial.html (edited for the sake of space)
<form name="favoritesForm">
<div ng-repeat="favorite in pbxFavorites" id="favoritesContainer">
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
<button type="submit" class="btn btn-primary" ng-click="saveFavorites()">Save Favorites</button>
</div>
sipSettingsPartial.html (edited for the sake of space)
<form name="sipSettingsForm">
<div class="row">
<div class="form-footer">
<button type="button" class="btn btn-white" ng-click="$root.goBack()">Go Back</button>
<button type="submit" class="btn btn-primary" ng-click="savePbxSettings()">Save Settings</button>
</div>
</form>
state provider
.state('clickToCall', {
url: '/clickToCall',
templateUrl: 'app/components/clickToCall/clickToCall.html',
controller: 'ClickToCallController',
controllerAs: 'vm',
parent: 'app',
authenticate: true,
resolvePolicy: {when:'LAZY', async: 'WAIT'},
resolve:{
security:['$q', '$rootScope', 'parentResolves', 'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
if($rootScope.isLoggedIn()){
return $q.resolve();
} else {
return $q.reject(routeErrors.NO_ACCESS);
}
}]
},
params:{
'user':''
},
view:{
'sipSettings#clickToCall': {
templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
controller: 'SipSettingsController'
},
'favorites#clickToCall':{
templateUrl: 'app/components/clickToCall/favoritesPartial.html',
controller: 'FavoritesController'
}
}
})
folder structure
screen shot

Stupid typo...... named the section view instead of views, also left the templateUrl in the parent state. The following config works:
.state('clickToCall', {
url: '/clickToCall',
controller: 'ClickToCallController',
controllerAs: 'vm',
parent: 'app',
authenticate: true,
resolvePolicy: {when:'LAZY', async: 'WAIT'},
resolve:{
security:['$q', '$rootScope', 'parentResolves', 'routeErrors', function($q, $rootScope, parentResolves, routeErrors){
if($rootScope.isFirmAdmin2 || $rootScope.isCloud9){
return $q.resolve();
} else {
return $q.reject(routeErrors.NO_ACCESS);
}
}]
},
params:{
'user':''
},
views:{
'':{
templateUrl: 'app/components/clickToCall/clickToCall.html'
},
'sipSettings#clickToCall': {
templateUrl: 'app/components/clickToCall/sipSettingsPartial.html',
controller: 'SipSettingsController'
},
'favorites#clickToCall':{
templateUrl: 'app/components/clickToCall/favoritesPartial.html',
controller: 'FavoritesController'
}
}
})

Angularjs ui-view not updating

I've pretty much used the top solution from UI-Router multiple named views not working with my angular app, but my ui-view does not seem to be updating, but rather just disappearing altogether. There must be some really small detail I'm missing that I've been stuck on for a long time...
I have an index.html page, with a [div ui-view=""] that is replaced on the home state. This ui-view (frontpage.html) has another [div ui-view="search-result"] which I'm hoping gets updated (change text to "successful template replacement") from a state change, but when the state changes, the entire [div ui-view=""] from index.html disappears instead when the search button is clicked.
All relevant script tags are included in my index.html.
index.html:
<body ng-app="...">
<div class="container">
<div ui-view=""></div>
</div>
app.js:
angular.module('...', [ 'ui.router','ui.bootstrap']).
config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}).run(function(){});
frontpage.html:
<div class="row" ng-controller="MainController">
some stuff here
<div class="col-xs-9">
<input type="text" class="inline" ng-model="searchText" placeholder="Search..."></input>
<button class="btn btn-default inline" type="button" ng-click="search()">Search</button>
<div ui-view="search-result"></div>
</div>
</div>
mainCtrl.js
angular.module('...')
.controller('MainController', ['$scope','$state', function($scope,$state) {
$scope.searchText;
$scope.search = function(){
console.log('going to state search with searchText: ' + $scope.searchText);
$state.go('search',{query:$scope.searchText});
}
}]);

In case that 'search' state should go to template of the 'main' ... it must be its child (check the parent: 'main')
.state('main', {
url: "/",
templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
parent: 'main', // parent is main, named view will find its target
url : "/search/:query",
views: {
'search-result#search': {
template: 'successful template replacement'
}
}
}

Template not loading in Angular route

Issue is quite simple. I have been trying for hours now but just couldn't get the template to load via angularJS client side routing. Not using any server side routing.
So, used various combinations of paths. If I use "/home" in button href it straight away gives error that it couldn't find "/home". But with "#/home", I don't get that error but it still wouldn't load the template.
Any help would be greatly appreciated.
Created a new plunker: http://plnkr.co/edit/F7KoWbBuwsXOQLRPF0CN?p=preview
Template directory:
Project ---
|
|
CSS
|
|
JS
|
|
templates---
|
|
home.html
JS:
var myApp = angular.module("myApp",['ngRoute']);
myApp.controller('appController',function($scope,$http){
//mytext = 0; instantiating variables without using var gives referencing error due to "use strict";
$scope.angular = angular;
$scope.mytext = "Harsh";
$scope.formSuccess = false;
$http({method:"GET", url:"JS/carousel-data.json"}).
success(function(data) {
$scope.carouselData = angular.fromJson(data);
}).
error(function(data) {
console.log("Error loading images");
});
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html',
controller: 'appController'
})
.when('/edit', {
templateUrl: 'templates/home.html',
controller: 'appController'
});
});
HTML:
<body ng-controller="appController">
<header id="pageHeader" class="col-md-12 col-sm-12 col-xs-12 header">
<nav class="col-md-5 col-sm-6 col-xs-10 menu">
<ul class="nav nav-pills" id="menuLinks">
<li class="dropdown visible-xs">
Sapient <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Home</li>
<li>Edit</li>
</ul>
</li>
<li role="presentation" class="hidden-xs" >Home</li>
<li role="presentation" class="hidden-xs" >Edit</li>
</ul>
</nav>
</header>
<div ng-view></div>
</body>

It's rather unclear how you've set up things? Is the HTML your index or is that your home.html?
Secondly you already declare the controllers of your pages to be appController, no need to define that with the ng-controller directive anymore.
Apart from that you're loading the same template on each href, could it be that you're just seeing the same page like declared?
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html', <---
controller: 'appController' <---
})
.when('/edit', {
templateUrl: 'templates/home.html', <---
controller: '**appController'<--
});
It should be noteworthy that there is a more extensive module for routing. You can find it at ui-router.

ui-router in ionic framework issue

I'm having trouble getting my routes to match up with my views. I have the following routes:
.state('tab.account', {
url: '/account',
abstract: true,
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
}
}
})
.state('tab.account.order', {
url: '/order/:id',
views: {
'order-view': {
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
}
}
})
I have this in templates/tab-account.html
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
I have this function in the controller for that view:
$scope.viewOrder = function(id) {
$state.go('tab.account.order', {id:id});
};
Then finally I have this view for the order:
<ion-view ui-view="orderView" title="Order">
<ion-content class="has-header padding">
<h1>Your Order</h1>
</ion-content>
The url seems to work, I end up with #/tab/account/order/1 but it doesn't load that final view!
Cheers in advance!

The ui-router configuration will depend on what you're trying to do.
It looks like you want the account view and the order view to be on separate pages, in which case you won't want it to be an abstract state, since from the ui-router wiki: "An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to."
I'm not entirely sure you even want a child state for the same reason, since "child states will load their templates into their parent's ui-view." (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views).
If this is the case, then you can do something like this:
.state('tab.account', {
url: '/account',
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
})
.state('tab.order', {
url: '/account/order/:id',
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
})
Here's a plunkr: http://plnkr.co/edit/uuEQcxbWchxQyGV7wMlw?p=preview
The views objects have been removed, since you don't really need them unless you have multiple nested views.
If however you wanted the order view on the same page, then you could do something like this: http://plnkr.co/edit/8Tb1uhVDM0HCW8cgPRfL?p=preview
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
<ui-view></ui-view> <!-- Where the child view will load -->
</ion-content>
</ion-view>
app.js:
.state('tab.account', {
url: '/account',
templateUrl: 'tab-account.html',
controller: 'AccountController'
})
.state('tab.account.order', {
url: '/order/:id',
templateUrl: 'order-view.html',
controller: 'OrderController'
})
You'll also probably want to remove your ion-content from the order view template, or else you might get some funky double scroll issues.
Hope this helps! Ui-router is pretty confusing, but their wiki has some great documentation and examples to clear things up.

angularjs $stateprovider doesn't load

I just started changing some code from another person and tried to add a simply html with a controller. My problem is, that my html wont load and if I navigate to it .. the system simply displays: Loading...
here is the html:
<div ng-controller="MxjobdetailCtrl">
<p>this is going to be the detail view</p>
<form name="detailForm" class="css-form" novalidate>
Name:
Referenz:
Zusatzinfo:
IH - Objekt:
</form>
and here is the rather emtpy controller:
angular.module('sipApp')
.controller('MxjobdetailCtrl', function ($scope) {
});
the app.js looks like this:
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: 'HomeCtrl'
})
.state('main', {
url: "/main",
templateUrl: "views/main.html",
controller: "MainCtrl"
})
.state('test',{
url: '/mxjobdetail',
templateURl: "/views/components/mxjobdetail.html",
controller: "MxjobdetailCtrl"
})
.state('bpLogbook', {
url: '/bpLogbook',
templateUrl: 'views/business-processes/bpLogbook.html',
controller: "BpLogbookCtrl"
})
.state('bpLogbook.mxobjectList', {
url: "/mxobjectList",
templateUrl: "views/business-processes/bpLogbook.mxobject.html",
controller: "BpLogbookMxObjectCtrl"
})
.state('bpLogbook.logbook', {
url: "/:mxobjectId",
templateUrl: "../views/components/logbook.html",
controller: "LogbookCtrl"
})
;
})
and the index html looks like:
<div class="sidebar sidebar-fixed" id="sidebar">
<ul class="nav nav-list">
<li ui-sref-active="active"><a ui-sref="home">View Home</a></li>
<li ui-sref-active="active"><a ui-sref="main">View Main</a></li>
<li ui-sref-active="active"><a ui-sref="bpLogbook">Logbuch</a></li>
<li ui-sref-active="active"><a ui-sref="test">DetailView Test</a> </li>
</ul>
</div>
still, if I click on the DetailView Test link, nothing except a "Loading..." is displayed.
Does Anyone have any idea why a simple html with an emtpy controller won't load?
Thanks in advance,

It might be just a typo: note the capital R in your templateURl -- it should be templateUrl.
Also, you don't need the leading slash in your view url, and you don't need the ng-controller in your template, since you already specified the controller in the state definition.

You don't need to define ng-controller inside your html template:
<div>
<p>this is going to be the detail view</p>
<form name="detailForm" class="css-form" novalidate>
Name:
Referenz:
Zusatzinfo:
IH - Objekt:
</form>
....
</div>