Ng-view не работает в angularjs 1

У меня есть приложение angularjs 1.

Я пытаюсь отобразить HTML с помощью ngRoute. Но в app.js метод app.config() не выполняется, из-за чего я не получаю html в ng-view. Я тоже не получаю никаких ошибок.

кто-нибудь может мне помочь в этом?

index.html

<head>
    <title>Apollo</title>
    <meta charset = "utf-8" />
    <title>
        Testing
    </title>
    <meta name = "description" content = "Latest updates and statistic charts">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--begin::Web font -->
    <script src = "public/lib/webfont.js"></script>
    <script>
        WebFont.load({
            google: { "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"] },
            active: function () {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <link href = "assets/vendors/base/vendors.bundle.css" rel = "stylesheet" type = "text/css" />
    <link href = "assets/demo/default/base/style.bundle.css" rel = "stylesheet" type = "text/css" />

    <link href = "public/css/custom.css" rel = "stylesheet" type = "text/css" />

    <script src = "public/lib/angular.min.js"></script>
    <script src = "public/lib/angular-route.js"></script>
    <script src = "app.js"></script>
    <script src = "src/controllers/HtmlController.js"></script>
</head>

<body ng-app = "fiveer" class = "m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
    <!-- begin:: Page -->
    <div class = "m-grid m-grid--hor m-grid--root m-page">
        <!-- BEGIN: Header -->

            <!-- content of html -->
            <div class = "m-grid__item m-grid__item--fluid m-wrapper">
                <div class = "m-content">
                    <div class = "m-portlet m-portlet--space">
                        <div class = "m-portlet__head">
                            <div class = "m-portlet__head-caption">
                                <div class = "m-portlet__head-title">
                                    <div ng-view></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- end of content html -->
        </div>
        <div ng-include = "'footer.html'"></div>
    </div>

    <div id = "m_scroll_top" class = "m-scroll-top">
        <i class = "la la-arrow-up"></i>
    </div>

    <script src = "assets/vendors/base/vendors.bundle.js" type = "text/javascript"></script>
    <script src = "assets/demo/default/base/scripts.bundle.js" type = "text/javascript"></script>
</body>

app.js

"use strict";
var app = angular.module("fiveer", ['ngRoute']);

app.config(function($routeProvider, $locationProvider) {
    alert('Hii');
    $routeProvider
        .when('/', {
            templateUrl: 'dashboard.html',
            controller: 'HtmlController'
        })

        .when('/html1', {
            templateUrl: 'src/views/html1.html',
            controller: 'HtmlController'
        })

        .when('/html2', {
            templateUrl: 'src/views/html2.html',
            controller: 'HtmlController'
        })

        otherwise({redirectTo: '/'});

        $locationProvider.hashPrefix('');
});

HtmlController.js

"use strict";
var app = angular.module("fiveer", []);

app.controller('HtmlController', ['$scope', function($scope) {
    alert('Hii');
}]);

Структура проекта

Ng-view не работает в angularjs 1

javascript angularjs ngroute angularjs-ng-route

30.07.2018 08:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

Вы снова создаете экземпляр модуля в контроллере. Убери это

"use strict";
var app = angular.module("fiveer", []); //not necessary here

ваш HomteCOntroller.js должен выглядеть так,

HtmlController.js

app.controller('HtmlController', ['$scope', function($scope) {
    alert('Hii');
}]);

Если var app = не используется, то как он обнаружит app.controller

— 30.07.2018 09:13

вы уже загружаете модуль, поэтому он будет там глобально

— 30.07.2018 09:14

О, позволь мне попробовать это

— 30.07.2018 09:15

кто голосует против этого?

— 30.07.2018 09:25

получение Failed to instantiate module fiveer due to: ReferenceError: otherwise is not defined at http://localhost:5000/app.js:22:3 at Object.invoke (http://localhost:5000/public/lib/angular.min.js:44:390)

— 30.07.2018 10:25

30.07.2018 08:49

Удалите [] из angular.module в контроллере.

"use strict";
var app = angular.module("fiveer");

app.controller('HtmlController', ['$scope', function ($scope) {
    alert('Hii');
}]);

получение ошибки Failed to instantiate module fiveer due to: ReferenceError: otherwise is not defined at http://localhost:5000/app.js:22:3 at Object.invoke (http://localhost:5000/public/lib/angular.min.js:44:390)

— 30.07.2018 10:26

вы можете поделиться своей структурой каталогов?

— 30.07.2018 10:30

30.07.2018 09:32

Проверьте угловую и угловую версию.

Измените имя файла, всегда следуйте camlecase.

   <script src = "src/controllers/htmlController.js"></script>

Всегда используйте имя контроллера в camlecsae. Ваш контроллер не инициализируется.

app.controller('htmlController', ['$scope', function($scope) {
alert('Hii');
}]);

Вы не инициализировали ng-controller в приложении.

 <head>
  <title>Apollo</title>
  <meta charset = "utf-8" />
  <title>
    Testing
 </title>
<meta name = "description" content = "Latest updates and statistic charts">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
<!--begin::Web font -->
<script src = "public/lib/webfont.js"></script>
<script>
    WebFont.load({
        google: { "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"] },
        active: function () {
            sessionStorage.fonts = true;
        }
    });
</script>

<link href = "assets/vendors/base/vendors.bundle.css" rel = "stylesheet" type = "text/css" />
<link href = "assets/demo/default/base/style.bundle.css" rel = "stylesheet" type = "text/css" />

<link href = "public/css/custom.css" rel = "stylesheet" type = "text/css" />

<script src = "public/lib/angular.min.js"></script>
<script src = "public/lib/angular-route.js"></script>
<script src = "app.js"></script>
<script src = "src/controllers/htmlController.js"></script>
</head>

<body ng-app = "fiveer" class = "m-page--fluid m--skin- m-content--skin-light2 m-header-- 
 fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside- 
 left- 
-o ffcanvas m-footer--push m-aside--offcanvas-default">
 <!-- begin:: Page -->
 <div ng-controller = "htmlController" class = "m-grid m-grid--hor m-grid--root m-page">
     <!-- BEGIN: Header -->

        <!-- content of html -->
        <div class = "m-grid__item m-grid__item--fluid m-wrapper">
            <div class = "m-content">
                <div class = "m-portlet m-portlet--space">
                    <div class = "m-portlet__head">
                        <div class = "m-portlet__head-caption">
                            <div class = "m-portlet__head-title">
                                <div ng-view></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- end of content html -->
    </div>
    <div ng-include = "'footer.html'"></div>
   </div>

  <div id = "m_scroll_top" class = "m-scroll-top">
     <i class = "la la-arrow-up"></i>
   </div>

 <script src = "assets/vendors/base/vendors.bundle.js" type = "text/javascript"></script>
  <script src = "assets/demo/default/base/scripts.bundle.js" type = "text/javascript">

30.07.2018 10:37

Другие вопросы по теме

Как отобразить ответное сообщение от HttpResponseErrInterceptor на конкретный контроллер

Ошибка при определении нескольких контроллеров

Как проверить "<input type =" file ">", когда один и тот же файл выбирается много раз?

Как отобразить массив объектов, не зная модели данных

Автономный режим HTML5 AngularJS с Workbox ServiceWorker

Вложенный парсинг json в javascript

Как придать дополнительную ширину div внутри тега <tr> таблицы?

AngularJS $ функция тайм-аута и перезагрузка страницы при вызовах службы

Фильтр для удаления некоторых данных из таблицы AngularJS

Запретить xss в html onclick, onmouseout, ... для SPA

Ng-view не работает в angularjs 1

Ответы 3

Другие вопросы по теме

Похожие вопросы