We Keep Coding

Two states with views views defined for one

I'm trying to modulise my app using angular-ui-router to define a website with 2 states: main and checkout. The main state should haves multiple "section" tags which im trying to define as ui-view items. I can't tell what's wrong with my routes setup but I get a feeling that the main.html is not being loaded. Any advise on whats wrong with my definition... I could avoid using views for the secions and just use ng-include...
routes.js
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/main');
$stateProvider
.state('main', {
url: '/main',
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
views:{
'home': {
templateUrl: 'templates/main.home.html'
},
'about': {
templateUrl: 'templates/main.about.html'
},
'services': {
templateUrl: 'templates/main.services.html'
},
'shop': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})
.state('checkout', {
url: '/checkout',
templateUrl: 'templates/checkout.html',
controller: 'CheckoutCtrl'
});
index.html
<div ui-view id="app-ui-view"></div>
templates/main.html
<section ui-view="home" id="home"></section>
<section ui-view="about" id="about"></section>
<section ui-view="services" id="services"></section>
<section ui-view="shop" id="shop"></section>
Basically the page loads but main or checkout states don't load. How am i nesting things wrong?

By not specifying a parent you map both states to the default ui-view in the index.html. So when accessing main state there won't be any templates linked to the default ui-view, the only one present in the existing html.
so the main state should have this definition:
.state('main', {
url: '/main',
views:{
'': {
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
},
'home#main': {
templateUrl: 'templates/main.home.html'
},
'about#main': {
templateUrl: 'templates/main.about.html'
},
'services#main': {
templateUrl: 'templates/main.services.html'
},
'shop#main': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})

How to convert this line from using ng-router to ui-router

I need to convert this line
$location.url('/im?p=' + peer);
to using $state, I can't seem to properly get it working. I have followed these stack overflow questions but I can't seem to get it right
AngularJs ui-router $location or $state?
Angular ui-router - how to access parameters in nested, named view, passed from the parent template?
my app.js has this state currently as this
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'templates/home/index.html'
})
.state('home.matches', {
url: '/matches/:p',
templateUrl: 'templates/home/matches.html',
controller: 'AppIMController'
})
})
app.js used to be
$routeProvider.when('/im', {templateUrl: templateUrl('im'), controller: 'AppIMController', reloadOnSearch: false});

This should do it for you. You don't need "peer" url property.
state('home.matches', {
url: '/new?p',
templateUrl: 'templates/home/matches.html',
controller: function($scope, $stateParams) {
$scope.peer = $stateParams.p;
}
})

AngularJS - Nested views not showing using ui-router

I'm working on upgrading a project I found to the latest version of Angular and preparing it for Angular 2 conversion etc. So, I'm using some nested views in Angular using ui-router, and I can only get the nested views to display if they are explicitly included in the index page as ng-template files.
index.jade
script(type="text/ng-template", id="404")
include partials/404
script(type="text/ng-template", id="home")
include partials/home
script(type="text/ng-template", id="private/layout")
include partials/private/layout
script(type="text/ng-template", id="private/home")
include partials/private/home
script(type="text/ng-template", id="private/nested")
include partials/private/nested
script(type="text/ng-template", id="private/nestedAdmin")
include partials/private/nestedAdmin
app.routes.js
(function() {
'use strict';
angular
.module('app.routes', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
var access = routingConfig.accessLevels;
// Public routes
$stateProvider
.state('public', {
abstract: true,
template: "<ui-view/>",
data: {
access: access.public
}
})
.state('public.home', {
url: '/',
templateUrl: 'home'
})
.state('public.404', {
url: '/404',
templateUrl: '404'
});
// Regular user routes
$stateProvider
.state('user', {
abstract: true,
template: "<ui-view/>",
data: {
access: access.user
}
})
.state('user.profile', {
url: '/profile',
templateUrl: 'profile',
controller: 'profileController',
controllerAs: 'vm'
})
.state('user.private', {
abstract: true,
url: '/private',
templateUrl: 'private/layout'
})
.state('user.private.home', {
url: '/',
templateUrl: 'private/home'
})
.state('user.private.nested', {
url: '/nested',
templateUrl: 'private/nested'
})
.state('user.private.admin', {
url: '/admin',
templateUrl: 'private/nestedAdmin',
data: {
access: access.admin
}
});
});
})();
I wanted to remove the whole ng-template part as I felt this would not be efficient when scaling the app up, so I removed the ng-template scripts from the index page. When I do this, the first layer of nested routes work, so routes such as public.home work okay. The problem comes with the second layer of nested views, so now routes such as user.private.home and user.private.nested do not work and aren't displayed.
Here is the generated HTML with and without the ng-templates scripts:
WITH ng-templates scripts
<div data-ui-view="" class="col-md-6 col-md-pull-4 ng-scope">
<p class="ng-scope">Only visible to users</p>
</div>
WITHOUT ng-templates
<div data-ui-view="data-ui-view" class="col-md-6 col-md-pull-4 ng-scope"></div>
Any ideas?

Found my own answer here: https://github.com/angular-ui/ui-router/issues/247
Turns out it's an issue with Jade/ui-router, I'm not sure which. The solution is to either include ui-view using pure HTML <div ui-view></div> or by placing doctype html at the top of your partial file.
It was a confusing issue because the nested templates worked fine when injected into $templateCache using ng-template as shown in my post.

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?

Nested views on UI Router in MEAN Application

I am working on a MEAN application and I don't know how can I make my ui-router work as expected.
I have an index.html template where i load all my javascript and css that my application needs to work like angular, jquery, angular-ui-x, bootstrap and inside the index's body i have set an ui-view.
The first state I'm using is login, that uses all index's body ui-view. When users is logged in succesfully, it redirects to a home.html page (state: home) which also is using all index's body. Home has a sidebar a header and a content. Inside home's content i'm placing a nested ui-view.
I want every content that comes next inside home's ui-view. And if it's possible i want to make home abstract so i dont have to do home.state1, etc.
To clarify things i have draw an image (I know, my mspaint level is impressive).
And here are my states:
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("login");
$stateProvider
.state('login', {
url: '/login',
templateUrl: '../views/login.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/LoginCtrl.js',
'css/login.css'
]
}]);
}]
}
})
.state('home', {
url: '/home',
templateUrl: '../views/home.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/homeCtrl.js',
'css/template.css'
]
}]);
}]
}
})
});

Here is an exemple of multiple states with some statics parts (menus etc...)
See it working in this plunker
Here are the states definitions :
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
//This is not a real view so we put it abstract
//This will manage the menus
.state('app', {
abstract: true,
templateUrl: 'app.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('app.greetings', {
url: '/greetings',
templateUrl: 'greetings.html',
controller: 'GreetCtrl'
})
});
Hope it helped, if you have any other question feel free to ask.
EDIT : I personally prefer to call the abstract state "app" cause it symbolize the application view.