🎹 🗝️ 🧀 Angular 2エントリーのしきい値-理論と実践 👉🏿 👬 🤦🏻

こんにちは、居住者、読者、作家、否定的な評論家。

導入部として、またいくつかの質問を削除するために、自分自身について少しお話しします。私の名前はタマラです。ウジャス、私は女の子です！誰が怖い-記事を閉じて読んでいない。

残りについては、私は10年前にサイバネティックスの教員であるMIREAが未完成です。しかし、これらの10年間のすべては、私が広告に従事し、休憩中にたまたまインターネットに関連するさまざまなスタートアップで働いていたような方法で発展しました。

一般的に、要するに、Chukchiはプログラマーではありません。Chukchiは、気まずいコード行からうまく機能する素晴らしいことをする人を単に尊敬します。

他の誰かのコードを理解できないと言ったらsc笑します。 javaとphpでは、いくつかの簡単なものを修正することさえできます。しかし、それを超えて、私のプログラミングの経験は決してなくなりませんでした。

しかし、これは事実ではなく、魂は詩をゼロから求めました。そして、しばらく仕事を止めて、魂と体のために長い休暇を取ったので、私は0と自分で何かをしようとすることにしました。「何か」とは、私の小さなプロジェクトを意味します。

私が何をすべきかを考えて選択したとき、バックエンドとしてPHPに決めました。むしろ、フレームワーク-Laravel。

私にとっては、入場のしきい値で最低のように思えたので、私はそれを止めました。私の観点からは、多くのポイントが開示されておらず、コメントを読むためにソースに移動する必要があるため、その中のドキュメントは好きではありません。ただし、主な共通点は多くのリソースで整理されています。トレーニングのソースとしてのララキャストは非常に悲しいです。そこでテイラーは、すべてを非常に表面的に考え、あるものから別のものにジャンプし、完全に深くは行かない。上にすべて。

フロントエンドには、Angular 2を選択しました。はい、ベータモードであることはわかっています:)が、やはり論理的に思えました。

Angular2を入力するには、ドキュメント、githubのソースコード、そこの問題を読んで、stackoverflowを使用します-しかし、どういうわけか今はすべてが悲しいです-彼らは質問をします、ほとんどがドキュメントにある答えです。

さて、おそらく入門編で終わります。

ここで要点を説明します。以下では、私がやったこととそれを習得した期間についての小さな経験を共有します。

todoやhelloworldの例はありません。

私が今選んでいるものとそれが私にとってどのように機能するかの小さな例を示します。

ピースは、APIを介してデータを受信し、出力し、フォームを送信します。

Angular 2とLaravelのセットアップ。

. Angular 2 — 5- HelloWorld.

Laravel .

, .

. , Angular public, . Laravel , Angular , c . laravel . , api() . , .

, , . , , : api.proect.dev

, : proect.dev

sanex3339 Angular 2 Laravel 5.

!

, : , .

- , Angular, API.

, 2 . , :) , :)

, .

php artisan make:model MainCategory -m

Mainategory

.

.

2016_02_22_135455_create_main_categories_table.php

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateMainCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('main_categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name', 255)->unique(); //     . 
            $table->string('slug', 255)->unique(); //    
            $table->boolean('show')->default(0); //      .  true(1) -  ,  false(0) - .
            $table->timestamps();
            $table->softDeletes();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('main_categories');
    }
}

MainCategory.php

<?php
namespace App\Models\Catalog;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

/**
 * Class MainCategory
 *
 * @package App
 *
 * @property integer  $id $primaryKey $autoincrement
 * @property string   $name $unique
 * @property string   slug $unique
 * @property boolean  show
 * @property datetime created_at
 * @property datetime updated_at
 * @property datetime deleted_at
 */
class MainCategory extends Model
{
    use SoftDeletes;

    protected $fillable = ['name', 'slug', 'show'];

    protected $guarded = ['id'];

    protected $dates = ['created_at', 'updated_at', 'deleted_at'];

}

, php , , . php artisan make:controller MainCategoryController

Catalog, , .

, - , :)

MainCategoryController.php

<?php

namespace App\Http\Controllers\Catalog;

use App\Models\Catalog\MainCategory;
use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

/**
 * @api
 * @package     App\Http\Controllers\Catalog
 * @class    MainCategoryController
 */
class MainCategoryController extends Controller
{
    /**
     *        
     * @function indexAdmin
     * @return mixed $main_categories
     */
    public function indexAdmin()
    {
        $main_categories = MainCategory::all();
        return $main_categories;
    }

    /**
     * @function createAdmin
     *    .     
     *
     * @param Request $request
     */
    public function createAdmin(Request $request)
    {
        $main_category = new MainCategory;
        $main_category->name = $request->name;
        $main_category->slug = $request->slug;
        $main_category->show = $request->show;
        $main_category->save();
    }
}

