javascript - ng-view 在 angularjs 1 中不起作用

问题描述

我有 angularjs 1 应用程序。

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

谁可以帮我这个事？

索引.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>

应用程序.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');
}]);

项目结构

标签： javascriptangularjsngrouteangularjs-ng-route

javascript - ng-view 在 angularjs 1 中不起作用

问题描述

解决方案

推荐阅读