Initial commit

.angular-cli.json

@@ -0,0 +1,82 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "first-angular-app"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "class": {
+      "spec": false
+    },
+    "component": {
+      "inlineStyle": true,
+      "inlineTemplate": true,
+      "spec": false
+    },
+    "directive": {
+      "spec": false
+    },
+    "guard": {
+      "spec": false
+    },
+    "module": {
+      "spec": false
+    },
+    "pipe": {
+      "spec": false
+    },
+    "service": {
+      "spec": false
+    }
+  }
+}

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# 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

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "first-angular-app",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.0.0",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.5.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "^1.6.5",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
+    "typescript": "~2.4.2"
+  }
+}

src/app/app.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <h1>HTML z app componentu</h1>
+  <app-products-list>
+  `,
+  styles: []
+})
+export class AppComponent {
+
+}

src/app/app.module.ts

@@ -0,0 +1,25 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import {ProductsModule} from './products/products.module';
+import { FormsModule }   from '@angular/forms';
+import { AppComponent } from './app.component';
+
+import {ProductsListComponent} from './products/products-list/products-list.component';
+import {ProductsEditComponent} from './products/products-edit/products-edit.component';
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    ProductsModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+  exports:[FormsModule]
+})
+export class AppModule { }

src/app/category/category.ts

@@ -0,0 +1,9 @@
+export class Category{
+    CategoryName:string;
+    CategoryID:number;
+    constructor(categoryName:string,categoryId:number)
+    {
+        this.CategoryName=categoryName;
+        this.CategoryID=categoryId;
+    }
+}

src/app/products/product.ts

@@ -0,0 +1,17 @@
+import {Category} from '../category/category';
+export class  Product{
+    ProductName:string;
+    CategoryDef:Category;
+    ImageSource:string;
+    ElementClass:string;
+    constructor(productName:string,categoryDef:Category,imageSource:string){
+        this.ProductName=productName;
+        this.CategoryDef=categoryDef;
+        this.ImageSource=imageSource;
+        if(this.CategoryDef.CategoryName=='beverages')
+        {
+            this.ElementClass="withBg";
+        }
+    }
+}
+

src/app/products/products-edit/products-edit.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {Router,ActivatedRoute } from '@angular/router';
+
+class Product{
+  ProductName:string;
+}
+
+@Component({
+  selector: 'app-products-edit',
+  template: `
+    <form >
+      <input [(ngModel)]="model.ProductName" type="text" name="ProductName">
+      <select name="CategoryID">
+      <option *ngFor="let c of categories" [value]="c">{{c}}</option>
+      </select>
+      <button (click)=showModel()>text</button>
+    </form>`,
+  styles: []
+})
+export class ProductsEditComponent implements OnInit {
+
+  model:Product=new Product();
+  categories:string[]=["beverages","sports"];
+  constructor(private route:ActivatedRoute) {
+   }
+
+  ngOnInit() {
+    this.route.params.subscribe(params=>{console.log(params);
+    }
+  )
+
+  }
+  showModel():void{
+    alert(this.model.ProductName);
+  }
+}

src/app/products/products-list/products-list.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import {Product} from '../product';
+import {Category} from '../../category/category';
+@Component({
+  selector: 'app-products-list',
+  template: 
+  `
+  <style>
+    .withBg{
+      background:red;
+    }
+  </style>
+  <table border=1>
+    <tr *ngFor="let product of productNames" [class]=product.ElementClass >
+      <td>{{product.ProductName}}</td>
+      <td>{{product.CategoryID}}</td>
+      <td><img [src]=product.ImageSource [class] height=200>
+    </tr>
+  </table>`
+})
+export class ProductsListComponent {
+  image1:string="https://i.ytimg.com/vi/T3arcT2ntsE/maxresdefault.jpg";
+  image2:string="https://royalcanin.pl/blog/wp-content/uploads/2016/12/231W-2-950x680.jpeg";
+  productNames:Product[];
+  constructor() {
+    localStorage.setItem("product",JSON.stringify(
+      [new Product("product",new Category('beverages',4),this.image1),
+      new Product("product 2",new Category('fruits',5),this.image2)]
+    ));
+    this.productNames=JSON.parse(localStorage.getItem("product"));
+
+  } 
+}
+

src/app/products/products.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProductsListComponent } from './products-list/products-list.component';
+import { ProductsEditComponent } from './products-edit/products-edit.component';
+import {FormsModule} from '@angular/forms';
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  declarations: [ ProductsListComponent, ProductsEditComponent],
+  exports:[ProductsListComponent]
+})
+export class ProductsModule { }

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

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
+};

src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>FirstAngularApp</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));