Question

以下是我用于演示应用程序的文件夹结构

CSS
字体
图像
JS
的观点的index.html

index.html的代码如下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Sandhu Tutors</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

    <!-- Top Navigation-->
    <nav class="nav navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>   

                <a class="navbar-brand" href="#">ABSS</a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="3">About Us</a></li>
                        <li><a ng-href="">First</a></li>
                        <li><a ng-href="">Second</a></li>
                    </ul>
            </div>
        </div>

    </nav>




    <!--Main view goes here -->

    <div ng-view></div>



    <footer>
          <div class="navbar  navbar-inverse navbar-fixed-bottom"> 
            <div class="container">
                <div class="navbar-text pull=left">
                    <p> ABSS © Sandhu 2017.</p>
                </div>        
            </div>
        </div>
    </footer>

    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/controller.js"></script>

</body>
</html>

这里是controller.js的代码：

var app = angular.module('myApp',['ngRoute']);


app.config(function($routeProvider){
    $routeProvider

    .when('/',{
        templateUrl : 'views/home.html',
        controller : 'homeCtrl'
    })
    .when('/first',{
        templateUrl:'views/first.html',
        controller : 'firstCtrl'
    })
    .when('/second',{
        templateUrl:'views/second.html',
        controller : 'secondCtrl'
    })
    .otherwise({
        redirect :'/'
    });
});


app.controller('homeCtrl',function($scope){
    $scope.name="Angad";
});

app.controller('firstCtrl',function($scope){
    $scope.name="Second";
});

app.controller('secondCtrl',function($scope){
    $scope.name="Second";
});

路由似乎在这里工作....它显示的唯一错误是： -Error：[$ compile：tpload] -XMLHttpRequest无法加载

除此之外，如果有人可以帮助如何在点击顶部导航栏按钮的ng-view部分打开所需的页面...将非常感谢!!

Answer 1

您的代码似乎是正确的。如果您使用chrome作为浏览器，请使用本地Web服务器来测试您的站点（例如lite-server）。出于安全原因，Chrome不允许您加载本地文件。您也可以尝试使用其他浏览器测试您的应用程序您的Navbar href应如下所示：

ohlc_dict = {                                                                                                             
'Open':'first',                                                                                                    
'High':'max',                                                                                                       
'Low':'min',                                                                                                        
'Close': 'last',                                                                                                    
'Volume': 'sum'  }

dailyData = ts.resample('1d').agg(ohlc_dict)

或者如果您使用的是AngularJS 1.6

<li><a href="#/first">About Us</a></li>

角度路由无法正常工作，无法在ng-view中加载内容

1 个答案: