Question

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

项目结构

Answer 1

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

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

您的HomteCOntroller.js应该看起来像

HtmlController.js

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

Answer 2

从控制器中的[]移除angular.module。

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

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

Answer 3

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

更改文件名时始终跟随大写字母。

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

在油菜科中始终使用控制器名称。您的控制器未初始化。

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

ng-view在angularjs 1中不起作用

3 个答案: