ng-view 在 angularjs 1 中不起作用答案

【问题标题】：ng-view is not working in angularjs 1ng-view 在 angularjs 1 中不起作用
【发布时间】：2019-01-06 08:59:06
【问题描述】：

我有 angularjs 1 应用程序。

我正在尝试使用 ngRoute 呈现 html。但是在app.js app.config() 方法没有执行，我没有在ng-view 中获取html。我也没有收到任何错误。

谁能帮我解决这个问题？

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

项目结构

【问题讨论】：

标签： javascript angularjs ngroute angularjs-ng-route

【解决方案1】：

您正在控制器中再次实例化模块。删除它

"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
您已经在加载该模块，因此它将在全球范围内存在
哦，让我试试这个
谁反对这个？
获取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)

【解决方案2】：

从控制器中的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)
你能分享你的目录结构吗？

【解决方案3】：

检查角度和角度路线版本。

更改文件名始终遵循 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">

【讨论】：