AngularJs Ui-Router向现有app.config添加新状态

时间:2018-12-13 21:50:24

标签: javascript angularjs angular-ui-router angular-ui-router-extras

我目前正在开发一个非常大型的应用程序,涉及该应用程序具有的许多不同组件的许多路由。我和我的团队已决定尝试将不同的路由分离到自己的文件中,而不是使用非常大的路由文件。

我在尝试创建一个变量并将其导入到我的app.js文件中并将创建的路由对象传递到一个新状态的过程中遇到了麻烦。

尝试将文件导入app.js文件时,我总是遇到错误。

我想知道是否有一种方法可以将状态对象从不同文件传递到主app.config中吗?

这是我的App.js文件,它以静态定义的状态工作

    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)
}); 

这就是我要实现的目标

pages / clockIn / clockInRoute.js

export  let  ClockIn =  {
    url: '/clockIn',
    templateUrl: 'pages/clockIn/clockIn.html'
};

然后我的app.js文件看起来类似于这样

 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)
});

1 个答案:

答案 0 :(得分:0)

您应该为州/省设置名称

stateProvider .state('home', {
 url: '/home',
 templateUrl: 'pages/login.html' 
}) 
.state('clockIn', ClockIn)