angularjs中的stateprovider - 不呈现ui-view [英] stateprovider in angularjs - not rendering the ui-view
问题描述
好的.我被这部分困住了两天.我已经尝试了我所知道的一切.我已经加载了我的 ui-router 并定义了 stateprovider.我的 UI 如网站中的几个示例所示.但是当我运行时，它没有显示我的 ui 视图.
索引.html
<body ng-app='ngBRep'><div data-ng-include="'app/layout/shell.html'"></div></div><!--角度--><script src="scripts/angular.js"></script><script src="scripts/angular-ui-router.js"></script></身体>Shell.html
<div data-ng-controller="shell as vm">壳<div ui-view></div></div>
Entry.html
<section id="entry-view" data-ng-controller="entry as vm">入口</部分>
app.js
var app = angular.module('ngBRep', ['ui.router']);
routes.js
var app = angular.module('ngBRep');app.config(['$stateProvider', '$urlRouterProvider', routeConfigurator]);函数 routeConfigurator($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise("/");$stateProvider.状态('/'， {网址:'/'，模板网址:'app/views/entry.html'}).state('个人资料', {网址:'/个人资料'，模板网址:'app/views/profile.html'});//如果没有找到 URL，则发送到登录}
我的期望是当我浏览 index.html 时，我应该会看到壳简介
但我只得到壳.
最糟糕的是，我们的项目中有一个现有的网站可以做到这一点并且它可以工作.
任何帮助将不胜感激.谢谢.
解决方案 有一个工作plunker.本例中的问题与我们使用了两个特性(实际上不期望/不设计为一起工作):
ng-include - 填充 root 视图 (通常是 index.html 的一部分)ui-router - 以 root 为目标，尚未加载- 事实上，include 的执行晚于
ui-router 默认调用 $urlRouterProvider.otherwise("/"))
所以虽然这个模板包含在根 index.html 中
<div data-ng-controller="shell as vm">壳<div ui-view></div></div>
我们必须在它的控制器中这样做:
app.controller('shell', function($scope, $state, ....){$state.go("/");});
这样我们解决了加载时间的差异(路由器在包含模板之前就准备好了，所以缺少目标)
检查这里
Alright. I am stuck with this part for two days. I have tried everything i know.
I have my ui-router loaded and stateprovider defined. I have the UI as shown in several examples in website. But when i run, it is not showing my ui-view.
Index.html
<body ng-app='ngBRep'>
<div>
<div data-ng-include="'app/layout/shell.html'"></div>
</div>
<!--Angular-->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
</body>
Shell.html
<div data-ng-controller="shell as vm">
SHELL
<div ui-view></div>
</div>
Entry.html
<section id="entry-view" data-ng-controller="entry as vm">
ENTRY
</section>
app.js
var app = angular.module('ngBRep', [
'ui.router'
]);
routes.js
var app = angular.module('ngBRep');
app.config(['$stateProvider', '$urlRouterProvider', routeConfigurator]);
function routeConfigurator($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('/', {
url: '/',
templateUrl: 'app/views/entry.html'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/views/profile.html'
});
// Send to login if the URL was not found
}
My expectation is when i browse to index.html, i should see
SHELL
PROFILE
But i get only SHELL.
And the worst part, there is an existing website in our project that does exactly this and it works.
Any help will be appreciated. Thank you.
解决方案 There is a working plunker. The issue in this case is related to the fact, that we are using two features (which are in fact not expected / not designed to be working together):
ng-include - to populate the root view (usually part of index.html)ui-router - to target the root, which is not loaded yet- and in fact that include is executed later than the
ui-router default call to$urlRouterProvider.otherwise("/"))
So while this template is included into the root index.html
<div data-ng-controller="shell as vm">
SHELL
<div ui-view></div>
</div>
We have to do this in its controller:
app.controller('shell', function($scope, $state, ....){
$state.go("/");
});
This way we solve the difference in loading times (router is ready sooner then included template, so missing the targets)
Check that here
这篇关于angularjs中的stateprovider - 不呈现ui-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
