+
{{bindable}}
+{{boundParagraph.textContent}}
++ `, + styles: [] +}) + + +export class LifecycleComponent implements OnInit, OnChanges, DoCheck, AfterViewInit, AfterViewChecked, AfterContentChecked, AfterContentInit, OnDestroy { + + constructor() { } + + @Input() bindable = 1000; + + // if we want access to the local 'boundParagraph' value in the template use ViewChild + @ViewChild('boundParagraph') + myBoundParagraph: HTMLElement; + + ngOnInit() { + this.log('ngOnInit'); + } + + ngOnChanges(){ + this.log('ngOnChanges'); + } + + ngDoCheck() { + this.log('ngDoCheck'); + } + + ngAfterViewInit(){ + this.log('ngAfterViewInit'); + console.log(this.myBoundParagraph); + } + + ngAfterViewChecked(){ + this.log('ngAfterViewChecked'); + + } + + ngAfterContentChecked(){ + this.log('ngAfterContentChecked'); + + } + ngAfterContentInit(){ + this.log('ngAfterContentInit'); + + } + ngOnDestroy(){ + this.log('ngOnDestroy'); + + } + + private log(message: string){ + console.log(message); + } + +} diff --git a/first-app-databinding/src/assets/.gitkeep b/first-app-databinding/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/first-app-databinding/src/environments/environment.prod.ts b/first-app-databinding/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/first-app-databinding/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/first-app-databinding/src/environments/environment.ts b/first-app-databinding/src/environments/environment.ts new file mode 100644 index 0000000..00313f1 --- /dev/null +++ b/first-app-databinding/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/first-app-databinding/src/favicon.ico b/first-app-databinding/src/favicon.ico new file mode 100644 index 0000000..8081c7c Binary files /dev/null and b/first-app-databinding/src/favicon.ico differ diff --git a/first-app-databinding/src/index.html b/first-app-databinding/src/index.html new file mode 100644 index 0000000..8bbe79c --- /dev/null +++ b/first-app-databinding/src/index.html @@ -0,0 +1,14 @@ + + + + +
+ {{title}} +
diff --git a/first-app/src/app/app.component.spec.ts b/first-app/src/app/app.component.spec.ts new file mode 100644 index 0000000..3ad633e --- /dev/null +++ b/first-app/src/app/app.component.spec.ts @@ -0,0 +1,34 @@ +/* tslint:disable:no-unused-variable */ + +import { TestBed, async } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }); + TestBed.compileComponents(); + }); + + it('should create the app', async(() => { + let fixture = TestBed.createComponent(AppComponent); + let app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + + it(`should have as title 'app works!'`, async(() => { + let fixture = TestBed.createComponent(AppComponent); + let app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app works!'); + })); + + it('should render title in a h1 tag', async(() => { + let fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + let compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('app works!'); + })); +}); diff --git a/first-app/src/app/app.component.ts b/first-app/src/app/app.component.ts new file mode 100644 index 0000000..5e24c9d --- /dev/null +++ b/first-app/src/app/app.component.ts @@ -0,0 +1,56 @@ + +// One important note here is: No matter if you import some @angular +// package/ module or code from your own file, you never add the file extension +// in the import. +import { Component } from '@angular/core'; + + +// Decorators are basically functions which get attached to other code - in this case to a class. +// A decorator simply leads to the execution of some code in the background which "does something". + // Here, the @Component() decorator takes a JavaScript object as an argument and uses this argument + // to add some metadata (in the background) to this class. + +// That makes this class a Component which Angular 2 can recognize. + +// Angular 2 uses Decorators a lot (not only for Components) and you may simply +// keep in mind that Decorators "do something in the background and transform whatever +// they are attached to, to something else Angular 2 knows (like a Component)". + +@Component({ + + // i.e.
+ // templates are not optional
+ // templateUrl: './app.component.html',
+
+// note the backticks
+ template: `
+
+
+
+
+
+ `,
+ // styling is optional
+ // styleUrls: ['./app.component.css']
+
+ // inline styles example - also note the backticks
+ styles: [`
+ h1 {
+ color: red;
+ }
+ `]
+})
+
+// Classes is a feature added by TypeScript which makes the creation of objects easier.
+ // You can think of a class as a blueprint for JS objects. Note that you rarely
+ // instantiate classes (= create objects based on them) yourself in an Angular 2 app.
+ // Most of the time, Angular 2 will do that for you.
+export class AppComponent {
+ title = 'hey hey hey';
+}
diff --git a/first-app/src/app/app.module.ts b/first-app/src/app/app.module.ts
new file mode 100644
index 0000000..cf3a66c
--- /dev/null
+++ b/first-app/src/app/app.module.ts
@@ -0,0 +1,34 @@
+// we'll always use the browser module
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+// needed for input fields
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+// using the cli - this line was automatically added
+import { OtherComponent } from './other/other.component';
+import { AnotherComponent } from './other/another.component';
+
+// Set up the components for the ng 2 app
+@NgModule({
+ // which directives you're going to be using
+ declarations: [
+ AppComponent,
+ // using the cli - this line was automatically added
+ OtherComponent,
+ AnotherComponent
+ ],
+ // which other modules do I use
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ // for application wide services
+ providers: [],
+ // Here is the bootstrap component
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/first-app/src/app/index.ts b/first-app/src/app/index.ts
new file mode 100644
index 0000000..875bdb2
--- /dev/null
+++ b/first-app/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/first-app/src/app/other/another.component.ts b/first-app/src/app/other/another.component.ts
new file mode 100644
index 0000000..7346921
--- /dev/null
+++ b/first-app/src/app/other/another.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'hey-another',
+ template: `
+
+
+ `,
+ styles: []
+})
+export class AnotherComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/first-app/src/app/other/other.component.html b/first-app/src/app/other/other.component.html
new file mode 100644
index 0000000..5d8a388
--- /dev/null
+++ b/first-app/src/app/other/other.component.html
@@ -0,0 +1,3 @@
+FirstApp
+ Loading...
+
+
diff --git a/first-app/src/main.ts b/first-app/src/main.ts
new file mode 100644
index 0000000..9f28066
--- /dev/null
+++ b/first-app/src/main.ts
@@ -0,0 +1,16 @@
+
+// main.ts is executed FIRST
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+// this is your bootstrap/main line of code
+// SEe app.module.ts
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/first-app/src/polyfills.ts b/first-app/src/polyfills.ts
new file mode 100644
index 0000000..3b4c55b
--- /dev/null
+++ b/first-app/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/first-app/src/styles.css b/first-app/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/first-app/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/first-app/src/test.ts b/first-app/src/test.ts
new file mode 100644
index 0000000..81af890
--- /dev/null
+++ b/first-app/src/test.ts
@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('./', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/first-app/src/tsconfig.json b/first-app/src/tsconfig.json
new file mode 100644
index 0000000..1cf713a
--- /dev/null
+++ b/first-app/src/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "baseUrl": "",
+ "declaration": false,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": ["es6", "dom"],
+ "mapRoot": "./",
+ "module": "es6",
+ "moduleResolution": "node",
+ "outDir": "../dist/out-tsc",
+ "sourceMap": true,
+ "target": "es5",
+ "typeRoots": [
+ "../node_modules/@types"
+ ]
+ }
+}
diff --git a/first-app/src/typings.d.ts b/first-app/src/typings.d.ts
new file mode 100644
index 0000000..ea52695
--- /dev/null
+++ b/first-app/src/typings.d.ts
@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
diff --git a/first-app/tslint.json b/first-app/tslint.json
new file mode 100644
index 0000000..640d02c
--- /dev/null
+++ b/first-app/tslint.json
@@ -0,0 +1,107 @@
+{
+ "rulesDirectory": [
+ "node_modules/codelyzer"
+ ],
+ "rules": {
+ "class-name": true,
+ "comment-format": [
+ true,
+ "check-space"
+ ],
+ "curly": true,
+ "eofline": true,
+ "forin": true,
+ "indent": [
+ true,
+ "spaces"
+ ],
+ "label-position": true,
+ "max-line-length": [
+ true,
+ 140
+ ],
+ "member-access": false,
+ "member-ordering": [
+ true,
+ "static-before-instance",
+ "variables-before-functions"
+ ],
+ "no-arg": true,
+ "no-bitwise": true,
+ "no-console": [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
+ "no-construct": true,
+ "no-debugger": true,
+ "no-duplicate-variable": true,
+ "no-empty": false,
+ "no-eval": true,
+ "no-inferrable-types": true,
+ "no-shadowed-variable": true,
+ "no-string-literal": false,
+ "no-switch-case-fall-through": true,
+ "no-trailing-whitespace": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-var-keyword": true,
+ "object-literal-sort-keys": false,
+ "one-line": [
+ true,
+ "check-open-brace",
+ "check-catch",
+ "check-else",
+ "check-whitespace"
+ ],
+ "quotemark": [
+ true,
+ "single"
+ ],
+ "radix": true,
+ "semicolon": [
+ "always"
+ ],
+ "triple-equals": [
+ true,
+ "allow-null-check"
+ ],
+ "typedef-whitespace": [
+ true,
+ {
+ "call-signature": "nospace",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
+ "variable-name": false,
+ "whitespace": [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ],
+
+ "directive-selector": [true, "attribute", "app", "camelCase"],
+ "component-selector": [true, "element", "app", "kebab-case"],
+ "use-input-property-decorator": true,
+ "use-output-property-decorator": true,
+ "use-host-property-decorator": true,
+ "no-input-rename": true,
+ "no-output-rename": true,
+ "use-life-cycle-interface": true,
+ "use-pipe-transform-interface": true,
+ "component-class-suffix": true,
+ "directive-class-suffix": true,
+ "no-access-missing-member": true,
+ "templates-use-public": true,
+ "invoke-injectable": true
+ }
+}
diff --git a/recipe-book/.editorconfig b/recipe-book/.editorconfig
new file mode 100644
index 0000000..6e87a00
--- /dev/null
+++ b/recipe-book/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/recipe-book/.gitignore b/recipe-book/.gitignore
new file mode 100644
index 0000000..ce200cb
--- /dev/null
+++ b/recipe-book/.gitignore
@@ -0,0 +1,35 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
diff --git a/recipe-book/README.md b/recipe-book/README.md
new file mode 100644
index 0000000..0e315d6
--- /dev/null
+++ b/recipe-book/README.md
@@ -0,0 +1,31 @@
+# RecipeBook
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/recipe-book/angular-cli.json b/recipe-book/angular-cli.json
new file mode 100644
index 0000000..2050e59
--- /dev/null
+++ b/recipe-book/angular-cli.json
@@ -0,0 +1,59 @@
+{
+ "project": {
+ "version": "1.0.0-beta.22-1",
+ "name": "recipe-book"
+ },
+ "apps": [
+ {
+ "root": "src",
+ "outDir": "dist",
+ "assets": [
+ "assets",
+ "favicon.ico"
+ ],
+ "index": "index.html",
+ "main": "main.ts",
+ "test": "test.ts",
+ "tsconfig": "tsconfig.json",
+ "prefix": "rb",
+ "mobile": false,
+ "styles": [
+ "styles.css"
+ ],
+ "scripts": [],
+ "environments": {
+ "source": "environments/environment.ts",
+ "dev": "environments/environment.ts",
+ "prod": "environments/environment.prod.ts"
+ }
+ }
+ ],
+ "addons": [],
+ "packages": [],
+ "e2e": {
+ "protractor": {
+ "config": "./protractor.conf.js"
+ }
+ },
+ "test": {
+ "karma": {
+ "config": "./karma.conf.js"
+ }
+ },
+ "defaults": {
+ "styleExt": "css",
+ "prefixInterfaces": false,
+ "inline": {
+ "style": false,
+ "template": false
+ },
+ "spec": {
+ "class": false,
+ "component": true,
+ "directive": true,
+ "module": false,
+ "pipe": true,
+ "service": true
+ }
+ }
+}
diff --git a/recipe-book/e2e/app.e2e-spec.ts b/recipe-book/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000..92f1511
--- /dev/null
+++ b/recipe-book/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { RecipeBookPage } from './app.po';
+
+describe('recipe-book App', function() {
+ let page: RecipeBookPage;
+
+ beforeEach(() => {
+ page = new RecipeBookPage();
+ });
+
+ it('should display message saying app works', () => {
+ page.navigateTo();
+ expect(page.getParagraphText()).toEqual('rb works!');
+ });
+});
diff --git a/recipe-book/e2e/app.po.ts b/recipe-book/e2e/app.po.ts
new file mode 100644
index 0000000..5973126
--- /dev/null
+++ b/recipe-book/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class RecipeBookPage {
+ navigateTo() {
+ return browser.get('/');
+ }
+
+ getParagraphText() {
+ return element(by.css('rb-root h1')).getText();
+ }
+}
diff --git a/recipe-book/e2e/tsconfig.json b/recipe-book/e2e/tsconfig.json
new file mode 100644
index 0000000..656bdb1
--- /dev/null
+++ b/recipe-book/e2e/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "declaration": false,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "outDir": "../dist/out-tsc-e2e",
+ "sourceMap": true,
+ "target": "es5",
+ "typeRoots": [
+ "../node_modules/@types"
+ ]
+ }
+}
diff --git a/recipe-book/karma.conf.js b/recipe-book/karma.conf.js
new file mode 100644
index 0000000..1f2613a
--- /dev/null
+++ b/recipe-book/karma.conf.js
@@ -0,0 +1,43 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', 'angular-cli'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-remap-istanbul'),
+ require('angular-cli/plugins/karma')
+ ],
+ files: [
+ { pattern: './src/test.ts', watched: false }
+ ],
+ preprocessors: {
+ './src/test.ts': ['angular-cli']
+ },
+ mime: {
+ 'text/x-typescript': ['ts','tsx']
+ },
+ remapIstanbulReporter: {
+ reports: {
+ html: 'coverage',
+ lcovonly: './coverage/coverage.lcov'
+ }
+ },
+ angularCli: {
+ config: './angular-cli.json',
+ environment: 'dev'
+ },
+ reporters: config.angularCli && config.angularCli.codeCoverage
+ ? ['progress', 'karma-remap-istanbul']
+ : ['progress'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false
+ });
+};
diff --git a/recipe-book/package.json b/recipe-book/package.json
new file mode 100644
index 0000000..f48d606
--- /dev/null
+++ b/recipe-book/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "recipe-book",
+ "version": "0.0.0",
+ "license": "MIT",
+ "angular-cli": {},
+ "scripts": {
+ "start": "ng serve",
+ "lint": "tslint \"src/**/*.ts\"",
+ "test": "ng test",
+ "pree2e": "webdriver-manager update",
+ "e2e": "protractor"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/common": "2.2.3",
+ "@angular/compiler": "2.2.3",
+ "@angular/core": "2.2.3",
+ "@angular/forms": "2.2.3",
+ "@angular/http": "2.2.3",
+ "@angular/platform-browser": "2.2.3",
+ "@angular/platform-browser-dynamic": "2.2.3",
+ "@angular/router": "3.2.3",
+ "core-js": "^2.4.1",
+ "rxjs": "5.0.0-beta.12",
+ "ts-helpers": "^1.1.1",
+ "zone.js": "^0.6.23"
+ },
+ "devDependencies": {
+ "@angular/compiler-cli": "2.2.3",
+ "@types/jasmine": "2.5.38",
+ "@types/node": "^6.0.42",
+ "angular-cli": "1.0.0-beta.22-1",
+ "codelyzer": "~2.0.0-beta.1",
+ "jasmine-core": "2.5.2",
+ "jasmine-spec-reporter": "2.5.0",
+ "karma": "1.2.0",
+ "karma-chrome-launcher": "^2.0.0",
+ "karma-cli": "^1.0.1",
+ "karma-jasmine": "^1.0.2",
+ "karma-remap-istanbul": "^0.2.1",
+ "protractor": "4.0.9",
+ "ts-node": "1.2.1",
+ "tslint": "^4.0.2",
+ "typescript": "~2.0.3",
+ "webdriver-manager": "10.2.5"
+ }
+}
diff --git a/recipe-book/protractor.conf.js b/recipe-book/protractor.conf.js
new file mode 100644
index 0000000..169743b
--- /dev/null
+++ b/recipe-book/protractor.conf.js
@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: [
+ './e2e/**/*.e2e-spec.ts'
+ ],
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4200/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function() {}
+ },
+ useAllAngular2AppRoots: true,
+ beforeLaunch: function() {
+ require('ts-node').register({
+ project: 'e2e'
+ });
+ },
+ onPrepare: function() {
+ jasmine.getEnv().addReporter(new SpecReporter());
+ }
+};
diff --git a/recipe-book/src/app/app.component.html b/recipe-book/src/app/app.component.html
new file mode 100644
index 0000000..5697472
--- /dev/null
+++ b/recipe-book/src/app/app.component.html
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts
new file mode 100644
index 0000000..c761564
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Recipe } from '../recipe';
+
+@Component({
+ selector: 'rb-recipe-item',
+ templateUrl: './recipe-item.component.html'
+})
+export class RecipeItemComponent implements OnInit {
+ @Input() recipe:Recipe;
+ recipeId;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
new file mode 100644
index 0000000..515d669
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
@@ -0,0 +1,12 @@
+();
+ recipe:Recipe = new Recipe('Dummy', 'Dummy', 'https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067');
+
+ constructor() { }
+ onSelectedRecipe(recipe:Recipe) {
+ this.recipeSelected.emit(recipe);
+ }
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe.ts b/recipe-book/src/app/recipes/recipe.ts
new file mode 100644
index 0000000..541f05d
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe.ts
@@ -0,0 +1,6 @@
+export class Recipe {
+
+ constructor(public name:string, public description:string, public imagePath:string) {
+
+ }
+}
diff --git a/recipe-book/src/app/recipes/recipes.component.html b/recipe-book/src/app/recipes/recipes.component.html
new file mode 100644
index 0000000..49d9ff3
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipes.component.html
@@ -0,0 +1,9 @@
+RecipeBook
+ Loading...
+
+
diff --git a/recipe-book/src/main.ts b/recipe-book/src/main.ts
new file mode 100644
index 0000000..5c3c520
--- /dev/null
+++ b/recipe-book/src/main.ts
@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/recipe-book/src/polyfills.ts b/recipe-book/src/polyfills.ts
new file mode 100644
index 0000000..3b4c55b
--- /dev/null
+++ b/recipe-book/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/recipe-book/src/styles.css b/recipe-book/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/recipe-book/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/recipe-book/src/test.ts b/recipe-book/src/test.ts
new file mode 100644
index 0000000..81af890
--- /dev/null
+++ b/recipe-book/src/test.ts
@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('./', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/recipe-book/src/tsconfig.json b/recipe-book/src/tsconfig.json
new file mode 100644
index 0000000..1cf713a
--- /dev/null
+++ b/recipe-book/src/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "baseUrl": "",
+ "declaration": false,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": ["es6", "dom"],
+ "mapRoot": "./",
+ "module": "es6",
+ "moduleResolution": "node",
+ "outDir": "../dist/out-tsc",
+ "sourceMap": true,
+ "target": "es5",
+ "typeRoots": [
+ "../node_modules/@types"
+ ]
+ }
+}
diff --git a/recipe-book/src/typings.d.ts b/recipe-book/src/typings.d.ts
new file mode 100644
index 0000000..ea52695
--- /dev/null
+++ b/recipe-book/src/typings.d.ts
@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
diff --git a/recipe-book/tslint.json b/recipe-book/tslint.json
new file mode 100644
index 0000000..f0314f6
--- /dev/null
+++ b/recipe-book/tslint.json
@@ -0,0 +1,107 @@
+{
+ "rulesDirectory": [
+ "node_modules/codelyzer"
+ ],
+ "rules": {
+ "class-name": true,
+ "comment-format": [
+ true,
+ "check-space"
+ ],
+ "curly": true,
+ "eofline": true,
+ "forin": true,
+ "indent": [
+ true,
+ "spaces"
+ ],
+ "label-position": true,
+ "max-line-length": [
+ true,
+ 140
+ ],
+ "member-access": false,
+ "member-ordering": [
+ true,
+ "static-before-instance",
+ "variables-before-functions"
+ ],
+ "no-arg": true,
+ "no-bitwise": true,
+ "no-console": [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
+ "no-construct": true,
+ "no-debugger": true,
+ "no-duplicate-variable": true,
+ "no-empty": false,
+ "no-eval": true,
+ "no-inferrable-types": true,
+ "no-shadowed-variable": true,
+ "no-string-literal": false,
+ "no-switch-case-fall-through": true,
+ "no-trailing-whitespace": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-var-keyword": true,
+ "object-literal-sort-keys": false,
+ "one-line": [
+ true,
+ "check-open-brace",
+ "check-catch",
+ "check-else",
+ "check-whitespace"
+ ],
+ "quotemark": [
+ true,
+ "single"
+ ],
+ "radix": true,
+ "semicolon": [
+ "always"
+ ],
+ "triple-equals": [
+ true,
+ "allow-null-check"
+ ],
+ "typedef-whitespace": [
+ true,
+ {
+ "call-signature": "nospace",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ }
+ ],
+ "variable-name": false,
+ "whitespace": [
+ true,
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type"
+ ],
+
+ "directive-selector": [true, "attribute", "rb", "camelCase"],
+ "component-selector": [true, "element", "rb", "kebab-case"],
+ "use-input-property-decorator": true,
+ "use-output-property-decorator": true,
+ "use-host-property-decorator": true,
+ "no-input-rename": true,
+ "no-output-rename": true,
+ "use-life-cycle-interface": true,
+ "use-pipe-transform-interface": true,
+ "component-class-suffix": true,
+ "directive-class-suffix": true,
+ "no-access-missing-member": true,
+ "templates-use-public": true,
+ "invoke-injectable": true
+ }
+}
here is an inline template - huh?
+Here is some passed through content
+Here is more stuff
++ other works! +
diff --git a/first-app/src/app/other/other.component.ts b/first-app/src/app/other/other.component.ts new file mode 100644 index 0000000..c05390c --- /dev/null +++ b/first-app/src/app/other/other.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'hey-other', + templateUrl: './other.component.html' +}) +export class OtherComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/first-app/src/assets/.gitkeep b/first-app/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/first-app/src/environments/environment.prod.ts b/first-app/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/first-app/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/first-app/src/environments/environment.ts b/first-app/src/environments/environment.ts new file mode 100644 index 0000000..00313f1 --- /dev/null +++ b/first-app/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/first-app/src/favicon.ico b/first-app/src/favicon.ico new file mode 100644 index 0000000..8081c7c Binary files /dev/null and b/first-app/src/favicon.ico differ diff --git a/first-app/src/index.html b/first-app/src/index.html new file mode 100644 index 0000000..26d38dd --- /dev/null +++ b/first-app/src/index.html @@ -0,0 +1,14 @@ + + + + +
+
diff --git a/recipe-book/src/app/app.component.ts b/recipe-book/src/app/app.component.ts
new file mode 100644
index 0000000..9c18b57
--- /dev/null
+++ b/recipe-book/src/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'rb-root',
+ templateUrl: './app.component.html'
+})
+export class AppComponent {
+}
diff --git a/recipe-book/src/app/app.module.ts b/recipe-book/src/app/app.module.ts
new file mode 100644
index 0000000..e3de57d
--- /dev/null
+++ b/recipe-book/src/app/app.module.ts
@@ -0,0 +1,34 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { HeaderComponent } from './header.component';
+import { RecipesComponent } from './recipes/recipes.component';
+import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
+import { RecipeItemComponent } from './recipes/recipe-list/recipe-item.component';
+import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
+import { ShoppingListComponent } from './shopping-list/shopping-list.component';
+import { ShoppingListAddComponent } from './shopping-list/shopping-list-add.component';
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ HeaderComponent,
+ RecipesComponent,
+ RecipeListComponent,
+ RecipeItemComponent,
+ RecipeDetailComponent,
+ ShoppingListComponent,
+ ShoppingListAddComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/recipe-book/src/app/header.component.html b/recipe-book/src/app/header.component.html
new file mode 100644
index 0000000..9825c52
--- /dev/null
+++ b/recipe-book/src/app/header.component.html
@@ -0,0 +1,29 @@
+
diff --git a/recipe-book/src/app/header.component.ts b/recipe-book/src/app/header.component.ts
new file mode 100644
index 0000000..cf76ae5
--- /dev/null
+++ b/recipe-book/src/app/header.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'rb-header',
+ templateUrl: './header.component.html'
+})
+export class HeaderComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/app/index.ts b/recipe-book/src/app/index.ts
new file mode 100644
index 0000000..875bdb2
--- /dev/null
+++ b/recipe-book/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html
new file mode 100644
index 0000000..8ff3e37
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html
@@ -0,0 +1,26 @@
+
+
+
+ 
+
+
+
+
+
+ {{selectedRecipe?.name}}
+
+
+
+
+
++
+
+
+
+{{selectedRecipe?.description}}
+
+
diff --git a/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts
new file mode 100644
index 0000000..d9b1b89
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Recipe } from '../recipe';
+
+@Component({
+ selector: 'rb-recipe-detail',
+ templateUrl: './recipe-detail.component.html'
+})
+export class RecipeDetailComponent implements OnInit {
+ @Input() selectedRecipe:Recipe;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
new file mode 100644
index 0000000..f59f543
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
@@ -0,0 +1,11 @@
+
+
+ Ingredients
+
+
+
+
+ {{recipe.name}}
+{{recipe.description}}
+
+
+
+ New Recipe
+
+
+
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
new file mode 100644
index 0000000..b3b6fff
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+
+import { Recipe } from '../recipe';
+
+@Component({
+ selector: 'rb-recipe-list',
+ templateUrl: './recipe-list.component.html'
+})
+export class RecipeListComponent implements OnInit {
+ recipeList: Recipe[] = [];
+ @Output() recipeSelected = new EventEmitter
+
+-
+
+
diff --git a/recipe-book/src/app/recipes/recipes.component.ts b/recipe-book/src/app/recipes/recipes.component.ts
new file mode 100644
index 0000000..0246909
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipes.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Recipe } from './recipe';
+
+@Component({
+ selector: 'rb-recipes',
+ templateUrl: './recipes.component.html'
+})
+export class RecipesComponent implements OnInit {
+ selectedRecipe:Recipe;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/app/shopping-list/shopping-list-add.component.html b/recipe-book/src/app/shopping-list/shopping-list-add.component.html
new file mode 100644
index 0000000..2ad7a73
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list-add.component.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
diff --git a/recipe-book/src/app/shopping-list/shopping-list-add.component.ts b/recipe-book/src/app/shopping-list/shopping-list-add.component.ts
new file mode 100644
index 0000000..1d1bf77
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list-add.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'rb-shopping-list-add',
+ templateUrl: './shopping-list-add.component.html'
+})
+export class ShoppingListAddComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/app/shopping-list/shopping-list.component.html b/recipe-book/src/app/shopping-list/shopping-list.component.html
new file mode 100644
index 0000000..fe10c1e
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list.component.html
@@ -0,0 +1,9 @@
+
diff --git a/recipe-book/src/app/shopping-list/shopping-list.component.ts b/recipe-book/src/app/shopping-list/shopping-list.component.ts
new file mode 100644
index 0000000..a95ee85
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'rb-shopping-list',
+ templateUrl: './shopping-list.component.html'
+})
+export class ShoppingListComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/recipe-book/src/assets/.gitkeep b/recipe-book/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/recipe-book/src/environments/environment.prod.ts b/recipe-book/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/recipe-book/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/recipe-book/src/environments/environment.ts b/recipe-book/src/environments/environment.ts
new file mode 100644
index 0000000..00313f1
--- /dev/null
+++ b/recipe-book/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+ production: false
+};
diff --git a/recipe-book/src/favicon.ico b/recipe-book/src/favicon.ico
new file mode 100644
index 0000000..8081c7c
Binary files /dev/null and b/recipe-book/src/favicon.ico differ
diff --git a/recipe-book/src/index.html b/recipe-book/src/index.html
new file mode 100644
index 0000000..e8dbca8
--- /dev/null
+++ b/recipe-book/src/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+