AngularJS - ng-include closes unclosed tags in a HTML file
Question
I have one AngularJS application.
In index.html I have one ng-view and two ng-icludes.
Here is how my index.html
<html ng-app="myApp">
<head>
<!-- CSS imports -->
</head>
<body>
<div ng-include src="'header1.html'"></div>
<div ng-view></div>
<div ng-include src="'footer1.html'"></div>
</body>
<!-- JS imports -->
</html>
My header1.html is this
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
As you can see I have not closed any div tags here. And my footer1.html is the one which closes the tags
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
In between I have the ng-view which will change based path.
But the problem is when I run the application, The first html closes all the tags before the ng-view . When I do "Inspect element" in Chrome, I see this:
<div ng-include="" src="'header1.html'">
<div class="main-container ng-scope">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
</div>
</div>
</div>
</div>
</div>
<div ng-view> ... </div>
<div ng-include="" src="'footer1.html'">
<!-- /.col -->
<!-- /.row -->
<!-- /.main-container -->
</div>
All the divs are closed. So it does not apply the style to whole page. Why is that so? How can I get in the other way?
(Basically I want to change the templates of header and footer based on the path. Now it is hard coded for testing only.)
EDIT 1
Part of app.js
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.when('/profile', {
templateUrl: 'views/profile.html',
controller: 'profileController'
})
.otherwise({
redirectTo: '/login'
});
}]);
For login and register my header and footer styles should be different and for other pages I should have other styles.
3 answers
solution1
0 2014-01-24 09:59:48
That's normal because it's async call. Just copy paste code from header and foter to index and problem solved. You will be not able to do what you want.
solution2
0 2014-01-24 10:12:33
You can still do what you are trying to do with a change to your page eg
<html ng-app="myApp">
<head>
<!-- CSS imports -->
</head>
<body>
<div ng-include src="'body1.html'"></div>
</body>
<!-- JS imports -->
</html>
body1
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div ng-view></div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
If you want to factor out your footer for example put another ng-include there or a directive if appropriate. It seems to make sense that your directives or templates should always close tags in the same file as the open one.
Edit1
body2
<div class="main-container-alternative">
<div class="main-content-alternative">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div ng-view></div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
solution3
-1 2014-01-24 10:41:54
So what you have to do at each template in tempalte just add header and footer eg: login.html
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div >
This is my login stuff
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
register.html
<div class="main-container">
<div class="main-content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div >
This is my register stuff
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div><!-- /.main-container -->
So on each template you must provide own header and footer. And than index html looks like:
<html ng-app="myApp">
<head>
<!-- CSS imports -->
</head>
<body>
<div ng-view></div>
</body>
<!-- JS imports -->
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.