stateprovider在angularjs - 而不是渲染用户界面视图 [英] stateprovider in angularjs - not rendering the ui-view
问题描述
好吧。我坚持这部分两天。我已经试过我知道的一切。
我有我的UI路由器加载并stateprovider定义。我有UI的显示在网站的几个例子。但是当我运行，它没有显示我的UI视图。
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
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
Shell.html
<div data-ng-controller="shell as vm">
SHELL
<div ui-view></div>
</div>
Entry.html
Entry.html
<section id="entry-view" data-ng-controller="entry as vm">
ENTRY
</section>
app.js
app.js
var app = angular.module('ngBRep', [
'ui.router'
]);
routes.js
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
}
我的期望是，当我浏览到的index.html，我应该看到
贝壳
简介
My expectation is when i browse to index.html, i should see SHELL PROFILE
但我只得到SHELL。
But i get only SHELL.
而最糟糕的部分，有我们的项目现有的网站，正是这一点和它的作品。
And the worst part, there is an existing website in our project that does exactly this and it works.
任何帮助将AP preciated。谢谢你。
Any help will be appreciated. Thank you.
推荐答案
有一个工作的 plunker 。在这种情况下，问题涉及到的事实，我们使用了两个功能的（它们其实不是预期的/没有设计为一起工作）的：
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-包括- 填充的根视图的（通常为的index.html的）的 -
UI路由器- 瞄准的根，这是没有加载 - 的事实上，包括比
UI路由器以后执行默认调用$ urlRouterProvider.otherwise（/））的
ng-include- to populate the root view (usually part ofindex.html)ui-router- to target the root, which is not loaded yet- and in fact that include is executed later than the
ui-routerdefault call to$urlRouterProvider.otherwise("/"))
所以，当这个模板被列入到根的index.html
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("/");
});
这样，我们解决了加载时间的差异（路由器准备越早则包括模板，所以错过了目标）的
Check that here
这篇关于stateprovider在angularjs - 而不是渲染用户界面视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
