I need to include Google Maps API in my AngularJS application. To do so, I've created this Plunker from this JSFiddle.
I think I have to edit index.html but I do not know how.. Thanks for your help
index.html:
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
{{marker.title}}
</div>
</div>
Here is an updated plunkr. ideally put the script that i've put in script tags in a javascript file (save as all files> .js) and then link it in as <script src= "location.js"></script> or whatever you call it (make sure your path is correct). put the style in a css stylesheet and include it like <link rel = "stylesheet" src="style.css"> or whatever.
don't forget to include
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
you didn't have this in your initial plunker. it was an external resource in the fiddle.
Related
I have a html pages i have included a header in all html page
header contains menu and there i am using a tag
header.jsp
<div class="navbar navbar-default navbar-fixed-top" role="navigation"<ng-app="myApp" ng-controller="headerController">
.....
</div>
and in another html pages I am including this menu like
<html>
<body>
<div id="header">
<jsp:include page="/pages/common/header.jsp"/>
</div>
<div class="container" ng-app="myApp" ng-controller="bodyController" >
..............................
</div>
</body>
</html>
This is general structure for all my pages
My problem is at a time both controller is not running for any page if header page controller is working then bodyController is not running, when i comment to header controller the body controller works.
I am using angular 1.6.5
How to resolve this problem?
I would suggest this:
<body ng-app="myApp">
Then remove the ng-app from everywhere else.
Your header.jsp file has spelling mistakes in it which is why you have the problem, and you have two ng-app's (which is why I suggest putting it in one location, on the body tag).
I want to learn AngularJS to use in JSF pages. This is purely learning purpose.
I tried simply add AngularJS code inside the jsf. But seems it doesn't identify the AngularJS code. it simply out put the same My first expression: {{ 5 + 5 }} in the browser.
my jsf page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="hi" >
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Can anyone help me how to get the output of the AngularJS expression within the jsf page? or show me some direction
UPDATE
My Actual intention is to get some json from Managebean or from another jsf page and populate here. but for that as testing I tried to create a dummy json structure. but still jsf doesn't identify AngularJS component. It's simply print
My first expression: {{ 5 + 5 }}
Browser console prints MyFirstAng.xhtml:24 Uncaught TypeError: app.conntroller is not a function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myAPP" ng-controller="customerctrl">
<p>My first expression: {{ 5 + 5 }}</p>
<!-- <ul>
<li ng-repeat="x in myData">
{{x.Name + ', ' + x.Age}}
</li>
</ul>
-->
</div>
</body>
<SCRIPT type="text/javascript">
var app = angular.module('myAPP',[]);
app.conntroller('customerctrl', function($scope){
// $scope.myData=[{Name:'jani',Age:'32'}];
});
</SCRIPT>
</html>
Ok, I found the issue. It was a typo in the app.controller. I had type additional "n". it worked. Thanks for all so far guiding me to spot the issue. I thought I am missing to include some AngularJS library or something.
In order for angular to initialize ng-app="hi" there needs to exist a module with that name. Otherwise you should be seeing an exception thrown in browser dev tools console. Please note console errors when developing javascript apps
Either include a module with that name or remove the name from the attribute and just use ng-app
Either paste this
var app = angular.module('hi',[]);
in your script or make the ng-app="" ... Your choice.
If you specify anything in the ng-app then you have to make a module as given above by me. Otherwise just dont specify anything in the ng-app i.e. ng-app="".
At a later stage when you want to make a controller then you can make a module.. For now its best left empty.
I am using ng-include to call the header content and the footer,
like this :
<div ng-app="app">
<div ng-include="'pages/header.html'"></div>
<script src="js/Listenrs.js"></script>
<!-- more content -->
</div>
I have a native js file with event listeners that is in the js folder, without the ng-include all the listeners are working but when using ng-include all the event listeners are ignored, a check alert inside the script shows the browser did not ignore the file but besides the alert the listeners dont work.
You should include JQuery library before AngularJS library in your index file for any lazy-loaded scripts to be compiled and added to the JS namespace automatically. Please look at the following code.
[index.html]
<head>
<script src=jquery.js>
<script src=angular.js>
</head>
<body>
<ng-include src="templateurl"></ng-include>
</body>
[template.html]
<head>
<script>
alert(" script loaded")
</script>
</head>
You will get the alert in the above configuration.
i found this lightbox example on stackoverflow:
Why is the lightbox jQuery plugin not working for me?
i did ask a question there but it was deleted and i was told to use the "ask a question button" so here i am
this code does not run:
<html>
<head>
<!--
**** Things you need to do****
1. SPECIFY LIGHTBOX CSS FILE
2. SPECIFY JQUERY JS (jquery-1.7.2) FILE
3. SPECIFY LIGHTBOX JS FILE
-->
<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" />
<script src="http://lokeshdhakar.com/projects/lightbox2/js/jquery-1.7.2.min.js"></script>
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
<li>Winter</li>
</ul>
<div id="tabs-1">
<a href="https://www.google.de/logos/doodles/2015/229th-anniversary-of-the-first-ascent-of-mont-blanc-5711572991213568.2-hp.jpg" rel="lightbox" >
<img src="https://www.google.de/logos/doodles/2015/229th-anniversary-of-the-first-ascent-of-mont-blanc-5711572991213568.2-hp.jpg" width="300" height="200">
</a>
</div>
</div>
</body>
</html>
all the "versions" are specified...how can it not work? i just get a small picture and if i click on it it behaves like a normal link.
If you copied this verbatim, the error is the fact that the jQuery script included in that sample no longer exist. You can notice this easily in your browser's developer console. So you have to find the required jQuery version from some other place.
I would recommend using some other scripts that are usable with more current jQuery version though, otherwise you'll be forced to use an ancient one.
Include your scripts before </body> tag. Then lightbox will be work correctly.
On my website i'm displaying the same header on each page and I wanted to know if there's an AngularJS / jQuery or simple JS solution to load only the content of the body and not the header on page change.
<html ng-app="headerApp" ng-controller="HeaderCtrl">
<head>
<!-- here I load my JS and css ... -->
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-include="'templates/IndexBody.tpl.html'"></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
So my HTML looks like this I have separate template for each parts. But for now I create a html file for each pages. So I think there's a way to change the ng-include in the body.
Thanks for your help !
This is kind of the idea behind single page applications. Angular provides a built-in router that does this for you, and there is also the popular ui-router plugin.
You would change your view to:
<html ng-app="headerApp">
<head ng-controller="HeaderCtrl">
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-view></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
and configure the router in app.js:
angular.module('headerApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/IndexBody.tpl.html',
controller: 'IndexBodyCtrl'
});
});
Note that you will need to include angular-route.js in your index.html. More reading here: https://docs.angularjs.org/api/ngRoute
If it's an Angular app would you not use ng-view? Everything outside the view is the template and static as such. If you aren't building a spa then Angular probably isn't the best approach.
If it's Jquery then you could just do:
$("article").load('templatefiletoload.html');
beware that loading in your content like this is poor from an SEO point of view. Use server side includes if possible