我的问题

当我导航到index时，为什么我的观点没有显示？
我该如何解决这个问题？

概述

因此，我的index文件显示了我在ui.router库中使用的视图。 form.html包含我的模板页眉和页脚。在那个文件中，我有另一个......

<div id="form-views" ui-view></div>

...应该注入我所有的嵌套视图。但是，当我转到index时，我只是得到一个空白页而没有错误！

源代码

app.js

angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router']);

config.js

angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router'])

// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        // route to show our basic form (/form)
        .state('form', {
            url: '/form',
            templateUrl: 'views/form.html',
            controller: 'formController'
        })

        // nested states
        // each of these sections will have their own view
        // url will be nested (/form/signup)
        .state('form.signup', {
            url: '/signup',
            templateUrl: 'views/form-signup.html'
        })

        // url will be /form/select
        .state('form.select', {
            url: '/select',
            templateUrl: 'views/form-select.html'
        })

        // url will be /form/type
        .state('form.type', {
            url: '/type',
            templateUrl: 'views/form-type.html'
        });

    // catch all route
    // send users to the form page
    $urlRouterProvider.otherwise('/form/signup');
});

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <!-- CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/override.css">

    <!-- JS -->
    <!-- load angular, nganimate, and ui-router -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/config.js"></script>
    <script src="js/controller.js"></script>


</head>

<!-- apply our angular app -->
<body ng-app="MyFirstAngularApp">

<div class="container">
    <!-- views will be injected here -->

    <div ui-view></div>
</div>

</body>
</html>

form.html

<div class="row">
<div class="col-sm-8 col-sm-offset-2">

    <div id="form-container">

        <div class="page-header text-center">
            <h1>Mock up Maker</h1>

            <!-- the links to our nested states using relative paths -->
            <!-- add the active class if the state matches our ui-sref -->
            <div id="status-buttons" class="text-center">
                <a ui-sref-active="active" ui-sref=".signup"><span>1</span> Sign Up</a>
                <a ui-sref-active="active" ui-sref=".select"><span>2</span> Select</a>
                <a ui-sref-active="active" ui-sref=".type"><span>3</span> Type</a>
                 <a ui-sref-active="active" ui-sref=".end"><span>4</span> End</a>
            </div>
        </div>

        <!-- use ng-submit to catch the form submission and use our Angular function -->
        <form name="myForm" id="signup-form" class="col-sm-8 col-sm-offset-2" ng-submit="processForm()">

            <!-- our nested state views will be injected here -->
            <div id="form-views" ui-view></div>
        </form>

    </div>

    <!-- show our formData as it is being typed -->
    <pre class="col-sm-12 ng-binding">
    {{ formData }}
</pre>

</div>

文件结构

我不明白为什么它不起作用。非常感谢任何帮助！

Answer 1

摘录

angular.module("moduleName", [])

定义了一个在数组中具有所需依赖项的新模块。如果要进一步定义此模块的组件，则需要使用

定义它们

angular.module("moduleName")
  .controller(...)
  .directive(...)
  .config(...)
  .run(...);

后者是角度模块的getter语法，并没有再次定义模块。

您当前的代码定义模块MyFirstAngularApp两次。这应该是你问题的根源。

你可能想要：

angular.module('MyFirstAngularApp').config( ...

config.js

中的

这样可以避免重复模块，而是获取已在app.js中创建的实例，并在其上添加配置。应在控制器和其他代码中使用相同的方法。

Answer 2

我认为你的Views模板文件夹中有拼写错误。在文件结构目录中，您有视图文件夹，而在路由中使用小写视图名称。

视图没有在Angular中显示

我的问题

概述

源代码

2 个答案: