Angular layout template
angularjs routing layout
In this video we will discuss creating the angular layout template. This is continuation to Part 23, please watch Part 23 from AngularJS tutorial before proceeding.
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
Here are the steps
Step 1. Copy and paste the following HTML in the body section of the page.
[table style="font-family: Arial"]
[tr]
[td colspan="2" class="header"]
[h1]
WebSite Header
[/h1]
[/td]
[/tr]
[tr]
[td class="leftMenu"]
[a href="#/home"]Home[/a]
[a href="#/courses"]Courses[/a]
[a href="#/students"]Students[/a]
[/td]
[td class="mainContent"]
[ng-view][/ng-view]
[/td]
[/tr]
[tr]
[td colspan="2" class="footer"]
[b]Website Footer[/b]
[/td]
[/tr]
[/table]
Please note :
1. The partial templates (home.html, courses.html & students.html) will be injected into the location where we have ng-view directive.
2. For linking to partial templates we are using # symbol in the href attribute. This tells the browser not to navigate away from index.html. In a later video we will discuss how to get rid of the # symbol.
Step 2. Add a stylesheet to your project. Name it styles.css. Copy and paste the following.
.header {
width: 800px;
height: 80px;
text-align: center;
background-color: #BDBDBD;
}
.footer {
background-color: #BDBDBD;
text-align: center;
}
.leftMenu {
height: 500px;
background-color: #D8D8D8;
width: 150px;
}
.mainContent {
height: 500px;
background-color: #E6E6E6;
width: 650px;
}
a{
display:block;
padding:5px
}
Step 3 : Finally add a reference to styles.css in index.html page. At this point the HTML in the layout page (index.html) should be as shown below.
[!DOCTYPE html]
[html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo"]
[head]
[title][/title]
[script src="Scripts/angular.min.js"][/script]
[script src="Scripts/angular-route.min.js"][/script]
[link href="Styles.css" rel="stylesheet" /]
[/head]
[body]
[table style="font-family: Arial"]
[tr]
[td colspan="2" class="header"]
[h1]
WebSite Header
[/h1]
[/td]
[/tr]
[tr]
[td class="leftMenu"]
[a href="#/home"]Home[/a]
[a href="#/courses"]Courses[/a]
[a href="#/students"]Students[/a]
[/td]
[td class="mainContent"]
[ng-view][/ng-view]
[/td]
[/tr]
[tr]
[td colspan="2" class="footer"]
[b]Website Footer[/b]
[/td]
[/tr]
[/table]
[/body]
[/html]
In our next video, we will discuss creating the partial templates i.e home.html, courses.html and students.html
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Nesta página do site você pode assistir ao vídeo on-line Angular layout template duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário kudvenkat 22 Fevereiro 2016, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 211,099 vezes e gostou 394 espectadores. Boa visualização!
