Skip to content

Commit 4da300b

Browse files
AAKASH HANDAAAKASH HANDA
AAKASH HANDA
authored and
AAKASH HANDA
committed
A
0 parents  commit 4da300b

38 files changed

+3977
-0
lines changed

‎.editorconfig

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# http://editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
charset = utf-8
7+
indent_style = space
8+
indent_size = 2
9+
end_of_line = lf
10+
insert_final_newline = true
11+
trim_trailing_whitespace = true
12+
13+
[*.md]
14+
insert_final_newline = false
15+
trim_trailing_whitespace = false

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules/
2+
/dist/
3+
/npm-debug.log

‎LICENSE

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

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
## angular2-seed
2+
3+
A simple starter project demonstrating the basic concepts of Angular 2.
4+
5+
6+
### Usage
7+
- Clone or fork this repository
8+
- Make sure you have [node.js](https://nodejs.org/) installed version 5+
9+
- Make sure you have NPM installed version 3+
10+
- `WINDOWS ONLY` run `npm install -g webpack webpack-dev-server typescript` to install global dependencies
11+
- run `npm install` to install dependencies
12+
- run `npm start` to fire up dev server
13+
- open browser to [`http://localhost:3000`](http://localhost:3000)
14+
- if you want to use other port, open `package.json` file, then change port in `--port 3000` script

‎package.json

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "angular2-seed",
3+
"version": "1.0.0",
4+
"description": "A simple starter Angular2 project",
5+
"scripts": {
6+
"build": "rimraf dist && webpack --progress",
7+
"watch": "npm run build -- --watch",
8+
"server": "webpack-dev-server --inline --progress --port 3000 --content-base src",
9+
"start": "npm run server"
10+
},
11+
"contributors": [
12+
"Rob Wormald <[email protected]>",
13+
"PatrickJS <[email protected]>"
14+
],
15+
"license": "MIT",
16+
"dependencies": {
17+
"@angular/common": "~4.0.1",
18+
"@angular/compiler": "~4.0.1",
19+
"@angular/compiler-cli": "~4.0.1",
20+
"@angular/core": "~4.0.1",
21+
"@angular/forms": "~4.0.1",
22+
"@angular/http": "~4.0.1",
23+
"@angular/platform-browser": "~4.0.1",
24+
"@angular/platform-browser-dynamic": "~4.0.1",
25+
"@angular/platform-server": "~4.0.1",
26+
"@angular/router": "~4.0.1",
27+
"@angular/upgrade": "~4.0.1",
28+
"angular-in-memory-web-api": "^0.3.1",
29+
"core-js": "^2.4.1",
30+
"ie-shim": "^0.1.0",
31+
"reflect-metadata": "^0.1.9",
32+
"rxjs": "5.0.1",
33+
"zone.js": "^0.8.4"
34+
},
35+
"devDependencies": {
36+
"@types/node": "^7.0.12",
37+
"angular2-router-loader": "^0.3.4",
38+
"angular2-template-loader": "^0.6.0",
39+
"awesome-typescript-loader": "^3.1.2",
40+
"css-loader": "^0.26.0",
41+
"html-webpack-plugin": "^2.28.0",
42+
"raw-loader": "^0.5.1",
43+
"rimraf": "^2.5.4",
44+
"to-string-loader": "^1.1.4",
45+
"typescript": "~2.2.0",
46+
"webpack": "^2.4.1",
47+
"webpack-dev-server": "2.4.2",
48+
"webpack-merge": "^4.1.0"
49+
},
50+
"keywords": [
51+
"Angular2",
52+
"angular2-seed",
53+
"official angular 2 seed",
54+
"official angular2 seed"
55+
],
56+
"repository": {
57+
"type": "git",
58+
"url": "git+https://github.com/angular/angular2-seed.git"
59+
},
60+
"bugs": {
61+
"url": "https://github.com/angular/angular2-seed/issues"
62+
},
63+
"homepage": "https://github.com/angular/angular2-seed#readme"
64+
}

‎src/app/about/about.component.css

Whitespace-only changes.

‎src/app/about/about.component.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<h3>About Component</h3>
2+
<p>This is the about component!</p>

‎src/app/about/about.component.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'about',
5+
styleUrls: ['./about.component.css'],
6+
templateUrl: './about.component.html'
7+
})
8+
export class AboutComponent {
9+
}

