Inline angular template

Question

I've been trying to make a small website that has a main page where a part is changed using templates. I've made an HTML file that contains a small menu for choosing what to show and two templates. If i use the google CDN it works without any problems but i would like to use a local version of angular but that breaks my site and the routing doens't work. The HTML and JS file can be seen below. Can anyone see what i'm missing?

HTML file:

<!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 file:

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';
}

Note that angular 1.6.x is significantly different from <1.5.x — devqon
– devqon, Commented Jan 31, 2017 at 9:24
@devqon was right, once i found and downloaded version 1.4.8 it started working. Thanks for the help :) — Reminent
– Reminent, Commented Jan 31, 2017 at 10:09

Shift 'n Tab · Accepted Answer · 2017-01-31 11:56:24Z

To add local angularjs files, you can use bower. You can install it globally with npm through the following command : npm install -g bower.

Then you can create a bower.json file :

{
    "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"
    }
}

You just have to run bower install : it will create a repository bower_components with the angularjs local files.

Finally, you change the path in your index.html to match the location. If the bower.json file is next to the index.html, the paths would be :

bower_components/angular/angular.min.js

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

Reminent · Accepted Answer · 2017-01-31 10:11:40Z

0

I used a different version of angular than the google CDN. Once i changed my downloaded angular to 1.4.8 it worked.

answered Jan 31, 2017 at 10:11

Reminent

1411 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

Inline angular template

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related