logo标签列表

ui-router未渲染模板MVC5

javascripthtmlangularjsasp.net-mvc-5
3
我无法正确使用Angular UI-Router的最基础设置。
我现在只想呈现一个硬编码模板，然后诊断如何加载.html文件。我的项目中使用MVC5，下面我将拆分文件，但我会跳过一些显而易见的东西......如果需要包含它，我会的。（通过显而易见，我的意思是放置脚本/样式表、头标签、html标签等所有内容。）
Index.cshtml
<div ui-view="test"></div>

_Layout.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Styles.Render("~/Content/css")
</head>
<body ng-app="myApp">
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <div class="container">
        @RenderBody()
    </div>
    @Scripts.Render("~/Scripts/Apps")
</body>
</html>

myApp.js

(function () {
    "use strict";
    var myApp = angular.module('myApp', ["ui.router"]);
    myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('home', {
              url: '/',
              views: {
                  "test@home": {
                      template:"<h1>Test</h1>"
                  }
              }
          })

        $urlRouterProvider.otherwise("/")
    }]);
})();

当我打开我的网站时，为什么只会出现一个空白页面？我没有看到任何控制台错误信息...
我尝试添加了一行代码：
<a ui-sref="test"></a>

出现了一个错误，差不多是这样的：

Error: Could not resolve 'test' from state ''

所以我迷失了...任何建议都会很棒！

你的路由器中没有显示“test”状态...同时，可能会在控制台中抛出错误，因为“doranApp”未定义...你是否查看了开发工具控制台？ - charlietfl
那是我的笔误。我已经更正了它以正确反映“myApp”。我一直在检查开发工具，当我点击我的ui-sref时，会出现一个错误 - 除此之外？没有什么...为了好玩，我添加了一个带有ng-click函数的按钮，以确保angular本身正常工作，并且它表现正确...所以我知道angular正在进入其中，并且它不会抱怨ui-router。 - DMcC
1
我建议尝试去掉绝对命名“test@home”。 - TheNastyOne
我尝试将其更改为：views: {"test": { template: "<h1>测试</h1>" } }，并尝试将其保留为未命名状态，但两种解决方案都无效。两者都会出现空白屏幕？ - DMcC
你为什么在使用AngularJS？ - Baruch
1个回答
1

首先将您的“test@home”视图更改为“test-home”。

然后按照脚本中指定的名称更改视图名称：

从：

<div ui-view="test"></div>

至：

<div ui-view="test-home"></div>

正确的代码是：

正确的代码：

     var myApp = angular.module('myApp', ["ui.router"]);
     myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/home");

        $stateProvider
          .state('home', {
             url: '/home',
             views: {
                "test-home": {
                   template: "<h1>Home</h1>"
                }
             }
          }).state('test', {
             url: '/test',
             views: {
                "test-home": {
                   template: "<h1>teste</h1>"
                }
             }
          });

     }]);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接