Question

我无法让最基本的Angular UI-Router设置正常工作。

我现在只想要一个硬编码模板进行渲染，然后诊断出要加载的.html文件。我在我的项目中使用MVC5我将分解下面的文件，但我会跳过一些明显的东西......如果我需要包含它，我会的。（显而易见，我指的是我在脚本/ css，头标签，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 ''

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

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

     }]);

ui-router没有渲染模板MVC5

1 个答案: