I am using AngularJS includes. The code for my index.html is as follows:
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="../js/application.js"></script>
</head>
<body>
<div ng-include src="'../includes/footer.html'"></div>
</body>
</html>
application.js is in a folder called js and it reads as follows:
function setFooter() {
var currentDate = new Date();
currentYear = currentDate.getFullYear();
document.write('© ' + currentYear + ' All rights reserved.');
}
footer.html is in a folder called includes and it reads as follows:
<div id="footer">
<div class="container">
<div class="footerContainer">
<p class="text-white">
<script type="text/javascript">
setFooter();
</script>
</p>
</div>
</div>
</div>
AngularJS includes are working since the footer is displayed in index.html but the JavaScript function setFooter in footer.html is never called.
Any help would be appreciated. Thanks.
ng-include load html by AJAX, so any javascript tag not processed. Instead of using script and document.write directly, better use of angular functionality.
Simplest way, in my opinion, would be add simple controller, like
angular.module('app', [])
.controller('footerCtrl', function($scope) {
$scope.currentYear = (new Date()).getFullYear();
});
and use it in footer
<div id="footer" ng-controller="footerCtrl")">
<div class="container">
<div class="footerContainer">
<p class="text-white">
© {{ currentYear }} All rights reserved.
</p>
</div>
</div>
</div>
also don't forget name your application in index.html
<html ng-app="app">
working plunker:
Related
Like many of us, I want to keep my code as DRY(Don't Repeat Yourself) as possible - and that includes my website. I would like to do this by importing the common footer onto all pages - which is fine, and I'm doing this as follows:
page.html
<html>
<head>
<script type="text/javascript">
$(function(){
$("#footer").load("./Components/footer.html");
});
</script>
</head>
<body>
This is my main page content
<div id="footer"></div>
</body>
</html>
footer.html
<div class="copyright-notice">
<p align=center>
Copyright © 2019 - <class id="getyear"></class> Joe Bloggs.
</p>
</div>
<script>
let d = new Date();
document.getElementById("getyear").innerHTML = (new Date()).getFullYear();
</script>
The issue here the footer gets included - but it only contains the following:
Copyright © 2019 - Joe Bloggs.
I expect it to contain:
Copyright © 2019 - 2021 Joe Bloggs.
I'm wondering if it's a DOM problem. I can see, by the way, that the JavaScript is being executed - because if I put <class id="getyear"></class> into page.html then the JavaScript from footer.html works and puts the date in correctly.
It's a bit of a poser. Any ideas?
Your code is working properly :)
This is the screenshot
page.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script type="text/javascript">
$(function () {
$("#footer").load("./footer.html");
});
</script>
</head>
<body>
This is my main page content
<div id="footer"></div>
</body>
</html>
footer.html
<div class="copyright-notice">
<p align="center">
Copyright © 2019 - <class id="getyear"></class> Joe Bloggs.
</p>
</div>
<script>
let d = new Date();
document.getElementById("getyear").innerHTML = new Date().getFullYear();
</script>
I am posting my code can you please whats wrong in the code.
when i click on anchor tag "contacts" it will not change the view...
i already define the to separate controllers.
Thanks In advance......):
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="scripts/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<!--<script src="scripts/angular-route.js"></script>-->
<script src="js/app.js">enter code here</script>
</head>
<body ng-app="myModule">
<h1>Welcome to ITYX</h1>
<p>Home</p>
<p>Contact</p>
<div ng-view></div>
</body>
</html>
app.js
var app =angular.module("myModule",['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl:'templates/main.html',
controller:'mainController'
}).
when('/contact',{
templateUrl:'templates/contact.html',
controller:'contactController'
}).
otherwise({
redirectTo:'/'
});
}]);
app.controller('mainController',function($scope){
$scope.message ="hi am in main section";
});
app.controller('contactController',function($scope){
console.log("contact controller");
$scope.message ="hi am in contact section";
});
main.html
<h1>Main Section</h1>
{{message}}
contact.html
<h1>Contact Section</h1>
{{message}}
You need to have it as,
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to ITYX</h1>
<div class="nav">
Main
Contact
</div>
</div>
</div>
</div>
DEMO
It must be your paths to either your files or angular. I've made a plunker to verify that your code works if you reference files correctly.
Plunker implementation of your code
With the only different to be:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
I am trying to create an interactive experience using angular js. I was wondering if I could create properties, assign objects then instantiate them in a script tag in the 'index.html'?
for example
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = {
test1: function() {
return "My name is slim shady"
}
}
}]);
index.html is as follows
<!doctype html>
<html>
<head>
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<script> document.write(barry.test1)</script>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Then instantiate the {{ Barry }} with all the properties in a script tag in the index.html.
Is there a better way to approach this e.g using directive or factories
P.S I am new to angular js any guidance would be appreciated.
There is no need for instantiating in HTML.It will automatically instantiate once declared in controller. And to Get that value in index.html you can use ng-model for binding.
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = [
{test1:'"My name is slim shady"'},
];
}
}]);
<!doctype html>
<html>
<head>
HTML
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<span ng-model="barry.test1"> </span
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
here is my function which is put into its own file(Javascript/submitDate.js):
document.onload = function(){
function submitDate(){
var time = new Date();
var nowDate =time.toISOString().slice(0,-14);
document.getElementById("dateShow").value=nowDate;
}
submitDate();
}();
This ran fine before I joined the page with my index.(When I put all my javascript and page layout into one file)
Here is the page(projectMain.html) of the code:
<html>
<div id="container">
<header>
<h3>Entries close on the 10th of March</h3>
</header>
<section>
<aside onload="submitDate();">
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
</section>
No errors pop up and it just shows the date layout box as: mm/dd/yyyy
EDIT:
The folder has a capital J.
Edit 2.0:
Link to what is shown. Underneath the "last submitted" is the date function that is not working. : http://prntscr.com/60ie8k
Edit 3.0:
Here is my Index:
<html>
<head>
<title>Sample Template</title>
<link rel="stylesheet" language="text/css" href="CSS/stylesheet.css"/>
<script language="javascript" src="Javascript/AJAX.js"></script>
</head>
<body onload="javascript:changePage('home');">
<h1>Little Big Planet</h1>
<div class="menu">
<a onclick="javascript:changePage('home');">Home</a>
<a onclick="javascript:changePage('powerups');">Power Ups</a>
<a onclick="javascript:changePage('bots');">Sackbots</a>
<a onclick="javascript:changePage('costumes');">Costumes</a>
<a onclick="javascript:changePage('projectMain');">Form</a>
</div>
<br />
<div id="content">
</div>
<script type="text/javascript" src="Javascript/submitDate.js"></script>
</body>
</html>
The aside element doesn't have an onload attribute (or load event). Only elements that load external content (e.g. <img>) and the document itself (where the attribute lives on the <body> element) do.
Use a <script> element instead.
<aside>
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
<script>
submitDate();
</script>
Additionally, you say that the file lives at "javascript/submitDate.js" but you are loading src="Javascript/submitDate.js". The function won't be available to call if you are using a case-sensitive file system (as the URL will 404).
You have a capitol 'j' in JavaScript in your HTML.
<script type="text/javascript" src="Javascript/submitDate.js"></script>
Try loading the js when the document is loaded
JS file:
document.onload = function(){
function submitDate(){
var time = new Date();
var nowDate =time.toISOString().slice(0,-14);
document.getElementById("dateShow").value=nowDate;
}
submitDate();
}();
The aside in your html
<aside>
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
Link to js file in the bottom of your body
<script type="text/javascript" src="pathtojsfile"></script>
Here is a working Fiddle
I keep trying to set my ng-include as follows:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Airports</h1>
<div ng-controller="AppCtrl">
<div>
<div>
<ul>
<li ng-repeat="airport in airports">
<a href="" ng-click="setAirport(airport.code)">
{{airport.code}} - {{airport.name}}
</a> -
<a href="" ng-click="editAirport(airport.code)">
Editar
</a>
</li>
</ul>
<p ng-show="currentAirport">Current airpot: {{currentAirport.name}}</p>
</div>
<!--el ng include le indica que puede incluir un scope (.html)-->
<div ng-include src="formURL"></div>
</div>
</div>
</body>
</html>
My JS script (app.js):
function AppCtrl ($scope){
$scope.airports={
"STL":{
"code":"STL",
"name":"Lambert-St Airport",
"city":"san louis",
"destinations": [
"LAX",
"MKE"
]
}
};
$scope.formURL= 'partials/form.html';
$scope.currentAirport = null;
$scope.setAirport = function (code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function (code) {
$scope.editing = $scope.airports[code];
};
}
And finally form.html
<div ng-show="editing">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
I have tried to show the form, changing the url, writing the complete url but it doesn't seems to work. Although when I click on the airports, the page shows correctly.
If anyone can point me in the right direction that'd be great. Sorry for the huge post, it needed a bit of explaining to make it coherent. Hopefully it makes sense. Thanks.
My directory:
exampleAngular
|_css
|_img
|_js
|_controllers
|_app.js
|_lib
|_angular.min.js
|_angular-resource.min.js
|_partials
|_form.html
|_airport.html
|_index.html
The plunker provided by Andyrooger works fine without modification, there are however a few thing you should change.
1) ng-include is used without src when using the directive as an attribute, so it should be ng-include="formUrl"
2) Use object properties rather then the entire object on ng-show
Change HTML to,
<div ng-show="editing.airport">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
Also be aware of scope inheritances, change Controller
$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]
Going by your comments it seems your formURL is incorrect...
You set it on this line
$scope.formURL= 'partials/form.html';
but then you say your form.html is in the same directory as your index.html. formURL is a path relative to the directory that index.html is in. So either
Put form.html in a partials directory (angularexample/partials/form.html)
or
Set formURL as so
$scope.formURL= 'form.html';