Question

我一直在尝试创建一个小网站，其中包含一个主页面，其中使用模板更改部件。我制作了一个HTML文件，其中包含一个用于选择要显示的内容和两个模板的小菜单。如果我使用谷歌CDN它没有任何问题，但我想使用本地版本的角度，但这打破了我的网站，路由工作。 HTML和JS文件可以在下面看到。任何人都能看到我失踪的东西吗？

HTML文件：

<!DOCTYPE html>
<html ng-app="myApp" ng-csp="">

<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>Test app</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="icon" href="images/favicon.ico">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/bootstrap-callout.css">
   <link rel="stylesheet" href="css/bootstrap-datepicker3.css">

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> -->
   <script src="angular/angular-1.6.1/angular.js"></script>
   <script src="angular/angular-1.6.1/angular-route.js"></script>
   <script src="js/app.js"></script>

</head>

<body class="backgroundColor">
   <div class="divHeader">
      <div class="center-header">
         <div class="container" style="">
            <a ng-href="#/">
            </a>
         </div>
      </div>
   </div>

   <div>
      <ul class="topnav" id="myTopnav">
         <li><a href="#/">Home</a></li>
         <li><a href="#/Page1">Page 1</a></li>
         <li><a ng-href="#/">Home</a></li>
         <li class="icon">
            <a href="javascript:void(0);" onclick="resizeMenu()">&#9776;</a>
         </li>
      </ul>
   </div>
   <div class="edge edge-shadow"></div>

   <script type="text/ng-template" id="main.html">
      <div class="panel-group">
         <div class="panel panel-default">
            <div class="panel-heading">Home</div>
            <div class="panel-body">Home Page!</div>
         </div>
      </div>
   </script>

   <script type="text/ng-template" id="Page1.html">
      <div>
         <p>Hello</p>
         <iframe class="browserframe" id='myiframe' src="http://www.google.com" scrolling="auto" frameborder="0">
            </iframe>
      </div>
   </script>

   <div ng-view>
   </div>

</body>

<footer>



</footer>

</html>

app.js文件：

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

app.config(function($routeProvider,$compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel|chrome-extension):/);
    $routeProvider
        .when("/", {
            templateUrl : 'main.html',
            controller : "MainController"
        })
        .when("/Page1", {
            templateUrl: 'Page1.html',
            controller: 'Page1Controller'
        })
        .otherwise( {
            templateUrl : 'main.html',
            controller : "MainController"
        })
});

app.controller('MainController', function ($scope){

});

app.controller('Page1Controller', function ($scope){

});

function resizeMenu() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

Answer 1

要添加本地angularjs文件，您可以使用bower。您可以通过以下命令使用npm全局安装它：npm install -g bower。

然后您可以创建bower.json文件：

{
    "name": "app-name",
    "authors": [],
    "description": "app description",
    "main": "",
    "license": "MIT",
    "homepage": "",
    "version": "1.0.0",
    "dependencies": {
        "angular": "^1.4.8",
        "angular-route": "^1.4.8"
    }
}

您只需运行bower install：它将使用angularjs本地文件创建存储库bower_components。

最后，您更改index.html中的路径以匹配该位置。如果bower.json文件位于index.html旁边，则路径为：

bower_components/angular/angular.min.js

bower_components/angular-route/angular-route.min.js

Answer 2

我使用了与谷歌CDN不同版本的角度。一旦我将下载的角度更改为1.4.8就可以了。

内联角度模板

2 个答案: