内联 angular 模板

Question

我一直在尝试制作一个小型网站，该网站有一个主页，其中的一部分使用模板进行了更改。我制作了一个 HTML 文件，其中包含一个用于选择显示内容的小菜单和两个模板。如果我使用 google CDN，它可以正常工作，但我想使用 angular 的本地版本，但这会破坏我的站点并且路由不起作用。 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

我使用了与 google CDN 不同的 angular 版本。一旦我将下载的 angular 更改为 1.4.8，它就起作用了。

内联 angular 模板

Inline angular template

angularjs

angularjs-routing