Initial commit

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Users Environment Variables
+.lock-wscript
+
+dist
+dev
+lib

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Minko Gechev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,49 @@
+# Introduction
+
+Sample application based upon [mgechev]((https://github.com/mgechev) [angular2-seed](https://github.com/mgechev/angular2-seed).
+
+[![Join the chat at https://gitter.im/mgechev/angular2-seed](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mgechev/angular2-seed?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+**Note:** Angular 2.0 is not production ready yet! This project is perfect for playing around with the latest versions but do not start new projects with it since a lot of new changes are going to be introduced until the framework is officially released.
+
+# Features
+
+* Component styling
+* Router and child routes
+* Http
+
+# How to start
+
+```bash
+git clone https://github.com/AngularShowcase/angular2-sample-app.git
+cd angular2-sample-app
+npm install
+# If you don't have gulp already installed
+npm install -g gulp
+# dev
+gulp serve.dev
+# prod
+gulp serve.prod
+```
+
+# Now to extend?
+
+If you want to use your custom libraries:
+
+```bash
+npm install my-library --save
+vim gulpfile.js
+```
+Add reference to the installed library in `PATH.src.lib`.
+
+# Contribution
+
+Any contribution is very much welcome.
+
+# Change Log
+
+You can follow the [Angular 2 change log here](https://github.com/angular/angular/blob/master/CHANGELOG.md).
+
+# License
+
+MIT

app/app.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

app/app.html

@@ -0,0 +1,9 @@
+<section class="sample-app-content">
+  <nav>
+    <a [router-link]="['/home']">Home</a>
+    <a [router-link]="['/about']">About</a>
+    <a href="#" (click)="navigate('/users/home')">User</a>
+  </nav>
+
+  <router-outlet></router-outlet>
+</section>

app/app.ts

@@ -0,0 +1,38 @@
+/// <reference path="../typings/tsd.d.ts" />
+import {Component, View, bootstrap, NgFor, Inject} from 'angular2/angular2';
+import {Router, RouteConfig, routerDirectives, routerInjectables} from 'angular2/router';
+import {httpInjectables} from 'angular2/http';
+
+import {Home} from './components/home/home';
+import {About} from './components/about/about';
+import {NamesList} from './services/NameList';
+import {Users, UsersService} from './components/users/users';
+
+@Component({
+  selector: 'app',
+  viewInjector: [UsersService, NamesList]
+})
+@RouteConfig([
+  { path: '/', redirectTo: '/home' },
+  { path: '/home', component: Home, as: 'home' },
+  { path: '/about', component: About, as: 'about' },
+  { path: '/users/...', component: Users, as: 'users' }
+])
+@View({
+  templateUrl: './app.html?v=<%= VERSION %>',
+  styles: ['app { display: block }'],
+  directives: [routerDirectives]
+})
+class App {
+  constructor(@Inject(Router) private router) {}
+
+  // Navigate child routes until router-link works for
+  // child router in parent component.
+  navigate(route) {
+    this.router.navigate(route);
+    return false;
+  }
+}
+
+
+bootstrap(App, [routerInjectables, httpInjectables]);

app/components/about/about.html

@@ -0,0 +1,14 @@
+<p>
+  For reward, here is a list of awesome computer scientists!
+</p>
+
+<p>
+  You want more? Add them yourself!
+</p>
+<p>
+  <input #newname>
+  <button (click)="addName(newname)">Add</button>
+</p>
+<ul>
+  <li *ng-for="#name of list.get()">{{name}}</li>
+</ul>

app/components/about/about.ts

@@ -0,0 +1,19 @@
+import {Component, View, NgFor} from 'angular2/angular2';
+
+import {NamesList} from '../../services/NameList';
+
+@Component({
+  selector: 'about'
+})
+@View({
+  templateUrl: './components/about/about.html?v=<%= VERSION %>',
+  directives: [NgFor]
+})
+export class About {
+  constructor(public list: NamesList) {
+  }
+  addName(newname) {
+    this.list.add(newname.value);
+    newname.value = '';
+  }
+}

app/components/home/home.html

@@ -0,0 +1,10 @@
+<h1>Howdy!</h1>
+
+<h2>
+Gratz!
+</h2>
+
+<p>
+Your deployment of Angular 2 Seed worked perfectly!
+Click on <em>about</em> to get your reward!
+</p>

app/components/home/home.ts

@@ -0,0 +1,9 @@
+import {Component, View} from 'angular2/angular2';
+
+@Component({
+  selector: 'home'
+})
+@View({
+  templateUrl: './components/home/home.html?v=<%= VERSION %>',
+})
+export class Home {}

app/components/users/services/interfaces.ts

@@ -0,0 +1,33 @@
+export interface IUser {
+  HETU: string;
+  cell: string;
+  dob: string;
+  email: string;
+  gender: string;
+  location: {
+    city: string;
+    region: string;
+    street: string;
+    zip: string;
+  }
+  md5: string;
+  name: {
+    title: string;
+    first: string;
+    last: string;
+  }
+  nationality: string;
+  password: string;
+  phone: string;
+  picture: {
+    large: string;
+    medium: string;
+    thumbnail: string;
+  }
+  registered: string;
+  salt: string;
+  sha1: string;
+  sha256: string;
+  username: string;
+  version: string;
+}

app/components/users/services/users-service.ts

@@ -0,0 +1,44 @@
+import {Inject, EventEmitter} from 'angular2/angular2';
+import {Http} from 'angular2/http';
+import {IUser} from './interfaces';
+
+export {IUser}
+
+export class UsersService {
+  private loaded = false;
+  private loading = false;
+  private xhr: any;
+  usersCache: Array<IUser>;
+  selectedUser: any;
+
+  constructor(@Inject(Http) private http: Http) {
+    this.usersCache = [];
+  }
+
+  getAll() {
+    if (this.loaded || this.loading) {
+      return this.usersCache;
+    } else {
+      this.loading = true;
+      this.xhr = this.http.get('http://api.randomuser.me/?results=10')
+        .toRx()
+        .map(res => res.json().results)
+        .map(res => res.map(o => o.user))
+        .subscribe(res => {
+          res.forEach(user => this.usersCache.push(user));
+          this.loaded = true;
+          this.loading = false;
+        });
+
+      return this.usersCache;
+    }
+  }
+
+  selectUser(user: IUser) {
+    this.selectedUser = user;
+  }
+
+  getSelectedUser(): IUser {
+    return this.selectedUser;
+  }
+}

app/components/users/user-details/user-details.html

@@ -0,0 +1,12 @@
+<div class="user-details">
+  <h1>User Details</h1>
+  <p>
+    Firstname: {{ user.name.first }}
+  </p>
+  <p>
+    Lastname: {{ user.name.last }}
+  </p>
+  <p>
+    <img src="{{ user.picture.medium }}" alt="" />
+  </p>
+</div>

app/components/users/user-details/user-details.ts

@@ -0,0 +1,15 @@
+import {Component, View} from 'angular2/angular2';
+import {UsersService, IUser} from '../services/users-service';
+
+@Component({
+  selector: 'user-details'
+})
+@View({
+  templateUrl: './components/users/user-details/user-details.html?v=<%= VERSION %>'
+})
+export class UserDetails {
+  user: IUser;
+  constructor(private usersService: UsersService) {
+    this.user = usersService.getSelectedUser();
+  }
+}

app/components/users/users-list/users-list.html

@@ -0,0 +1,8 @@
+<ul class="users-list">
+  <li *ng-for="#user of users">
+    <!-- Component loading works but browser Location is not updated -->
+    <img src="{{ user.picture.medium }}" alt="{{ user.username }} is picture" />
+    <a [router-link]="['./user-details', { username: user.username }]"
+       (click)="select(user)">{{ user.name.last }}, {{ user.name.first }}</a>
+  </li>
+</ul>

app/components/users/users-list/users-list.ts

@@ -0,0 +1,21 @@
+import {Component, View, Inject, NgFor} from 'angular2/angular2';
+import {Router, routerDirectives} from 'angular2/router';
+
+import {UsersService} from '../services/users-service';
+
+@Component({
+  selector: 'users-list',
+  properties: ['users']
+})
+@View({
+  templateUrl: './components/users/users-list/users-list.html?v=<%= VERSION %>',
+  styles: ['user-details { display: block; }'],
+  directives: [NgFor, routerDirectives]
+})
+export class UsersList {
+  constructor(private usersService: UsersService) {}
+
+  select(user) {
+    this.usersService.selectUser(user);
+  }
+}

app/components/users/users.css

@@ -0,0 +1,23 @@
+users,
+users-list,
+users-home,
+user-details { display: block; }
+
+ul.users-list {
+  margin: 0;
+  padding: 0;
+  display: block;
+  width: 300px;
+  float: left;
+}
+.users-list > li {
+  list-style: none;
+}
+.users-list > li > img {
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  margin: 0 5px 0 5px;
+}
+
+.user-details {}

app/components/users/users.html

@@ -0,0 +1,5 @@
+<h1>Users</h1>
+
+<users-list [users]="users"></users-list>
+
+<router-outlet></router-outlet>