Javascript 不以角度显示的视图_Javascript_Html_Angularjs_Angular Ui Router

Javascript 不以角度显示的视图

javascript html angularjs

Javascript 不以角度显示的视图,javascript,html,angularjs,angular-ui-router,Javascript,Html,Angularjs,Angular Ui Router,这是我与Angular的第一个项目。我仍然在想如何用Angular做事情，所以如果我的问题听起来很愚蠢，我想道歉我的问题当我导航到索引时，为什么我的视图没有显示出来我怎样才能解决这个问题概述因此，我的索引文件显示了我在ui.router库中使用的视图form.html包含我的模板页眉和页脚。在该文件中，我还有另一个 <div id="form-views" ui-view></div> config.js angular.modul

这是我与Angular的第一个项目。我仍然在想如何用Angular做事情，所以如果我的问题听起来很愚蠢，我想道歉

我的问题

当我导航到

索引时，为什么我的视图没有显示出来


我怎样才能解决这个问题



概述
因此，我的索引
文件显示了我在ui.router
库中使用的视图form.html
包含我的模板页眉和页脚。在该文件中，我还有另一个
<div id="form-views" ui-view></div>

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

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>

<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>



form.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>

<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>


模型制造商

我不明白为什么它不起作用。非常感谢您的帮助
 我认为您的视图模板文件夹中有一个输入错误。在文件结构目录中，您有一个视图文件夹，而在路由中使用的是小写视图名称。
我认为您的视图模板文件夹中有一个打字错误。在文件结构目录中，您拥有Views文件夹，而在路由中使用小写视图名称。
代码段
angular.module("moduleName", [])

在阵列中定义具有所需依赖项的新模块。如果要进一步定义此模块的组件，需要使用
angular.module("moduleName")
  .controller(...)
  .directive(...)
  .config(...)
  .run(...);

后者是angular模块的getter语法，不再定义该模块
您当前的代码定义模块MyFirstAngularApp
两次。这应该是你问题的根源
您可能想要：
angular.module('MyFirstAngularApp').config( ...

在您的config.js中
angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router']);

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');
});

这避免了复制模块，而是获取已在app.js
中创建的实例，并在其上添加配置。控制器和其他代码中也应使用相同的方法。
代码段
angular.module("moduleName", [])

在阵列中定义具有所需依赖项的新模块。如果要进一步定义此模块的组件，需要使用
angular.module("moduleName")
  .controller(...)
  .directive(...)
  .config(...)
  .run(...);

后者是angular模块的getter语法，不再定义该模块
您当前的代码定义模块MyFirstAngularApp
两次。这应该是你问题的根源
您可能想要：
angular.module('MyFirstAngularApp').config( ...

在您的config.js中
angular.module('MyFirstAngularApp', ['ngAnimate', 'ui.router']);

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');
});

这避免了复制模块，而是获取已在app.js
中创建的实例，并在其上添加配置。控制器和其他代码中也应该使用相同的方法。
控制台中有错误吗？没有错误，如果我正确使用了ui.views，我只是在做一些研究。您定义了两次角度模块：app.js:angular.module（'MyFirstAngularApp'，['ngAnimate'，'ui.router']）
config.js:angular.module（'MyFirstAngularApp'，['ngAnimate'，'ui.router']）
谢谢，所以我应该只在app.js中调用它？您应该定义它一次，并在后面引用它，而不使用数组（angular.module（'MyFirstAngularApp'）.controller（……。
）控制台中有错误吗？没有错误，如果我正确使用ui.views，我只是在做一些研究。你在定义角度模块两次：app.js:angular.module（'MyFirstAngularApp'，['ngAnimate'，'ui.router']）；
config.js:angular.module（'MyFirstAngularApp'，['ngAnimate'，'ui.router']）
谢谢，所以我应该只在app.js中调用它？您应该定义它一次，并在后面引用它，而不使用数组（angular.module（'MyFirstAngularApp'）。controller（……。
）谢谢，我将文件夹重命名为“视图”，但仍无法运行Tanks，我将文件夹重命名为“视图”，但仍无法运行完美，运行良好+1我将在5分钟内接受你的回答（@OmriLuzon收到了，我不想看他是否提供了一篇评论）@Beep很好，你可以接受他的答案，我不确定这是否能解决你的问题，因为你说没有错误。完美，工作正常+1我会在5分钟内接受你的答案（@OmriLuzon收到了，我不想看他是否提供了一篇评论）@没关系，你可以接受他的回答，我不确定这是否能解决你的问题，因为你说没有错误。