We Keep Coding

AngularJs Ui-Router adding new states to the existing app.config

I'm currently working on a very large scale application that involves many routes for the many different components the application has. My team and I have decided to try and separate out the different routes into their own file, rather than having a very large routes file.
I have poked around trying to create a variable and importing into my app.js file and passing my created route object to a new state.
I keep running into errors when I try to import a file in my app.js file.
I want to know if there is a way to pass state objects from different files into the main app.config ?
Here is my App.js file that works with a statically defined state
let app = angular.module('ordyxApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state(system)
});
This is what I'm trying to achieve
pages/clockIn/clockInRoute.js
export let ClockIn = {
url: '/clockIn',
templateUrl: 'pages/clockIn/clockIn.html'
};
Then my app.js file would look similar to something like this
let app = angular.module('ordyxApp', ['ui.router']);
import {ClockIn} from "./pages/clockIn/clockIn.route";
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state(ClockIn)
});

you should set a name for the state
stateProvider .state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state('clockIn', ClockIn)

Angular ui router multiple named views for all states

I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.
$stateProvider
.state('home',{
views: {
'home': {
templateUrl: 'home.html',
controller: controller
},
'nav': {
templateUrl: 'nav.html',
controller:controller
},
'footer': {
templateUrl: 'footer.html',
controller: controller
},
}
})
I dont want to use ng-include, because the nav and the footer is showing before the home state is resolved in this case.

Yes you can, its actually written in the ui-router's guide on how to manage Multiple Named Views.
First, you need to define a specific set of named views in an abstract state, including the view where you would put all your content views such as your home.html and put it in a nameless view (empty string).
As you may have noticed, the demo below shows a root state named app, which is also an abstract state (this means you can't navigate in this state). It has three views, each represents a name that corresponds to the ui-views defined in the index.html.
Within the nameless view, contains the content.html that has a nameless ui-view that will represent all the child states of the app state. By doing this, you can share the nav.html and footer.html to all your states if you add these states under the app state. An example to this would be the app.home and app.items state. To learn more about this, read the link I've added above.
DEMO
Javascript
$urlRouterProvider.otherwise('/home');
$stateProvider.state('app', {
abstract: true,
views: {
nav: {
templateUrl: 'nav.html',
controller: 'NavController as Nav'
},
'': {
templateUrl: 'content.html',
controller: 'ContentController as Content'
},
footer: {
templateUrl: 'footer.html',
controller: 'FooterController as Footer'
}
}
})
.state('app.items', {
url: '/items',
templateUrl: 'items.html',
controller: 'ItemsController as Items'
})
.state('app.home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController as Home'
});
HTML
index.html
<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>
content.html
<hr>
<ui-view></ui-view>
<hr>

Depending on the rest of your routes you can probably make use of the abstract state to do this:
Angular UI Router - Views in an Inherited State might also help point you in the right direction.

Angular JS Routing - Links inside SPA

I have created a project with index.html with certain links to other pages. My routing works as intended but I'm wondering what's the best approach to go with when it comes to links on other pages.
To clarify it:
My index.html page has routes:
Feed
Bblog
Marketplace
Recruiting
Adverts
Now what I'm curious about is how do I for example route links inside these pages.
For example, my Bblog page has tabs which I want to be opened inside the same page. Now for example whenever I click some tab link, it redirects me to my index.html since my .otherwise route is set to /.

Not sure what engine or library you're using for your routing. Though I faced the same requirement not too long ago.
We're using ui-router for our routing. It's very similar to Angulars routing.
A snippet from our routing table contains something similar to this.
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/index',
})
.state('orders', {
url: '/orders',
templateUrl: '/views/orders',
})
.state('orderdetail', {
url: '/orders/detail/:id',
templateUrl: '/views/orderdetail',
})
.state('orderdetail.address', {
url: '/:addressId',
templateUrl: '/views/orderdetail',
})
Essentially you use the .dot notation to separate nested views. So the orderdetail.address is nested inside the orderdetail
This means that the routing above will go something allow you to see an overview of order details at /orders/detail/myOrderId and drill further in to, say, an address by visiting /orders/detail/myOrderId/myaddressId
If you're using ui-router then you will get more info on nested views on this link
If you're using angular ngRoute then the [ngRoute][3] docs and supporting plunker demonstrate how to stack up the routes.
So (from the plunker) -
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
this will give you /book/myBookId and /book/myBoodId/ch/myChapterId

