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...
En esta página del sitio puede ver el video en línea Angular layout template de Duración hora minuto segunda en buena calidad , que subió el usuario kudvenkat 22 febrero 2016, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 211,099 veces y le gustó 394 a los espectadores. Disfruta viendo!
