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...
Sur cette page du site, vous pouvez voir la vidéo en ligne Angular layout template durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur kudvenkat 22 février 2016, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 211,099 fois et il a aimé 394 téléspectateurs. Bon visionnage!