Angular UI Router only loads first declared child state

Whichever child state I place first in my routing setup is the one that loads. Everything else works just fine. Resolve dependencies are inherited as they should, the view is rendered and controller instanciated. But the second child state is totally ignored...
Routing in app.coffee
$stateProvider
.state 'feed',
abstract: true
url: '/'
templateUrl: 'views/feed.html'
controller: 'FeedController'
resolve: (a bunch of them :P)
.state 'feed.timeline',
url: ''
views:
'timeline':
templateUrl: 'views/partials/feed/timeline.html'
controller: 'FeedTimelineController'
.state 'feed.trending',
url: ''
views:
'trending':
templateUrl: 'views/partials/feed/trending.html'
controller: 'FeedTrendingController'
placeholders in index.html:
<div class="container">
<div ui-view></div>
</div>
in 'views/feed.html':
<div ui-view="trending"></div>
<div ui-view="timeline"></div>
I really appreciate any help, tried everything I could think of and feeling exhausted after hours searching wikis, groups, google, stackoverflow... Thanks!

I'm not sure you understand the ui-router correctly. A state basically corresponds to a URL (except when it is abstract). I guess you want to have one state that puts stuff into the two subviews of your state 'feed'.
$stateProvider
.state 'feed',
abstract: true
url: '/'
templateUrl: 'views/feed.html'
controller: 'FeedController'
resolve: (a bunch of them :P)
.state 'feed.index',
url: ''
views:
'timeline#feed':
templateUrl: 'views/partials/feed/timeline.html'
controller: 'FeedTimelineController'
'trending#feed':
templateUrl: 'views/partials/feed/trending.html'
controller: 'FeedTrendingController'
You don't have to choose 'feed.index' as the name but it has to start with 'feed.' so it is a child state.

Angular ui.router executing more than one state

I'm using AngularUI's router library and I have a strange issue: I have two distinct but similar states and controllers. What occurs is the state that I would expect runs, but then another state appears to run: it fetches the templateUrl and then the controller runs for the second state, which causes some weird behavior.
The states in question:
angular.module('app', ['ui.route'])
.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('list', {
url: "/",
templateUrl: STATIC_URL + "js/eleagemot/views/list.html",
controller: 'questionListCtrl',
})
.state('detail', {
url: '/{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/',
templateUrl: STATIC_URL + "js/eleagemot/views/detailed_question.html",
controller: 'questionDetailCtrl'
})
.state('newQuestion', {
url: '/new-question/',
templateUrl: STATIC_URL + "js/eleagemot/views/edit_question.html",
controller: 'editQuestion'
})
.state('questionEdit', {
url: '/{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/edit/',
templateUrl: STATIC_URL + "js/eleagemot/views/edit_question.html",
controller: 'editQuestion'
})
.state('answerEdit', {
url: '/answer/{id:[0-9]+}/edit/',
templateUrl: STATIC_URL + "js/eleagemot/views/edit_answer.html",
controller: "editAnswer"
})
});
Exactly what happens is if I go to /answer/1/edit/ it first loads the edit_answer.html template and runs the editAnswer controller, as it should. But then it also loads the edit_question.html template and runs the editQuestion controller. I know because there's some Restangular code that runs correctly in the editAnswer controller and then some similar Restangular code that runs in the editQuestion controller, but that causes a 404 and then the router redirects to the root. Also putting some console logs at the top of each controller shows that the editAnswer controller runs and then the editQuestion controller.
This behavior is only seen when loading the url for the answerEdit state, and not for any of the other states. Why is this happening and how can I fix it?

Looks like you've got some regular expressions that match too easily. Note that /answer/{id:[0-9]+}/edit/ always matches the above url pattern: '{username:[a-zA-Z0-9\\-]+}/{slug:[a-z0-9\\-]+}/edit/