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>Home</li>
<li>Page 1</li>
<li><a ng-href="#/">Home</a></li>
<li class="icon">
☰
</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';
}
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
I used a different version of angular than the google CDN. Once i changed my downloaded angular to 1.4.8 it worked.
Related
I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below.
package.json
"main": "server.js",
"dependencies": {
"angular": "^1.4.3",
"angular-route": "1.6.10",
"body-parser": "latest",
"ejs": "latest",
"express": "latest",
"fabric-ca-client": "^1.0.2",
"fabric-client": "^1.0.2",
"grpc": "1.11.0"
}
app.js
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/vault', {
templateUrl: 'client/vault.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
.when('/til', {
templateUrl: 'client/til.html'
})
.when('/order', {
templateUrl: 'client/order.html'
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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.3/angular.min.js"></script>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</html>
There are two more pages for store and about with only one tag in them.
I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.
I am referring to this URL
Any help would be appriciated.
Update-1
Added angular-route package but still not working.
Getting following error:
" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"
Update-2
Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well.
https://pastebin.com/j06ku3yG
Update-3
I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.
I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.
Thank you all for helping :)
I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.
Here is a working demo:
/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/about', {
templateUrl: 'client/about.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
});
app.controller('appController', function($scope, $location) {
$scope.isActive = function(path) {
return path === $location.path();
}
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="application" ng-controller="appController">
<header ng-init="isNavCollapsed=true">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-left">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/store')}">Store</li>
<li ng-class="{ active: isActive('/about')}">About</li>
</ul>
</div>
</div>
</nav>
</header>
<div ng-view></div>
<!-- Separate files -->
<script type="text/ng-template" id="client/index.html">
index
</script>
<script type="text/ng-template" id="client/about.html">
about
</script>
<script type="text/ng-template" id="client/store.html">
store
</script>
</div>
</body>
</html>
First, you still needs to link the NgRoute from the angular-route.js.
Secondly, to link templates use href="#!store" instead of href="#store"
Here's a working example using angularjs 1.6.9
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/store', {
templateUrl: 'store.html'
})
.when('/about', {
templateUrl: 'about.html'
})
});
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<div ng-app="application" >
<script type="text/ng-template" id="home.html">
<div class="view">
<h2>home</h2>
</div>
</script>
<script type="text/ng-template" id="store.html">
<div class="view">
<h2>store</h2>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="view">
<h2>about</h2>
</div>
</script>
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</div>
I am facing one issue.when i am clicking the <li>Course</li> link i am getting the requesting page but when i am refreshing this page again it is not coming using angular.js.its shoqing me the error The requested URL /Gofast/subject was not found on this server..I am getting my home page by typing the url oditek.in/Gofast/.I am explaining my code below.
app.js:
var GoFastoApp=angular.module('GofastoHome',['ngRoute']);
GoFastoApp.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/home.html',
controller : 'homecontroller'
})
.when('/deptinfo',{
templateUrl : 'view/info.html',
controller : 'infocontroller'
})
.when('/TimeTable',{
templateUrl : 'view/time.html',
controller : 'timecontroller'
})
.when('/course',{
templateUrl : 'view/course.html',
controller : 'coursecontroller'
})
.when('/subject',{
templateUrl : 'view/subject.html',
controller : 'subjectcontroller'
})
.when('/hod',{
templateUrl : 'view/hod.html',
controller : 'hodcontroller'
})
.when('/faculty',{
templateUrl : 'view/faculty.html',
controller : 'facultycontroller'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
})
I am adding also base url in my index page.See the code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="GofastoHome">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script data-require="lodash.js#*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script><script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/app.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Edit <span class="caret"></span>
<ul class="dropdown-menu">
<li>Course</li>
<li>Subject</li>
<li>HOD</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Faculty</li>
<li>One more separated link</li>
</ul>
</li>
<li>Department</li>
<li>Time Table</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="controller/HomeController.js" type="text/javascript"></script>
<script src="controller/CourseController.js" type="text/javascript"></script>
<base href="/Gofast/">
</body>
</html>
Here when i am clicking on the course option the required page is coming but when i am reloading the same page again the its throwing the above error.Please help me to resolve this error.
I am noticing before I created this controller that ng-app="myApp" broke the data binding with an input field and the template I had before.
Now i have a controller with route provider and the ng-view in the index.html doesn't work at all (blank page).
Am I missing something?
<!doctype index.html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="js/lib/angualar.min.js"></script>
<script src="js/lib/angualar-route.min.js"></script>
<script src="js/lib/angualar-animate.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
<!doctype js/app.js>
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
var appControllers = angular.module('appControllers', []);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
<!doctype views/nav.html>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
So few inputs watching your code:
Do a CTRL+Shift+I and open console tab in your browser to view the error reported, as your code has too many logical error and needs to be debugged.
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
In app.js appControllers is used as a dependency but its never mentioned in your html as data-ng-controller="appController"
Hence remove appControllers dependency.
With context of your code
var appControllers = angular.module('appControllers', []); is redundant too and will have errors as there are no appControllers defined in html
Here is the working code of, have kept it simple:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script>
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
</script>
</head>
<body>
<header>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
what is <!doctype index.html> if it is part of your code then remove all doctype from your code. your working code on plunker
and also you have not included your views/login.html code in your app.
I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>
app.js file is
var app = angular.module('TaskApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/Home/Index', {
controller: 'TaskManager',
templateUrl: '/Home/Index'
}).otherwise({ redirectTo: "/" });
$locationProvider.html5Mode(true);
}]);
app.controller('TaskManager', function () {
//$location.path('/');
});
<!DOCTYPE html>
<html ng-app="TaskApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div ng-view></div>
Home
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1> #Html.Label("Task Manager", new { #class = "heading" })</h1>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/Page/app.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
When i click on home link button then a lots of request is running and my page is hang give warning that :
WARNING: Tried to load angular more than once.
I can't found what problem is in my code