6 |
7 |
9 | 2 | homepage works! 3 |
4 | -------------------------------------------------------------------------------- /basic-webpage/src/app/homepage/homepage.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomepageComponent } from './homepage.component'; 4 | 5 | describe('HomepageComponent', () => { 6 | let component: HomepageComponent; 7 | let fixture: ComponentFixture
2 |
7 |
8 |
--------------------------------------------------------------------------------
/basic-webpage/src/app/jumbotron/jumbotron.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { JumbotronComponent } from './jumbotron.component';
4 |
5 | describe('JumbotronComponent', () => {
6 | let component: JumbotronComponent;
7 | let fixture: ComponentFixture
4 |
6 |
--------------------------------------------------------------------------------
/github-search/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | }).compileComponents();
12 | }));
13 |
14 | it('should create the app', async(() => {
15 | const fixture = TestBed.createComponent(AppComponent);
16 | const app = fixture.debugElement.componentInstance;
17 | expect(app).toBeTruthy();
18 | }));
19 |
20 | it(`should have as title 'app works!'`, async(() => {
21 | const fixture = TestBed.createComponent(AppComponent);
22 | const app = fixture.debugElement.componentInstance;
23 | expect(app.title).toEqual('app works!');
24 | }));
25 |
26 | it('should render title in a h1 tag', async(() => {
27 | const fixture = TestBed.createComponent(AppComponent);
28 | fixture.detectChanges();
29 | const compiled = fixture.debugElement.nativeElement;
30 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
31 | }));
32 | });
33 |
--------------------------------------------------------------------------------
/github-search/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/github-search/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule } from '@angular/http';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { AppComponent } from './app.component';
8 | import { ProfileComponent } from './profile/profile.component';
9 | import { NavbarComponent } from './navbar/navbar.component';
10 | import { GithubService } from './github.service';
11 |
12 |
13 | @NgModule({
14 | declarations: [
15 | AppComponent,
16 | ProfileComponent,
17 | NavbarComponent
18 | ],
19 | imports: [
20 | BrowserModule,
21 | FormsModule,
22 | HttpModule,
23 | ],
24 | providers: [GithubService],
25 | bootstrap: [AppComponent]
26 | })
27 | export class AppModule { }
28 |
--------------------------------------------------------------------------------
/github-search/src/app/github.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { GithubService } from './github.service';
4 |
5 | describe('GithubService', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [GithubService]
9 | });
10 | });
11 |
12 | it('should ...', inject([GithubService], (service: GithubService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/github-search/src/app/github.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Headers } from '@angular/http';
3 | import 'rxjs/add/operator/map';
4 |
5 | @Injectable()
6 | export class GithubService {
7 | private username:string;
8 |
9 | constructor(private http:Http) {
10 | console.log('Service Ready');
11 | }
12 |
13 | // Get user by name
14 | getUser() {
15 | return this.http.get('http://api.github.com/users/'+this.username)
16 | .map(res => res.json());
17 | }
18 |
19 | // Get user repos
20 | getRepos() {
21 | return this.http.get('http://api.github.com/users/'+this.username+'/repos')
22 | .map(res => res.json());
23 | }
24 |
25 |
26 | // Update username as user types in search
27 | updateUser(username:string) {
28 | this.username = username;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/github-search/src/app/navbar/navbar.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ajayns/angular-projects/bb1d2fb9cc3a11b68f2097cdba20266908eff3f6/github-search/src/app/navbar/navbar.component.css
--------------------------------------------------------------------------------
/github-search/src/app/navbar/navbar.component.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/github-search/src/app/navbar/navbar.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { NavbarComponent } from './navbar.component';
4 |
5 | describe('NavbarComponent', () => {
6 | let component: NavbarComponent;
7 | let fixture: ComponentFixture
23 |
30 |
--------------------------------------------------------------------------------
/mean-todo/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | }).compileComponents();
12 | }));
13 |
14 | it('should create the app', async(() => {
15 | const fixture = TestBed.createComponent(AppComponent);
16 | const app = fixture.debugElement.componentInstance;
17 | expect(app).toBeTruthy();
18 | }));
19 |
20 | it(`should have as title 'app works!'`, async(() => {
21 | const fixture = TestBed.createComponent(AppComponent);
22 | const app = fixture.debugElement.componentInstance;
23 | expect(app.title).toEqual('app works!');
24 | }));
25 |
26 | it('should render title in a h1 tag', async(() => {
27 | const fixture = TestBed.createComponent(AppComponent);
28 | fixture.detectChanges();
29 | const compiled = fixture.debugElement.nativeElement;
30 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
31 | }));
32 | });
33 |
--------------------------------------------------------------------------------
/mean-todo/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/mean-todo/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule } from '@angular/http';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { AppComponent } from './app.component';
8 | import { TodosComponent } from './todos/todos.component';
9 | import { TodosService } from './todos.service'
10 |
11 | // Import components and modules
12 | @NgModule({
13 | declarations: [
14 | AppComponent,
15 | TodosComponent
16 | ],
17 | imports: [
18 | BrowserModule,
19 | FormsModule,
20 | HttpModule,
21 | ],
22 | providers: [TodosService], // Specify services
23 | bootstrap: [AppComponent]
24 | })
25 | export class AppModule { }
26 |
--------------------------------------------------------------------------------
/mean-todo/src/app/todos.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { TodosService } from './todos.service';
4 |
5 | describe('TodosService', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [TodosService]
9 | });
10 | });
11 |
12 | it('should ...', inject([TodosService], (service: TodosService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/mean-todo/src/app/todos.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Headers } from '@angular/http';
3 | import 'rxjs/add/operator/map';
4 |
5 | @Injectable()
6 | export class TodosService {
7 |
8 | constructor(public http:Http) { }
9 |
10 | // Get all todos
11 | getTodos(){
12 | return this.http.get('/api/todos');
13 | }
14 |
15 | // Post todo
16 | saveTodo(todo) {
17 | var headers = new Headers();
18 | headers.append('Content-Type','application/json');
19 | return this.http.post('/api/todo', JSON.stringify(todo),{headers: headers})
20 | .map(res => res.json());
21 | }
22 |
23 | // Edit todo
24 | updateTodo(todo){
25 | var headers = new Headers();
26 | headers.append('Content-Type','application/json');
27 | return this.http.put('/api/todo/'+todo._id, JSON.stringify(todo),{headers: headers});
28 | }
29 |
30 | // Delete todo
31 | deleteTodo(id){
32 | return this.http.delete('/api/todo/'+id);
33 | }
34 |
35 |
36 | }
37 |
--------------------------------------------------------------------------------
/mean-todo/src/app/todos/todos.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ajayns/angular-projects/bb1d2fb9cc3a11b68f2097cdba20266908eff3f6/mean-todo/src/app/todos/todos.component.css
--------------------------------------------------------------------------------
/mean-todo/src/app/todos/todos.component.html:
--------------------------------------------------------------------------------
1 |
2 |
24 |
29 |
25 |
26 |
28 |
3 |
9 |
10 | Add Todo
4 |
5 |
6 |
7 |
8 |
11 |
33 |
--------------------------------------------------------------------------------
/mean-todo/src/app/todos/todos.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TodosComponent } from './todos.component';
4 |
5 | describe('TodosComponent', () => {
6 | let component: TodosComponent;
7 | let fixture: ComponentFixture
12 |
14 |
15 |
16 | No Todos
13 |
17 |
32 |
18 |
19 |
20 |
21 |
22 | {{todo.text}}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
7 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/meteor-todo/client/main.js:
--------------------------------------------------------------------------------
1 |
2 | import angular from 'angular';
3 | import angularMeteor from 'angular-meteor';
4 | import todoList from '../imports/components/todoList/todoList';
5 | import '../imports/startup/accounts-config.js';
6 |
7 | angular.module('meteor-todo', [
8 | angularMeteor,
9 | todoList.name,
10 | 'accounts.ui'
11 | ]);
12 |
13 | function onReady() {
14 | angular.bootstrap(document, ['meteor-todo']);
15 | }
16 |
17 | if (Meteor.isCordova) {
18 | angular.element(document).on('deviceready', onReady);
19 | } else {
20 | angular.element(document).ready(onReady);
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/meteor-todo/imports/api/tasks.js:
--------------------------------------------------------------------------------
1 | import { Meteor } from 'meteor/meteor';
2 | import { Mongo } from 'meteor/mongo';
3 | import { check } from 'meteor/check';
4 |
5 | export const Tasks = new Mongo.Collection('tasks');
6 |
7 | if(Meteor.isServer) {
8 | Meteor.publish('tasks', function tasksPublication() {
9 | return Tasks.find();
10 | })
11 | }
12 |
13 | Meteor.methods({
14 | 'tasks.insert' (text) {
15 | check(text, String);
16 |
17 | if (!Meteor.userId()) {
18 | throw new Meteor.error('not-authorized');
19 | }
20 |
21 | Tasks.insert({
22 | text,
23 | createdAt: new Date(),
24 | owner: Meteor.userId(),
25 | username: Meteor.user().username,
26 | });
27 | },
28 | 'tasks.remove' (taskId) {
29 | check(taskId, String);
30 |
31 | Tasks.remove(taskId);
32 | },
33 | 'tasks.setChecked' (taskId, setChecked) {
34 | check(taskId, String);
35 | check(setChecked, Boolean);
36 |
37 | Tasks.update(taskId, {
38 | $set: {
39 | checked: setChecked
40 | }
41 | })
42 | }
43 | })
--------------------------------------------------------------------------------
/meteor-todo/imports/components/todoList/todoList.html:
--------------------------------------------------------------------------------
1 | Todo List ( {{$ctrl.incompleteCount}} )
3 |-
17 |
- 18 | 19 | 20 | 21 | {{task.username}} - {{task.text}} 22 | 23 | 24 |
About
2 | -------------------------------------------------------------------------------- /ng-spotify/src/app/about/about.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AboutComponent } from './about.component'; 4 | 5 | describe('AboutComponent', () => { 6 | let component: AboutComponent; 7 | let fixture: ComponentFixture
3 |
4 |
20 |
21 |
22 |
33 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/album/album.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AlbumComponent } from './album.component';
4 |
5 | describe('AlbumComponent', () => {
6 | let component: AlbumComponent;
7 | let fixture: ComponentFixture
5 |
19 |
6 |
10 |
7 | 
8 |
9 |
11 |
18 | 12 | {{artist.name}} 13 |
14 |{{album.name}}
15 |Release Date: {{album.release_date}}
16 | View In Spotify 17 |
23 |
32 | Album Tracks
24 |
25 |
31 |
26 |
30 | {{track.track_number}} - {{track.name}}
27 | 28 | Preview Track 29 |
5 |
10 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | }).compileComponents();
12 | }));
13 |
14 | it('should create the app', async(() => {
15 | const fixture = TestBed.createComponent(AppComponent);
16 | const app = fixture.debugElement.componentInstance;
17 | expect(app).toBeTruthy();
18 | }));
19 |
20 | it(`should have as title 'app works!'`, async(() => {
21 | const fixture = TestBed.createComponent(AppComponent);
22 | const app = fixture.debugElement.componentInstance;
23 | expect(app.title).toEqual('app works!');
24 | }));
25 |
26 | it('should render title in a h1 tag', async(() => {
27 | const fixture = TestBed.createComponent(AppComponent);
28 | fixture.detectChanges();
29 | const compiled = fixture.debugElement.nativeElement;
30 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
31 | }));
32 | });
33 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule } from '@angular/http';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { AppComponent } from './app.component';
8 | import { NavbarComponent } from './navbar/navbar.component';
9 | import { AboutComponent } from './about/about.component';
10 | import { SearchComponent } from './search/search.component';
11 | import { ArtistComponent } from './artist/artist.component';
12 | import { AlbumComponent } from './album/album.component';
13 |
14 | import { SpotifyService } from './spotify.service';
15 | import { routing } from './app.routes'; // Contains all routing information
16 |
17 |
18 | @NgModule({
19 | // Specify components
20 | declarations: [
21 | AppComponent,
22 | NavbarComponent,
23 | AboutComponent,
24 | SearchComponent,
25 | ArtistComponent,
26 | AlbumComponent
27 | ],
28 | // Specify modules used
29 | imports: [
30 | BrowserModule,
31 | FormsModule,
32 | HttpModule,
33 | routing
34 | ],
35 | providers: [SpotifyService], // Import service
36 | bootstrap: [AppComponent]
37 | })
38 | export class AppModule { }
39 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { AboutComponent } from './about/about.component';
4 | import { SearchComponent } from './search/search.component';
5 | import { ArtistComponent } from './artist/artist.component';
6 | import { AlbumComponent } from './album/album.component';
7 |
8 |
9 | // Route Configuration
10 | export const routes: Routes = [
11 | { path: '', component: SearchComponent },
12 | { path: 'about', component: AboutComponent },
13 | { path: 'artist/:id', component: ArtistComponent },
14 | { path: 'album/:id', component: AlbumComponent }
15 | ];
16 |
17 |
18 | export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
--------------------------------------------------------------------------------
/ng-spotify/src/app/artist/artist.component.css:
--------------------------------------------------------------------------------
1 | .artist-header{
2 | padding-bottom:20px;
3 | margin-bottom:20px;
4 | border-bottom:solid 1px #333;
5 | }
6 |
7 | .artist-thumb{
8 | width:80px;
9 | height:auto;
10 | float:left;
11 | margin-right:10px;
12 | }
13 |
14 | .artist-albums .well{
15 | margin-bottom:20px;
16 | overflow:auto;
17 | min-height:400px;
18 | }
19 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/artist/artist.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
15 |
32 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/artist/artist.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ArtistComponent } from './artist.component';
4 |
5 | describe('ArtistComponent', () => {
6 | let component: ArtistComponent;
7 | let fixture: ComponentFixture
6 | 
7 |
8 | {{artist.name}}
9 |10 | 11 | Genres: {{genre}} 12 |
13 |
16 |
31 |
17 |
18 |
30 |
19 |
29 |
20 |
28 |
21 |
26 |
27 | Need Music?
2 | 7 | 8 |
9 |
23 |
--------------------------------------------------------------------------------
/ng-spotify/src/app/search/search.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SearchComponent } from './search.component';
4 |
5 | describe('SearchComponent', () => {
6 | let component: SearchComponent;
7 | let fixture: ComponentFixture
10 |
22 |
11 |
21 |
12 |
20 |
13 |
19 | {{res.name}}
14 |
15 | Genres:
16 | {{genre}}
17 |
18 |
3 |
10 |
11 |
4 |
5 |
6 |
7 | 8 |
9 | 7 | 8 |
SocketChat
12 |
13 |
14 |
15 |
16 | 17 | 18 |
22 |
23 |
24 | 16 | 17 | 18 |
19 |
21 | {{message.username}}: {{message.text}}
20 |
25 | Please Log In To Chat
26 |
27 |
--------------------------------------------------------------------------------
/socketchat/src/app/chat/chat.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ChatComponent } from './chat.component';
4 |
5 | describe('ChatComponent', () => {
6 | let component: ChatComponent;
7 | let fixture: ComponentFixtureType: {{workout.type}}
18 |19 | {{workout.note}} 20 |
21 | 22 |