, — . route.php

2 .

Route::group(['middleware' => 'cors'], function() {
    Route::group(['middleware' => 'api'], function () {
            Route::group(['prefix' => 'backend'], function () {
                Route::group(['namespace' => 'Catalog', 'prefix' => 'catalog'], function () {
                    Route::get('/main-categories', 'MainCategoryController@indexAdmin');
                    Route::post('/main-category/create', 'MainCategoryController@createAdmin');
                });
            });
    });
});

2 :

get: http://api.project.dev/backend/catalog/main-categories
post: http://api.project.dev/backend/catalog/main-category/create

! Angular 2.

.

, , . , habra .ts

, html.

— . . , , main.ts boot.ts :)

index.html

, , ,

<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

- API.

index.html

<html>
<head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>
</head>
<!-- 3. Display the application -->
<body>
<shop-app>Loading...</shop-app>
</body>
</html>

2 : , .

app.component.ts

. , , <shop-app></shop-app>

.

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
import {HomePageComponent} from "./home-page/home-page.component"
import {DashboardMainCategoryComponent} from "./dashboard/catalog/main-category/main-category.root.component";

@Component({
    selector: 'shop-app',
    template: `
    <a [routerLink]="['HomePage']"></a>
    <a [routerLink]="['/DashboardMainCategory']"></a>
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    {
        path: '/',
        name: 'HomePage',
        component: HomePageComponent,
        useAsDefault: true
    },

    {
        path: '/main-category',
        name: 'DashboardMainCategory',
        component: DashboardMainCategoryComponent
    }

])
export class ShopAppComponent { }

, - — : HomePageComponent

DashboardMainCategoryComponent

.

HomePageComponent - home-page.component.ts

import {Component} from "angular2/core";

@Component({
    selector: 'home-page',
    template: '<h1> </h1>'
})

export class HomePageComponent {}

DashboardMainCategoryComponent - main-category.root.component.ts

import {Component} from "angular2/core";

@Component({
    selector: 'dashboard-main-category',
    template: '<h1></h1>'
})

export class DashboardMainCategoryComponent {}

, . boot.ts ShopAppComponent

.

boot.ts

:) , , app.component.ts

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {ShopAppComponent} from "./app.component";

bootstrap(ShopAppComponent);

. , npm run start

, .

— , .

, , . , , .

MainCategory

- — php, pojo — java.

: main-category.ts

main-category.ts

export class MainCategory{
    constructor(
        public id: number,
        public name: string,
        public slug: string,
        public show: boolean,
        public created_at: string,
        public updated_at: string,
        public deleted_at: string
    ) {}
}

, — , API.

— string. — , . , .

MainCategoryService

, . . ARCHITECTURE OVERVIEW Angular2, , , - (, , , , — API) service , , . , . . main-category.service.ts

main-category.service.ts

import {Injectable} from "angular2/core";
import {Http, Headers, RequestOptions, Response} from "angular2/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/Rx'; //        API   .  ,     
import {MainCategory} from "./main-category";

//@Injectable - ,      .
@Injectable()
export class MainCategoryService {

    constructor (private http: Http) {}

    //          ,    2    .      ,          :) 
    private _getAdminMainCategories = 'http://api.shops.dev:8080/backend/catalog/main-categories';
    private _createAdminMainCategory = 'http://api.shops.dev:8080/backend/catalog/main-category/create';

   //    
   getAdminMainCategories() {
        //  API  get
        return this.http.get(this._getAdminMainCategories)
                        //       .    -    json 
                        .map(res => <MainCategory[]> res.json())
                        .catch(this.handleError);
    }

    //  .             ,   ,     
    createAdminMainCategory(name:String, slug:String, show:boolean) : Observable<MainCategory> {
        //   JSON-. ,        
        let body = JSON.stringify({name, slug, show});
        //   
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        // 
        return this.http.post(this._createAdminMainCategory, body, options)
            .map(res =>  <MainCategory> res.json())
            .catch(this.handleError)
    }

    private handleError (error: Response) {
        //in a real world app, we may send the error to some remote logging infrastructure
        //instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

. — !

GetMainCategories

, : main-category.get.component.ts

main-category.get.component.ts`

import {Component} from "angular2/core";
import {MainCategoryService} from "./main-category.service";
import {OnInit} from "angular2/core";
import {MainCategory} from "./main-category";

@Component({
    selector: 'backend-get-main-categories',
    templateUrl: 'app/dashboard/catalog/main-category/main-category.get.template.html',
    providers: [MainCategoryService] //        
})

export class BackendGetMainCategories implements OnInit {

    constructor (private _mainCategoryService: MainCategoryService) {}

    errorMessage: string;
    mainCategories: MainCategory[];

    ngOnInit() {
        this.getAdminMainCategories();
    }
    //    ,   getAdminMainCategories
    getAdminMainCategories() {
        this._mainCategoryService.getAdminMainCategories()
                                .subscribe(
                                    mainCategories => this.mainCategories = mainCategories,
                                    error => this.errorMessage = <any>error
                                );
    }
}

main-category.get.template.html

<h1> </h1>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>slug</th>
        <th>show</th>
        <th>created_at</th>
        <th>updated_at</th>
        <th>deleted_at</th>
    </tr>
    </thead>
    <tbody>
   <!--Angular            :)-->
    <tr *ngFor="#mainCategory of mainCategories">
        <td>{{ mainCategory.id }}</td>
        <td>{{ mainCategory.name }}</td>
        <td>{{ mainCategory.slug }}</td>
        <td>{{ mainCategory.show }}</td>
        <td>{{ mainCategory.created_at }}</td>
        <td>{{ mainCategory.updated_at }}</td>
        <td>{{ mainCategory.deleted_at }}</td>
    </tr>
    </tbody>
</table>

PostMainCategory

Angular2 — template data-driven. , template — . .. Angular1. Data-driven — Angular2 . . , , . — . .

main-category.create.component.html

import {Component} from "angular2/core";
import {MainCategoryService} from "./main-category.service";
import {OnInit} from "angular2/core";
import {FORM_DIRECTIVES} from "angular2/common";
import {FORM_PROVIDERS} from "angular2/common";
import {ControlGroup} from "angular2/common";
import {FormBuilder} from "angular2/common";
import {Validators} from "angular2/common";
import {MainCategory} from "./main-category";
import {HTTP_PROVIDERS} from "angular2/http";

@Component({
    selector: 'backend-create-main-category',
    templateUrl: 'app/dashboard/catalog/main-category/main-category.create.component.html',
    providers: [MainCategoryService, FORM_PROVIDERS, HTTP_PROVIDERS],
    directives: [FORM_DIRECTIVES]
})

export class BackendCreateMainCategory implements OnInit {
    //             :) 
    createMainCategoryForm: ControlGroup;
    mainCategories:MainCategory[];
    errorMessage: string;

    constructor( private _formBuilder: FormBuilder, private _mainCategoryService: MainCategoryService) {}

      //     -     
      ngOnInit() {
        this.createMainCategoryForm = this._formBuilder.group({
            'name': ['', Validators.required],
            'slug': ['', Validators.required],
            'show': [false]
        });
    }

     //      
     onSubmit() {
        var name = this.createMainCategoryForm.value.name;
        var slug = this.createMainCategoryForm.value.slug;
        var show = this.createMainCategoryForm.value.show;
        this._mainCategoryService.createAdminMainCategory(name, slug, show).subscribe(
          main_category => this.mainCategories.push(main_category),
            error => this.errorMessage = <any>error
        );

    }

main-category.create.template.html

<h1>  </h1>

<form [ngFormModel]="createMainCategoryForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="name"></label>
        <input type="text" id="name" [ngFormControl]="createMainCategoryForm.controls['name']">
    </div>
    <div>
        <label for="slug"></label>
        <input type="text" id="slug" [ngFormControl]="createMainCategoryForm.controls['slug']">
    </div>
    <div>
        <label for="show">?</label>
        <input type="checkbox" id="show" [ngFormControl]="createMainCategoryForm.controls['show']">
    </div>
    <button type="submit"></button>
</form>

radiobutton Angular2 , , , checkbox.

DashboardMainCategoryComponent

. :

main-category.root.component.ts

import {Component} from "angular2/core";
import {FORM_DIRECTIVES} from "angular2/common";
import {ControlGroup} from "angular2/common";
import {Control} from "angular2/common";
import {FormBuilder} from "angular2/common";
import {Validators} from "angular2/common";
import {MainCategoryService} from "./main-category.service";
import {HTTP_PROVIDERS} from "angular2/http";
import {BackendGetMainCategories} from "./main-category.get.component";
import {BackendCreateMainCategory} from "./main-category.create.component";
@Component({
    selector: 'dashboard-main-category',
    template:`
    <h1></h1>
    <backend-get-main-categories></backend-get-main-categories> 
    <backend-create-main-category></backend-create-main-category>
    `,
    directives: [
        FORM_DIRECTIVES,
        BackendGetMainCategories,
        BackendCreateMainCategory],
    providers: [MainCategoryService, HTTP_PROVIDERS]
})

export class DashboardMainCategoryComponent {}

, , :

Backend — 1 17 . , PhpStorm, . , php .

Angular2 .

JS. , , — , . Angular2, JavaScript, TypeScript, , , , 12 48 . , , - IDE .

: IMHO Angular2 , , , - , HelloWorld ToDo-.

P.S. , — Angular2. , , . - , , , .

P.P.S. , , , , - — :)

: , , , — . .

, !

Angular 2エントリーのしきい値-理論と実践