Currently tackling a major application with numerous routes for its different components, my team and I have decided to break down the routes into separate files instead of cramming everything into one large file.
In attempting to create a variable and import it into my app.js file while passing the route object to a new state, I've encountered errors while importing a file in my app.js.
I'm curious if there's a way to pass state objects from various files into the main app.config.
Here is an example of my working App.js file with 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 the goal I am aiming for:
Pages/clockIn/clockInRoute.js
export let ClockIn = {
url: '/clockIn',
templateUrl: 'pages/clockIn/clockIn.html'
};
Then, my app.js file would resemble 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)
});