CODEWITHSUNDEEP
angularjsangularjs-routing
Reminent
Reminent

Reputation: 141

Inline angular template

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

Upvotes: 1

Views: 584

Answers (2)

Benoit
Benoit

Reputation: 61

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

Upvotes: 1

Reminent
Reminent

Reputation: 141

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

Upvotes: 0

Related Questions