‎src/app/app.component.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<h3>
2+
Angular 2 Seed
3+
</h3>
4+
<nav>
5+
<a [routerLink]="['/']">
6+
Home
7+
</a>
8+
|
9+
<a [routerLink]="['/about']">
10+
About
11+
</a>
12+
|
13+
<a [routerLink]="['/github', 'angular']">
14+
Github Repos
15+
</a>
16+
|
17+
<a [routerLink]="['/contact']">
18+
Contact Us
19+
</a>
20+
</nav>
21+
22+
<main>
23+
<router-outlet></router-outlet>
24+
</main>
25+
26+
27+
<footer>
28+
© 2017
29+
</footer>

‎src/app/app.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app',
5+
templateUrl: './app.component.html',
6+
})
7+
export class AppComponent {
8+
}

‎src/app/app.module.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { NgModule } from '@angular/core'
2+
import { RouterModule } from '@angular/router';
3+
import { rootRouterConfig } from './app.routes';
4+
import { AppComponent } from './app.component';
5+
import { GithubService } from './github/shared/github.service';
6+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7+
import { BrowserModule } from '@angular/platform-browser';
8+
import { HttpModule } from '@angular/http';
9+
10+
import { AboutComponent } from './about/about.component';
11+
import { HomeComponent } from './home/home.component';
12+
import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
13+
import { RepoListComponent } from './github/repo-list/repo-list.component';
14+
import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
15+
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
16+
import { ContactComponent } from './contact/contact.component';
17+
18+
@NgModule({
19+
declarations: [
20+
AppComponent,
21+
AboutComponent,
22+
RepoBrowserComponent,
23+
RepoListComponent,
24+
RepoDetailComponent,
25+
HomeComponent,
26+
ContactComponent
27+
],
28+
imports: [
29+
BrowserModule,
30+
FormsModule,
31+
ReactiveFormsModule,
32+
HttpModule,
33+
RouterModule.forRoot(rootRouterConfig, { useHash: true })
34+
],
35+
providers: [
36+
GithubService
37+
],
38+
bootstrap: [ AppComponent ]
39+
})
40+
export class AppModule {
41+
42+
}

‎src/app/app.routes.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Routes } from '@angular/router';
2+
3+
import { AboutComponent } from './about/about.component';
4+
import { HomeComponent } from './home/home.component';
5+
import { RepoBrowserComponent } from './github/repo-browser/repo-browser.component';
6+
import { RepoListComponent } from './github/repo-list/repo-list.component';
7+
import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
8+
import { ContactComponent } from './contact/contact.component';
9+
10+
export const rootRouterConfig: Routes = [
11+
{ path: '', redirectTo: 'home', pathMatch: 'full' },
12+
{ path: 'home', component: HomeComponent },
13+
{ path: 'about', component: AboutComponent },
14+
{ path: 'github', component: RepoBrowserComponent,
15+
children: [
16+
{ path: '', component: RepoListComponent },
17+
{ path: ':org', component: RepoListComponent,
18+
children: [
19+
{ path: '', component: RepoDetailComponent },
20+
{ path: ':repo', component: RepoDetailComponent }
21+
]
22+
}]
23+
},
24+
{ path: 'contact', component: ContactComponent }
25+
];
26+

‎src/app/contact/contact-component.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.form-content {
2+
width: 90%;
3+
max-width: 600px;
4+
margin: 0 auto;
5+
}
6+
.form-content .sd-form-control {
7+
display: block;
8+
margin-bottom: 10px;
9+
width: 100%;
10+
padding: 10px;
11+
}
12+
.form-content textarea.sd-form-control {
13+
max-width: 100%;
14+
}

