Bana seni tahmin ediyorum ve bu okuyacağız herkes zaten rahatça açısal 1 ile, diyerek Önsöz ( şimdi olarak anılacaktır angularjs basitçe aksine, Eğik yeni sürümler için). Bununla birlikte, Angular 2 + 'daki bazı eklemelere ve önemli farklılıklara girelim.
- Açısal eklediler
cli.
Çalıştırarak yeni bir proje başlatabilirsiniz ng new [app name]. Daha ng serve
fazla bilgi edinmek için projenize hizmet verebilirsiniz : https://github.com/angular/angular-cli
- Açısal kodunuz ES6 Typescript ile yazılmıştır ve çalışma zamanında tarayıcıdaki Javascript ile derlenir.
Bu konuda tam bir kavrayış elde etmek için cevabımın altındaki bazı kaynak listesine göz atmanızı tavsiye ederim.
- Proje Yapısı
Temel bir yapıda, işinizi en fazla yapacağınız bir app/tsklasörünüz olacak ve bir uzantı içeren klasör dosyalarında app/jsbulacaksınız . Tarayıcınız yerel yazıyı okuyamadığından, ".ts" dosyalarınızı hata ayıklamak üzere tarayıcınızla "eşleştirir".
app/js.js.map
Güncelleme : Beta dışı. Proje yapısı biraz değişti, çoğu durumda ve açısal cli kullanıyorsanız, src/app/klasörde çalışacaksınız
. Bir başlangıç projesinde aşağıdakilere sahip olacaksınız.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : CSS dosyasına özgü kullanmanız gerekircomponent.html
app.component.html : Bir görünüm (app.component.js'de bildirilen değişken)
app.component.spec.ts : test için kullanılırapp.component.ts
app.component.ts : Bağlanan kodunuzapp.component.html
app.module.ts : Bu, uygulamanızı başlatan ve tüm eklentileri, bileşenleri, hizmetleri, vb tanımladığınız budur. Bu app.jsAçısal 1
Proje dosyalarını tanımlamak veya vermek için kullanılan index.ts
Ek bilgi:
Profesyonel ipucu: ng generate [option] [name]yeni hizmetler, bileşenler, borular vb. Oluşturmak için çalışabilirsiniz .
Ayrıca, tsconfig.jsonprojeniz için TS derleme kurallarını tanımladığı için dosya önemlidir.
Tamamen yeni bir dil öğrenmek zorunda olduğumu düşünüyorsan ? ... Ah ... tür, TypeScript JavaScript'in bir üst kümesidir. Gözünüzü korkutmayın; gelişiminizi kolaylaştırmak için orada. Sadece birkaç saat sonra onunla iyi bir kavrayış vardı ve 3 gün sonra hepsini vardı gibi hissettim.
- HTML'nize, Açısal 1 yönergesinde olduğu gibi benzer şekilde bağlanırsınız. Çok değişken
$scopeve $rootScopekullanımdan kaldırıldı.
Bunu ima etmiş olabilirsiniz. Açısal 2 hala bir MV * 'dir ancak kodu şablonlarınıza bağlamak için ' bileşenler'i kullanacaksınız, örneğin aşağıdakileri yapın
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Bu importifadeyi bir v1 denetleyicisindeki bağımlılık enjeksiyonunuz olarak düşünün . Sen kullanmak importiçin içe nerede paketinizi import {Component}bir yapım olacak diyor componentaşağıdaki konularda bağlamak istiyorum HTML.
@ComponentBir selectorve sahip dekoratör dikkat edin template. İşte düşünmek selectorsizin bizim gibi $scopesiz v1 kullanmak gibi kullandığınız bu directivesismi nerede selectorsen şöyle HTML'nize bağlama için kullandığınız
<my-app> </my-app>
<my-app>Şablonunuzda bildirilenler için yer tutucu görevi görecek, kullanacağınız özel etiketinizin adı nerede . ie) <h1> Hello World! </h1>. Oysa bu v1'de aşağıdaki gibi görünecektir:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
Ayrıca, aşağıdaki gibi bir yükleme mesajı oluşturmak için bu etiketler arasına bir şey ekleyebilirsiniz:
<my-app> Loading... </my-app>
Ardından yükleme mesajı olarak " Yükleniyor ... " mesajı görüntülenir.
Bildirilenlerin , etiketinizde templatekullanacağınız yol veya ham HTML olduğunu HTMLunutmayın selector.
Açısal 1'in daha eksiksiz bir uygulaması daha çok şöyle görünecektir:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
V1'de bu şöyle görünecektir
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
V2 ile ilgili gerçekten sevdiğim şey bu. Direktifin v1'de benim için dik bir öğrenme eğrisi olduğunu buldum ve anladım bile, sık sık istediğim gibi CSSdeğil. Bunun daha basit olduğunu düşünüyorum.
V2, uygulamanızın daha kolay ölçeklenebilirliğine izin verir, çünkü uygulamanızı v1'de olduğundan daha kolay bölebilirsiniz. Açısal v1'de birkaç tane yerine tüm çalışma parçalarınızı tek bir dosyada tutabileceğiniz için bu yaklaşımı seviyorum.
Projenizi v1'den v2'ye dönüştürmeye ne dersiniz?
Eğer v1 projenizi v2'ye güncellemek isterseniz geliştirme ekibinden duyduğumdan, kullanımdan kaldırılmış blokları silip silip $scopes ile değiştireceksiniz selector. Bu videoyu faydalı buldum. Bazı iyonik ekibin açısal ekibi ile yan yana çalışan bazı v2 ile mobil https://youtu.be/OZg4M_nWuIk Umarım bu yardımcı olur.
GÜNCELLEME: Angular 2'nin resmi uygulamaları ortaya çıktıkça örnekler ekleyerek güncelledim.
GÜNCELLEME 2: Bu hala popüler bir soru gibi görünüyor, bu yüzden açısal 2 ile çalışmaya başladığımda çok yararlı bulduğum bazı kaynakları düşündüm.
Yardımcı Kaynaklar:
ES6 hakkında daha fazla bilgi için Yeni Boston'un ECMAScript 6 / ES6 Yeni Özellikler Eğiticilerine göz atmanızı öneririm - YouTube Oynatma Listesi
Typcript fonksiyonları yazmak ve Javascript için nasıl derlendiğini görmek için Typcript dilini kontrol edin
Eğik 1 denklik içinde ne işlevi parçalanmasıyla bir işlev görmek için Açısal 2 bkz Cookbook -A1 A2 Hızlı Başvuru - Angular.io