<!doctype html>
<html lang="en" ng-app="site">
<!--Nested View With Angular Routes and JSON Data-->
<head>
<title>Dynamic Views in Angular Using JSON</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<my-menu menu-name="{{menu.name}}"></my-menu>
<div class="jumbotron pages" ng-show="display=true" ng-view>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Styles go here */
/*----------------------------
| Author: Puneet Thukral
| Version: 2
| Date: 29/06/2015
------------------------------*/
/****************************
| Reset/Overides
*****************************/
html{
overflow-y: scroll; /*Prevents Scroll Bar from appearing during animation/transition*/
}
.navbar-fixed-bottom, .navbar-fixed-top {
z-index: 9999;
}
.navbar-nav
{
float:none;
text-align:center;
}
.navbar-nav > li
{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif 'Indie Flower', cursive, 'Ubuntu', Courier New, Lucida Console;
float:none;
display: inline-block!important;
text-align:center!important;
text-transform: uppercase;
}
.navbar-inner {
text-align:center;
}
body
{
font-family: 'Ubuntu', Courier New, Lucida Console;
/* transition: all .4s ease-in-out;*/
}
body
{
margin: 0;
padding:0;
}
.container {
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
header {
background-color: #33526E;
position: fixed;
width: 100%;
}
.jumbotron {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
top: 50px;
margin-bottom: 0px;
padding-left: 4%;
padding-right: 4%;
padding-top: 0px;
}
.jumbotron .container {
position: relative;
top: 7%;
z-index: 4;
margin-left: auto;
margin-right: auto;
text-align: center;
;
}
/*
| NAV
*****************************/
/*Beta*/
.navbar-inverse .navbar-nav>.disabled a.beta {
color: #DA5B0F;
}
.jumbotron img {
}
.jumbotron .avatar {
margin: 5px;
border-radius: 50%;
width: 25%;
background-color: #751C1C;
border: 13px solid #E8491A;
-webkit-box-shadow:2px 2px 3px 1px rgba(56,19,13,1);
-moz-box-shadow: 2px 2px 3px 1px rgba(56,19,13,1);
box-shadow: 2px 2px 3px 1px rgba(56,19,13,1);
}
.jumbotron nav {
font-family: 'Indie Flower', cursive, 'Ubuntu', Courier New, Lucida Console;
font-size: 2vw;
text-align: left;
position: relative;
margin-top: 3%;
}
body, #menus .tools {
background-color: #EEEEEE;
}
a{
text-decoration: none;
}
#mygrid {
clear: both;
}
.wrapper {
padding:0px;
float: left;
width: 100%;
margin-left:20px;
}
/****************************
| Header Menu
*****************************/
#head_menu
{
float:left;
position:fixed;
padding: 0px 0px 0px 0px;
clear: both;
min-width:320px;
max-width:100%;
width:100%;
background-color:#121212;
border-bottom: 1px solid #666666;
box-shadow: 2px 2px 2px #444444;
margin-bottom: 20px;
background: -moz-linear-gradient(top,rgba(22, 22, 22, 1) 0,rgba(55, 55, 55, 1) 100%);
}
/****************************
Headings
*****************************/
a.headname
{
border: none;
text-decoration: none;
margin: 0px;
vertical-align: bottom;
float:left;
font-size: 16px!important ;
font-weight:bold;
}
.upper-border {
clear: both;
border-top: 1px solid #FFFFFF;
}
h1 {
}
h2, h3
{
color: #1840CA;
font-weight: bold;
}
/****************************
Buttons
*****************************/
#button
{
margin-bottom: 20px;
font-size: 10px;
clear: both;
}
a.help-fos-button, a.help-fos-button:link, a.help-fos-button:visited, a.help-fos-button-inactive
{
display: inline-block;
background: #4B95EC;
background: -moz-linear-gradient(top,rgba(80, 155, 229, 1) 0,rgba(17, 102, 216, 1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(80, 155, 229, 1)),color-stop(100%,rgba(17, 102, 216, 1)));
background: -webkit-linear-gradient(top,rgba(80, 155, 229, 1) 0,rgba(17, 102, 216, 1) 100%);
background: -o-linear-gradient(top,rgba(80, 155, 229, 1) 0,rgba(17, 102, 216, 1) 100%);
background: -ms-linear-gradient(top,rgba(80, 155, 229, 1) 0,rgba(17, 102, 216, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#509be5',endColorstr='#1166d8',GradientType=0);
background: linear-gradient(top,rgba(80, 155, 229, 1) 0,rgba(17, 102, 216, 1) 100%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*font-family: arial;*/
font-weight: normal;
font-size:12px;
padding:10px;
width:133px;
text-decoration: none;
color: white;
border: 1px solid #3479BD;
-webkit-box-shadow: inset 0 1px 1px #a3ccf6;
box-shadow: inset 0 1px 1px #a3ccf6;
text-shadow: 0 -1px 1px #1660A9;
line-height: 1;
text-align: center;
margin-left: 10px;
}
a.help-fos-button:hover
{
background:#71adf5;
background:-moz-linear-gradient(top,rgba(123,183,240,1) 0,rgba(52,128,232,1) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(123,183,240,1)),color-stop(100%,rgba(52,128,232,1)));
background:-webkit-linear-gradient(top,rgba(123,183,240,1) 0,rgba(52,128,232,1) 100%);
background:-o-linear-gradient(top,rgba(123,183,240,1) 0,rgba(52,128,232,1) 100%);
background:-ms-linear-gradient(top,rgba(123,183,240,1) 0,rgba(52,128,232,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bb7f0',endColorstr='#3480e8',GradientType=0);
background:linear-gradient(top,rgba(123,183,240,1) 0,rgba(52,128,232,1) 100%);
border:1px solid #69a4de;-webkit-box-shadow:inset 0 1px 1px #bbdcfb;
box-shadow:inset 0 1px 1px #bbdcfb;
text-shadow:0 -1px 1px #357ec6;
}
/****************************
Content Holder
*****************************/
.cnt
{
clear: both;
/* padding: 20px;*/
/* background-color: #323232;*/
height: 40px;
border-radius:5px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
/* border: 20px #3C497C solid;*/
margin:10px;
overflow: auto;
height: auto;
/*background: url("../img/main-content.png");*/
}
/****************************
div Styles
*****************************/
/****************************
Footer
*****************************/
footer
{
border-top: red 1px solid;
clear:both;
background-color:#121212;
border-top: 1px solid #666666;
height: 100px!important;
padding:2vh;
border-top: 1px solid #666666;
width: 100%;
height: 100px!important;
bottom: 0px;
position: fixed;
opacity: 0.7;
display: none;
}
/* ANIMATIONS
============================================================================= */
/* leaving animations ----------------------------------------- */
/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
from { opacity: 0.1; -webkit-transform: scale(0.8); }
}
@keyframes scaleDown {
from { opacity: 0.9; -webkit-transform: scale(0.4); }
}
/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
/* slide Out from the top */
@keyframes slideOutUp {
to { transform: translateY(-100%); }
}
/* Apply Animations to ng-enter and ng-leave */
.ng-enter { animation: slideInUp 0.4s both ease-in; z-index: 8888; overflow-x:hidden!important; }
.ng-leave { animation: slideOutUp 0.4s both ease-in; z-index: 9998; overflow-x:hidden!important; }
[
{
"title": "Animations in Angular - Part 1",
"summary": "Getting started with Angular Animations is relatively simple. So let's take a look at a simple example to get you started.",
"article": "yes",
"url": "blog/angular/angular_blog1.html",
"index": "0"
},
{
"title": "Angular 2.0 - What you need to know",
"summary": "Work in progress!",
"article": "yes",
"url": "blog/angular/angular_blog1.html",
"index": "1"
}
]
// Code goes here
/*global $:false, angular:false, applyResize:false, menu:false*/
/*jslint browser: true, devel: true */
(function() { //clousure
'use strict';
var app = angular.module('site', ['ngRoute']),
menu = {
home: 'Home',
angular: 'Angular'
};
/* CONFIG
===============================================================*/
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
}).otherwise({
redirectTo: '/'
})
.when('/angular', {
templateUrl: 'pages/angular.html',
controller: 'postController'
})
.when('/blog/:id', {
templateUrl: 'blog/post.html',
controller: 'blogsController'
})
});
/* CONTROLLERS
=================================================================*/
//Home/Main Controller
app.controller('mainController', ['$scope', '$log', '$location', function($scope, $log, $location) {
$log.info($location.path());
}]);
app.controller('MenuController', function() {
this.product = menu;
});
app.controller('postController', ['$scope', '$http', function($scope, $http) {
$http.get('data/angular_posts.json').success(function(data) {
$scope.posts = data;
});
}]);
//Blog Controller
app.controller('blogsController', ['$scope', '$log', '$location', '$http', '$routeParams', function($scope, $log, $location, $http, $routeParams) {
$http.get('data/angular_posts.json').success(function(data) {
$scope.post = data[$routeParams.id];
$scope.index = data.index;
});
$scope.x = "true";
}]);
/* DIRECTIVES
=================================================================*/
app.directive('menuDirective', [])
.directive('myMenu', function() {
return {
restrict: 'E',
replace: 'true',
templateUrl: 'directives/menu.html',
scope: {
menuName: "@"
}
};
});
}());
<div class="container">
<h1>HOME</h1>
</div>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-collapse" ng-controller="MenuController as menu">
<ul class="nav navbar-nav">
<li>
<a href="#/" class="blogs topmenu" ng-click="display=true">{{menu.product.home}}</a>
</li>
<li>
<a href="#/angular/" class="blogs topmenu" ng-click="display=true">{{menu.product.angular}}</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<article ng-repeat="post in posts">
<h2>{{post.title}}</h2>
<span>{{post.summary}}</span><br />
<span>{{post.updated}}</span>
<div ng-if="post.article">
<a href="#/blog/{{posts.indexOf(post)}}">Read more →</a>
</div>
<!-- <h2>Animations in Angular - Part 1</h2>
<span>Last Updated: 26/08/2015</span>
<div>
</div>-->
</article>
<h1>{{post.title}}</h1>
<!--Want to add include a html partial into blog/post.html-->
<!--<input ng-model="index" value="{{post.index}}"></input>-->
<div ng-if="post.index">
<ng-switch on="post.index">
<ng-switch-when="'0'" ng-include="'blog/angular/angular_blog' + post.index + '.html'">
<ng-switch-when="'1'" ng-include="'blog/angular/angular_blog' + post.index + '.html'">
</ng-switch>
</div>
<!-- <ng-switch on="index">
<ng-switch-when="0" ng-include="'blog/angular/angular_blog1.html'">
<ng-switch-when="1" ng-include="'blog/angular/angular_blog2.html'">
</ng-switch>-->
<h1>BLOG 1</h1>
<h1>Blog 2</h1>
<h1>BLOG 0</h1>