Встроенный угловой шаблон

Я пытался создать небольшой веб-сайт с главной страницей, где часть была изменена с использованием шаблонов. Я создал HTML-файл, содержащий небольшое меню для выбора того, что нужно показать, и двух шаблонов. Если я использую google 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'; 
}

источник

2017-01-31 Reminent

Вы уверены, что файл local angleularjs загружается нормально? – Developer

Обратите внимание, что угловое 1.6.x существенно отличается от <1.5.x – devqon

@devqon было правильным, как только я нашел и скачал версию 1.4.8, он начал работать. Спасибо за помощь :) – Reminent

Я использовал другую версию Угловое, чем Google CDN. Как только я изменил загруженный угловой до 1.4.8, он сработал.

источник

2017-01-31 10:11:40 Reminent

Для добавления локальных 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: это создаст хранилище bower_components с angularjs локальных файлов.

Наконец, вы меняете путь в своем index.html, чтобы соответствовать местоположению. Если файл bower.json находится рядом с index.html, пути будут:

bower_components/angular/angular.min.js

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

источник

2017-01-31 09:22:46 Benoit

ответ

Смежные вопросы