Skip to content

Commit 190496e

Browse files
author
previousdeveloper
committed
demo with rest.
1 parent 66ef9ef commit 190496e

38 files changed

+26239
-2
lines changed

‎README.md

100644100755
+21-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,21 @@
1-
# angular2-blog
2-
This is a sample that shows blog post with rest api.
1+
# Angular2-blog
2+
This project uses ES6.
3+
4+
## Requirements
5+
6+
```
7+
npm install -g http-server
8+
npm install
9+
```
10+
11+
## ES6
12+
Located in `app/`
13+
14+
```
15+
http-server ./app
16+
```
17+
18+
go to `http://localhost:8080`
19+
20+
## Details
21+
It uses [http://gokhankaradas.com/wp-json/posts](http://gokhankaradas.com/wp-json/posts) backend api.

‎app/blog.html

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta content="IE=edge" http-equiv="X-UA-Compatible">
6+
<meta content="width=device-width, initial-scale=1" name="viewport">
7+
<meta content="simple angular2 blog" name="description">
8+
<meta content="previousdeveloper" name="author">
9+
<title>Angular2 Blog</title>
10+
<!-- Bootstrap Core CSS -->
11+
<link href="css/bootstrap.min.css" rel="stylesheet">
12+
<!-- Custom CSS -->
13+
<link href="css/clean-blog.min.css" rel="stylesheet">
14+
<!-- Custom Fonts -->
15+
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
16+
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
17+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
18+
</head>
19+
<body>
20+
</ul>
21+
<!-- Navigation -->
22+
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
23+
<div class="container-fluid">
24+
<!-- Brand and toggle get grouped for better mobile display -->
25+
<div class="navbar-header page-scroll">
26+
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
27+
<span class="sr-only">Navigation</span>
28+
<span class="icon-bar"></span>
29+
<span class="icon-bar"></span>
30+
<span class="icon-bar"></span>
31+
</button>
32+
<a class="navbar-brand" href="index.html"></a>
33+
</div>
34+
<!-- Collect the nav links, forms, and other content for toggling -->
35+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
36+
<ul class="nav navbar-nav navbar-right">
37+
<li>
38+
<a href="index.html">Home</a>
39+
</li>
40+
<li>
41+
<a href="index.html">Contact</a>
42+
</li>
43+
</ul>
44+
</div>
45+
<!-- /.navbar-collapse -->
46+
</div>
47+
<!-- /.container -->
48+
</nav>
49+
<!-- Page Header -->
50+
<!-- Set your background image for this header on the line below. -->
51+
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
52+
<div class="container">
53+
<div class="row">
54+
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
55+
<div class="site-heading">
56+
<!-- <span class="subheading">A Clean Blog Theme by Start Bootstrap</span> -->
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</header>
62+
<!-- Main Content -->
63+
<div class="container">
64+
<div class="row">
65+
<div *ng-for="#response of blogResponse" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
66+
<div class="post-preview">
67+
<a href={{response.link}}>
68+
<h2 class="post-title">
69+
{{response.title}}
70+
</h2>
71+
<h3 class="post-subtitle">
72+
{{response.excerpt}}
73+
</h3>
74+
</a>
75+
<p class="post-meta">Posted by
76+
<a href={{githubUrl}}>{{response.author.username}}</a>
77+
{{response.date}}</p>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<hr>
84+
<!-- Footer -->
85+
<footer>
86+
<div class="container">
87+
<div class="row">
88+
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
89+
<ul class="list-inline text-center">
90+
<a href={{githubUrl}}>
91+
<span class="fa-stack fa-lg">
92+
<i class="fa fa-circle fa-stack-2x"></i>
93+
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
94+
</span>
95+
</a>
96+
</li>
97+
</ul>
98+
</div>
99+
</div>
100+
</div>
101+
</footer>
102+
<!-- jQuery -->
103+
<script src="js/jquery.js"></script>
104+
<!-- Bootstrap Core JavaScript -->
105+
<script src="js/bootstrap.min.js"></script>
106+
<!-- Custom Theme JavaScript -->
107+
<script src="js/clean-blog.min.js"></script>
108+
</body>
109+
</html>

‎app/blogcomponent.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
ComponentAnnotation as Component,
3+
ViewAnnotation as View, bootstrap, NgFor
4+
}
5+
from 'angular2/angular2';
6+
7+
import {
8+
BlogService
9+
}
10+
from 'myblogservice';
11+
12+
@
13+
Component({
14+
selector: 'my-component',
15+
appInjector: [BlogService]
16+
17+
})
18+
19+
@ View({
20+
templateUrl: 'blog.html',
21+
directives: [NgFor]
22+
23+
})
24+
25+
export class BlogComponent {
26+
27+
githubUrl:string;
28+
29+
constructor(blogService: BlogService) {
30+
31+
this.blogService = blogService;
32+
this.blogService.getBlogDetails().then((response) => {
33+
this.blogResponse = response;
34+
});
35+
this.githubUrl ="http://www.github.com/previousdeveloper"
36+
}
37+
38+
39+
}

‎app/config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
System.config({
2+
traceurOptions: {
3+
annotations: true,
4+
types: true,
5+
memberVariables: true
6+
}
7+
});

0 commit comments

Comments
 (0)