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).
Related
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.
I have a SPA and the body of the index.html is something like below:
<body>
<div id="wrapper">
<div data-ng-include src="'partials/header.html'"></div>
<div data-ng-view=""></div>
<div data-ng-include src="'partials/footer.html'"></div>
</div>
<script src="js/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
</body>
The header partials has many links which are mapped to controllers and the ng-view is populated with the corresponding partial file. Now I have to display the logged in username in the header.html file but I am not able to access the scope data inside the header.html file. I am populating the username inside all the controllers and putting the same inside the scope.
Please let me know how to access the scope data inside the header.html so that I can display the username.
Code snipper inside the controller:
controllers.BagsCtrl= function($scope, $location, $route){
console.log('Inside the leather bags controller..');
$scope.username = 'Pradeep';
}
Regards,
Pradeep
You can either create a controller that wraps all your application (on <div id="wrapper"> for example) and declare the username on its $scope or put your username on the $rootScope and use it directly in your templates.
The first way seems to be cleaner.
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
I have the below html
<body>
<div id="container" ng-controller="mainCtrl">
<div id="header" ng-include src='"partials/header.html"' ng-controller="headerCtrl"></div>
<div id="content" ng-include src='"partials/content.html"' ng-controller="contentCntrl" style="overflow: hidden;"></div>
</div>
</body>
In this main.html I am loading two partial view below as
header.html is below as
<canvas id="headerCanvas"></canvas>
content.html is below as
<canvas id="contentCanvas"></canvas>
In the headerCtrl when I write $('#headerCanvas')[0] I am getting undefined.
Not sure as of now why it is happening, please help
This is because when you are intializing the controler the html is not loaded yet form the ngInclude. what you can do is to use the onLoad event of the ngInclude.
<div id="header" ng-include src='"partials/header.html"' onload="onHtmlLoaded()" ng-controller="headerCtrl"></div>
and then in the header controler headerCtrl
var headerCtrl=function (){
$scope.onHtmlLoaded(){
// you have $('#headerCanvas')[0] here
}
}
I would like to render my pages by rendering
The header
The body
The problem is, when i render the both parts, the body is not wraped into the .content div, here is some code:
<html>
<head></head>
<body>
<div id="content">
<script type="text/template" id="header-template">
<div>navbar</div>
</script>
<div id='header-container'></div>
<script type="text/template" id="body-template">
<p>Welcome !</p> <!-- Is not wraped inte the #content div -->
</script>
</div>
</body>
</html>
With backone i just do:
hearder.render();
body.render();
Thanks !
Your HTML is completely mangled: your template has an unclosed <div>, but there is a unmatched </div> close tag on the page. It looks like you're attempting some kind of document.write style templating, where the first template opens a tag and a later template closes it. I wouldn't recommend it. Look at the Backbone.View documentation on how to render the view to a certain element.
Basically you should have the container elements in the DOM:
<div id="header-container"></div>
<div id="content"></div>
<div id="footer-container"></div>
And then render the view into that element:
body.render({el:"#content"});
Or:
body.render();
$("#content").html(body.el);
I bet if you fix these, it might work a bit better.