We Keep Coding

Error loading child state with ui-router

I have a working app though I am changing the architecture, cutting views down into smaller, more manageable documents. I currently have a state with a child state.
.state('patents', {
url: '/patents',
templateUrl: 'p3sweb/app/components/patents/views/list-patents.htm',
controller: 'listPatentsCtrl',
controllerAs: '$ctrl',
})
.state('patents.patent', {
url: '/{patentId}/:patentHref',
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
})
When I click on a table row in state patents, up pops patents.patent view below it.
I have now changed it so the child patents.patent state has multiple views like so:
.state('patents.patent', {
url: '/{patentId}/:patentHref',
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm',
views: {
'#': {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
},
'patentinfo#patents.patent': {
templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-info.htm',
controller: 'patentInfoCtrl',
controllerAs: '$ctrl'
},
'patentcostanalysis#patents.patent': {
templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-costanalysis.htm',
controller: 'patentCostAnalysisCtrl',
controllerAs: '$ctrl'
},
'patentrenewals#patents.patent': {
templateUrl: 'p3sweb/app/components/patents/views/ui-views/patent-renewals.htm',
controller: 'patentRenewalsCtrl',
controllerAs: '$ctrl'
}
})
When I now click on the row in state patents, the patents.patent view replaces the parent view. So instead of displaying below it, it's the only view displayed.
Question
How do I resolve the issue that has occurred now I have included multiple views in patents.patent state?

So it turns out, after reading ui-router wiki, using # creates an absolute path, and I wasn't targeting the view in the parent state patents.
So instead of
views: {
'#': {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
}
It should of been
views: {
'#patents': {
templateUrl: 'p3sweb/app/components/patents/views/patent-item.htm'
}

No angular view loads when there's just a # in the URL

I have a navigation tool that always returns the URL like this when I'm in my angular app.
http://example.com/pagename#
instead of
http://example.com/pagename#/viewName
When the navigation is clicked, this results in my app not having any view loaded. Otherwise, my routes work fine.
With my default route provider, it doesn't know how to handle this. I don't know if this is something I'm supposed to account for or what.
How can I adjust my route provider (or something else) to know how to handle when there's a # symbol in the URL without a path?
Here's a snippet of my route provider.
myApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/itemUpdate", {
templateUrl: "/path/update.html",
controller: "itemUpdateController"
})
.when("/about", {
templateUrl: "/path/about.html",
controller: "aboutController"
})
.when("/items", {
templateUrl: "/path/items.html",
controller: "itemsController"
})
.when("/items/:itemId", {
templateUrl: "/path/item.html",
controller: "itemController"
})
.otherwise({
redirectTo: "/about"
});
}]);

Angular $routeProvider to handle different URLs differently

In angular, is there a method to load different views & controllers when the routes are basically the same, but the actual string in the route is different?
In terms of routing, if the top level route parameter is being already used, is there way to load different View & Controller based on the different route parameter?
Below is what I was trying:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "app/components/0_home/homeView.html",
controller: "HomeController"
}) // Home
.when("/about", {
templateUrl: "app/components/1_about/aboutView.html",
controller: "AboutController"
}) // About
/*(...Bunch of other .whens)*/
//Project
.when("/project/:projectId", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/HOME", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/FLOORPLAN", {
templateUrl: "app/components_project/1_floorplans/floorplanView.html",
controller: "FloorplanController"
}) // Floorplan
.when("/404", {
templateUrl: "app/components/404.html"
}) // else 404
.otherwise({
redirectTo: '/404'
});
}
]);
I wanted to load
app/components_project/0_home/homeView.html
when routeProvider is
/project/:projectId/HOME
and load
app/components_project/1_floorplans/floorplanView.html
when routeProvider is
/project/:projectId/FLOORPLAN
Or is there any better way to handle this kind of situation?

AngularJS controller reloading

I'm running a AngularJS webapplication with ionic.
I got a headpage where I see a list of articles. When I click on this you'll get a seperate page with tabs.
When i go from the headpage to a tab-page the controller loads for the first time.
$scope.selectArt = function(artikel) {
api.setCurrItem(artikel.artnr);
$state.go('tab.voorraad');
}
The controller is will be loaded.
app.controller('ArtikelsCtrl', function($scope, $state, $location, api, artikels) {
console.log("loaded");
};
I have a backbutton where I can go back to the headpage.
When I click on a item the selectArt function will be loaded again but the 'ArtikelsCrtl' will not be loaded again.
App.js
$stateProvider
.state('artikels', {
url: '/artikels',
templateUrl: 'app/artikels/artikels.html',
controller: 'ArtikelsCtrl'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'app/_shared/tabs.html'
})
.state('tab.voorraad', {
url: '/voorraad',
views: {
'tab-voorraad': {
templateUrl: 'app/voorraad/voorraad.html',
controller: 'VoorraadCtrl'
}
}
})
Anyone got an idea why the controller don't load on the 2nd time?
It looks like the page just hide and show up again on $state.go.

Controllers are initialised once per view. When you pass the controller option you are specifying how it is constructed. Changing view leaves the controller in existence.

ui.router.state.$state
$state.go(to, params, {reload : true})
I hope it can help you.

Nested Views in Angular JS

I am trying to update a part of a view within another view.
But the link keeps overwriting the outer ng-view
How Do I update an ng-view within an ng-view ?

This library should perfectly fit your needs:
http://angular-route-segment.com
Demo site: http://angular-route-segment.com/src/example/
It is much, much simpler to use than ui-router. Sample routes config looks like this:
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});

You should get ui-router for that. I believe it's the only module that lets you do nested views.
source code: https://github.com/angular-ui/ui-router
instructions how to use: https://github.com/angular-ui/ui-router/wiki