<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-animate@*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-animate.js"></script>
<script data-require="angular-route@*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
<script data-require="underscore.js@*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="animations.css" />
<script src="script.js"></script>
</head>
<body ng-app="coursesApp">
<div class="container">
<div class="row page-header">
<h2>Virtual Training</h2>
</div>
<div data-ng-view="" id="div-view" class="view-slide-in"></div>
</div>
</body>
</html>
// Code goes here
var app=angular.module('coursesApp',['ngRoute','ngAnimate']);
app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl:'home.html',
controller:'HomeCtrl'
})
.when('/course/:id',{
templateUrl:'course.html',
controller:'ViewCourseCtrl'
});
});
app.factory('coursesDataSvc', function(){
var courses=[
{
'id':1,
'title':'Introduction to Angular JS',
'rating':4,
'category':'JavaScript',
'level':'100',
'topics':[
'What is Angular JS?',
'Basics and Data binding',
'Building blocks',
'Services, Values and Factories',
'AJAX and Promises',
'Routing'
]
},
{
'id':2,
'title':'Advanced Angular JS',
'rating':4.5,
'category':'JavaScript',
'level':'300',
'topics':[
'Directives',
'Animations',
'Unit Testing',
'End-to-end Testing'
]
},
{
'id':3,
'title':'ASP.NET MVC Fundamentals',
'rating':4,
'category':'ASP.NET',
'level':'200',
'topics':[
'Web forms vs MVC',
'Why MVC?',
'Model',
'View',
'Controller',
'Going further...'
]
},
{
'id':4,
'title':'ASP.NET in VS 2013',
'rating':4,
'category':'ASP.NET',
'level':'300',
'topics':[
'Overview',
'OWIN and Katana',
'Updates to Web Forms',
'Updates to MVC and Razor Views',
'Web API 2 and OData',
'Tooling Support'
]
},
{
'id':5,
'title':'Async in C#',
'rating':4.2,
'category':'C#',
'level':'400',
'topics':[
'Introduction',
'Evolution of async with C# and .NET',
'Task Parallel Library',
'Using async and await',
'Patterns and Best Practices'
]
},
{
'id':6,
'title':'LINQ',
'rating':3.8,
'category':'C#',
'level':'200',
'topics':[
'C# Language improvements',
'Basic LINQ Queries',
'Queries in Lambda Expression Syntax',
'Deferred and Immediate Execution',
'LINQ in Layered Applications',
'Expressions and LINQ to Remote'
]
},
{
'id':7,
'title':'SQL Server Fundamentals',
'rating':4.5,
'category':'SQL Server',
'level':'100',
'topics':[
'Overview',
'Creating tables and constraints',
'Basic CRUD Operations',
'Join Queries',
'Apply, Merge and CTE',
'Transactions',
'Query Tuning'
]
},
{
'id':8,
'title':'ASP.NET Web API OData',
'rating':3.3,
'category':'ASP.NET',
'level':'300',
'topics':[
'REST and OData',
'OData in Web API using ODataController',
'OData using EntitySetController',
'Consuming OData Services from .NET and JavaScript clients'
]
},
{
'id':9,
'title':'Trasactions in SQL Server',
'rating':4.8,
'category':'SQL Server',
'level':'400',
'topics':[
'Intro to Transact-SQL',
'Basic Transactions',
'Transactions in procedures and triggers',
'Error Handling',
'Transaction best practices'
]
},
{
'id':10,
'title':'Intro to Node.js',
'rating':3,
'category':'JavaScript',
'level':'200',
'topics':[
'What is Node.js?',
'Asynchronous actions and Event loop',
'Accessing file system',
'Accessing Databases',
'Unit testing',
'Deploying Node.js Apps'
]
}
];
function getAllCourses(){
return courses;
}
function getCourse(id){
var filtered = _.filter(courses, function(c){
return c.id === id;
});
return filtered[0];
}
return {
getAllCourses:getAllCourses,
getCourse:getCourse
};
});
app.controller('HomeCtrl', function($scope, coursesDataSvc){
$scope.courses=coursesDataSvc.getAllCourses();
});
app.controller('ViewCourseCtrl',function($scope, $routeParams, coursesDataSvc){
if ($routeParams.id) {
console.log($routeParams.id);
$scope.course = coursesDataSvc.getCourse(parseInt($routeParams.id));
}
else{
$scope.course = coursesDataSvc.getCourse(1);
}
});
/* Styles go here */
.view-container {
position: relative;
}
.view-list {
margin-top: 1%;
}
.view-list > article h1 {
font-size: 125%;
line-height: 120%;
margin-bottom: 2%;
}
.view-list > article > div > img {
height: 80px;
float: left;
margin-right: 4%;
}
.view-list > article > div > time {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: bold;
float: right;
margin-left: 2%;
text-transform: uppercase;
}
.view-list > article > div > address {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 95%;
font-weight: bold;
margin: 0;
text-transform: uppercase;
}
.view-list > .article-container-full-width img {
float: none;
display: block;
margin: auto;
}
.view-list > .article-container-full-width address {
text-align: center;
}
.article-left-content {
border-bottom: solid 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px rgba(255,255,255,.8);
min-height: 100px;
padding: 20px;
}
.article-container-full-width {
margin: 6px;
float: left;
width: 110px;
height: 140px;
border-bottom: solid 0 transparent;
padding: 1.5% .5%;
}
small.right {
clear: right;
float: right;
}
#ng-view {
position: relative;
}
span[data-ng-show] {
color: #FA787E;
}
.thumbnail {
padding-bottom: 20px;
margin: 10px;
background-color: #DBDBDB;
}
.thumbnail .caption {
text-align: center;
padding-top: 20px;
font-family: 'Comic Sans MS';
}
.voting-button {
cursor: pointer;
border: none;
background: none;
}
.right {
clear: right;
float: right;
}
<div class="row">
Filter Courses: <input type="text" ng-model="courseFilter" />
Sort By: <select ng-model="sortExpression">
<option value="level">Level</option>
<option value="topic">Topic</option>
<option value="category">Category</option>
<option value="rating">Rating</option>
</select>
<div class="right"><input type="checkbox" ng-model="showFirstCourses" /> Show First 3 Courses</div>
</div>
<br />
<br />
<div class="row">
<div data-ng-repeat="course in courses | filter: courseFilter | orderBy: sortExpression"
class="thumbnail col-md-3 col-sm-3 col-lg-3 repeat-animation hide-fade" title="{{course.title}}"
ng-hide="showFirstCourses && $index > 2">
<div class="caption"><strong>{{course.title}}</strong></div>
<div style="text-align:center;">{{course.topic}}</div>
<span style="margin-right: 9px;">Level: {{course.level}}</span>
<span class="right">Category: {{course.category}}</span>
<br>
<span class="left" style="margin-right: 9px;">Rated: {{course.rating}}/5</span>
<div class="right"><a href="#/course/{{course.id}}">View Course</a></div>
<br />
</div>
</div>
<div class="row">
<h2>{{course.title}}</h2>
<br />
<br />
<div ng-repeat="topic in course.topics">
<a href="#" onclick="return false;"><i class="glyphicon glyphicon-play"></i></a> <span>{{topic}}</span>
</div>
<div class="pull-right">
<a href="#/">Back to Course List</a>
</div>
</div>
/* ng-view Animation */
.view-slide-in.ng-enter {
transition: all 1s ease;
-webkit-transition:all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
opacity:0.5;
position:relative;
opacity:0;
top:10px;
left:20px;
}
.view-slide-in.ng-enter {
opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
top:0;
left:0;
opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active{
top:5px;
left:5px;
opacity:1;
}
.view-slide-in.ng-leave{
top:0;
left:0;
opacity:0;
}
/* ng-repeat Animation */
.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
position:relative;
left:5px;
}
.repeat-animation.ng-enter {
opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {
opacity: 1;
}
.repeat-animation.ng-leave {
opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {
opacity: 0;
}
.repeat-animation.ng-move {
left:2px;
opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {
left:0;
opacity: 1;
}
/* ng-hide Animation */
.hide-fade.ng-hide-add, .hide-fade.ng-hide-remove {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
display:block!important;
}
.hide-fade.ng-hide-add.ng-hide-add-active,
.hide-fade.ng-hide-remove {
opacity:0;
}
.hide-fade.ng-hide-add,
.hide-fade.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}