[英]angularjs - ui.router not rendering ui-view immediately
I am trying to use ui-router on my project. 我正在尝试在我的项目上使用ui-router。
Core module: 核心模块:
var core = angular.module('muhamo.core', ['angular-loading-bar', 'anguFixedHeaderTable', 'ui.router']);
Tracking module: 跟踪模块:
var app = angular.module(TRACKING_MODULE_NAME, ['muhamo.core']);
app.config(Configure);
Configure.$inject = ['$stateProvider', '$urlRouterProvider'];
function Configure($stateProvider, $urlRouterProvider) {
$stateProvider.state('contacts', {
templateUrl: '/static/partials/employee/employee-edit',
controller: function () {
this.title = 'My Contacts';
},
controllerAs: 'contact'
});
$urlRouterProvider.otherwise("/contacts");
console.log($stateProvider);
}
and the html definition : 和html定义:
<div ui-view></div>
It works fine if i click to a ui-sref link. 如果我单击到ui-sref链接,它将很好地工作。 But on page load it does not load the default view "/contacts".
但是在页面加载时,它不会加载默认视图“ / contacts”。 Am I missing something here?
我在这里想念什么吗?
UPDATE UPDATE
It works after adding missing "url" property. 添加缺少的“ url”属性后,它可以工作。 But now I've another problem, if I extend my implementation like that :
但是现在,如果我像这样扩展实现,我会遇到另一个问题:
function Configure($stateProvider, $urlRouterProvider) {
$stateProvider.state('employees', {
abstract: true,
url: "/employees"
/* Various other settings common to both child states */
}).state('employees.list', {
url: "", // Note the empty URL
templateUrl: '/static/partials/employee/employee-list'
});
$urlRouterProvider.otherwise("/employees");
console.log($stateProvider);
}
also with more states, ui-view is not rendering. 同样具有更多状态,ui视图不会渲染。
Yes. 是。 You need to set the state.url to '/contacts'
您需要将state.url设置为“ / contacts”
$stateProvider.state('contacts', {
url: '/contacts',
templateUrl: '/static/partials/employee/employee-edit',
controller: function () {
this.title = 'My Contacts';
},
controllerAs: 'contact'
});
It seems you forgot to set the url
parameter, eg: 看来您忘记设置
url
参数,例如:
$stateProvider.state('contacts', {
url: "/contacts",
...
}
There are two fishy things in your implementation. 您的实现中有两点麻烦。 You out an empty url and your default route is abstract.
您输入的网址是空的,默认路由是抽象的。 Try my changes below.
请尝试以下更改。
function Configure($stateProvider, $urlRouterProvider) {
$stateProvider.state('employees', {
abstract: true,
url: "/employees"
/* Various other settings common to both child states */
}).state('employees.list', {
url: "/list", // Note the empty URL
templateUrl: '/static/partials/employee/employee-list'
});
$urlRouterProvider.otherwise("/employees/list");
console.log($stateProvider);
Cheers 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.