‎src/app/contact/contact.component.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<h2>Contact Reactive Form</h2>
2+
3+
<form (ngSubmit)="submitForm()" [formGroup]="contactForm" novalidate>
4+
<div class="form-content">
5+
<label>
6+
Name:
7+
<input type="text" formControlName="name" class="sd-form-control" placeholder="Enter your name.">
8+
</label>
9+
<label>
10+
Email:
11+
<input type="email" formControlName="email" class="sd-form-control" placeholder="Enter your email.">
12+
</label>
13+
<label>
14+
Content:
15+
<textarea formControlName="content" class="sd-form-control" placeholder="Content here."></textarea>
16+
</label>
17+
<div class="form-submit">
18+
<button type="submit">Submit</button>
19+
</div>
20+
</div>
21+
</form>
22+
23+
<div class="form-value">
24+
Form value:
25+
<pre>
26+
{{contactForm.value | json}}
27+
</pre>
28+
<p>
29+
Status: {{contactForm.status}}
30+
</p>
31+
<p>
32+
Valid: {{contactForm.valid}}
33+
</p>
34+
<p>Submit then open console to see full form.</p>
35+
</div>
36+

‎src/app/contact/contact.component.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3+
import CustomValidators from '../forms/CustomValidators';
4+
5+
@Component({
6+
selector: 'app-contact',
7+
templateUrl: './contact.component.html',
8+
styleUrls: ['./contact-component.css']
9+
})
10+
export class ContactComponent implements OnInit {
11+
contactForm: FormGroup;
12+
constructor(private formBuilder: FormBuilder) {}
13+
14+
ngOnInit() {
15+
this.contactForm = this.formBuilder.group({
16+
name: ['', Validators.required],
17+
email: ['', [Validators.required, CustomValidators.validateEmail]],
18+
content: ['', [Validators.required, Validators.minLength(10)]]
19+
});
20+
}
21+
submitForm(): void {
22+
console.log(this.contactForm);
23+
}
24+
}

‎src/app/forms/CustomValidators.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {FormControl} from '@angular/forms';
2+
3+
export default class CustomValidators {
4+
/**
5+
* sample from http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html
6+
*/
7+
static validateEmail(c: FormControl) {
8+
let EMAIL_REGEXP = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
9+
10+
return EMAIL_REGEXP.test(c.value) ? null : {
11+
validateEmail: {
12+
valid: false
13+
}
14+
};
15+
}
16+
}

‎src/app/github/repo-browser/repo-browser.component.css

Whitespace-only changes.

‎src/app/github/repo-browser/repo-browser.component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<h3>GitHub Browser</h3>
2+
3+
<input type="text" #repoName placeholder="Search Github Orgs">
4+
<button (click)="searchForOrg(repoName.value)">Search Orgs</button>
5+
6+
<router-outlet></router-outlet>

‎src/app/github/repo-browser/repo-browser.component.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
import { GithubService } from '../shared/github.service';
4+
5+
@Component({
6+
selector: 'repo-browser',
7+
templateUrl: './repo-browser.component.html',
8+
styleUrls: ['./repo-browser.component.css']
9+
})
10+
export class RepoBrowserComponent {
11+
12+
constructor(private router: Router, private github: GithubService) {
13+
}
14+
15+
searchForOrg(orgName: string) {
16+
this.github.getOrg(orgName)
17+
.subscribe(({name}) => {
18+
console.log(name);
19+
this.router.navigate(['/github', orgName]);
20+
});
21+
}
22+
23+
}

‎src/app/github/repo-detail/repo-detail.component.css

Whitespace-only changes.

‎src/app/github/repo-detail/repo-detail.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<h2>{{ repoDetails.full_name }}</h2>
2+
3+
<pre>this.repoDetails = {{ repoDetails | json }}</pre>

0 commit comments

Comments
 (0)