Bugün uygulama geliştirme şeklimiz, geliştirmelerin karmaşıklığını önemli ölçüde azalttı ve ilk başta biraz karmaşık görünebilecek yeni teknolojileri içermesine rağmen, aslında sadece daha iyi uygulamalar oluşturmaya değil, aynı zamanda mevcut kullanılabilirlik gereksinimlerine uyarlanmaya da yardımcı oluyorlar.
Kullanabileceğimiz bu teknolojilerden biri, AngularJSbir MVW çerçevesi olan (Model-Görünüm-Her neyse) sizin için Model-Görünüm-Her ne işe yararsa-olarak tercüme edilir, JavaScript'e dayanır ve belgelerimizi sağlamamıza izin verir. HTML dinamik işlevselliğin statik özellikleri ve bağlamalar çerçevenin kendi direktiflerini kullanarak HTML'mize veri enjekte etmek.
Açısal oldukça iyi çalışıyor, ancak yeni bir yinelememiz var ve çerçevenin işlevselliğini çok daha fazla genişletmeye izin veriyor, sonra nasıl kullanmaya başlayacağımıza bakalım. Sadece 10 dakikada açısal 2.
1. TypeScript ve Angular 2'yi Alma
Bu uygulamayı gerçekleştirmek için mümkün olan en uygun şekilde çalışacağız, bunun için kullanacağız daktilo işlevselliğini genişletmeye izin veren bir dildir. JavaScript sınıfları ve nesneleri kullanmaya odaklanmak için.
çok almak için TypeScript Ne açısal 2 sahip olmamız gerekli Node.js, ayrıca bilgisayarımızdaki paket yöneticisinin yanı sıra, hala elimizde yoksa, bir göz atabilirsiniz. Node.js ile ilk adımlar bu eğitimde.
bir kez sahip olduğumuz Node.js ve paket yöneticisi NPM ihtiyacımız olanı almak için komutları çalıştırabiliriz:
npm kurulumu -g tsd@^0.6.0 tsd açısal2 kurulumu es6-promise rx rx-liteEk olarak derleyiciyi kurmalıyız TypeScript tarayıcı .ts dosyalarını tanımadığından:
npm install -g typescript@^1.5.0-betaÇalıştırıldıktan sonra, modüllerin, derleyicinin ve çerçeve kitaplıklarının kurulumunu konsol tarafından görmeliyiz.
BÜYÜT
Son olarak, uygulamamızı profesyonel bir şekilde çalıştırmak için sadece yerel bir sunucu kurmamız gerekiyor, bunun için konsolumuzda ve NPM aracılığıyla aşağıdakileri yapıyoruz:
npm install -g http sunucusu
2. Uygulamamızı oluşturma
Uygulamamızın çalışması için gereken her şeye sahip olduğumuzda, proje dosyalarının olacağı bir klasör oluşturuyoruz, onu arayabiliriz. açısal10dk, ve içeride adında bir dosya oluşturacağız. uygulama.ts ve bizim her zamanki index.html.
Yapacağımız ilk şey, application.ts dosyamıza sınıfları ve bileşenleri eklemek, bunun için yapmamız gereken ilk şey import etmek. açısal 2 aşağıdaki gibi:
'angular2 / angular2' öğesinden {Component, View, bootstrap} içe aktarın;Derleyicimizin çalışmasının Projemizin klasöründe olduğunu doğrulamak için aşağıdakileri uygulayacağız:
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.tsDerlemenin başarıyla tamamlandığını ve dosyada değişiklik beklediğini konsoldan almamız gerekiyor, bunun nedeni -watch parametresini kullanmamız.
BÜYÜT
Şimdi, bildireceğimiz bileşenimizi oluşturuyoruz. seçici HTML kodumuzda kullanacağımız görünümün yanı sıra, değişiklikleri enjekte edeceğimiz şablonu ekleyeceğimiz yer.
@Component ({selector: 'my-app'}) @View ({şablon: ''})Derleyicimiz değişiklikleri izlediğinden ve bazılarını eklediğimizden, konsolumuzda bazı etkinlikler görmemiz normaldir.
Şimdi sadece sınıfımızın bildirimini yapmamız ve daha sonra görünümde boşaltılacak olan yapıcı içindeki nesneleri başlatmamız gerekiyor. Son olarak sayfamızdaki bileşenleri render etmekle görevli olacak bootstrap() fonksiyonunu kullanıyoruz.
class myComponent {isim: string; yapıcı () {this.name = 'Jonathan'; }} önyükleme (myComponent);TypeScript kodumuzu zaten bitirdik ve eğer klasörümüzü kontrol edersek, .ts derlememizin sonucu olan bir JavaScript'e sahip olmalıyız.
BÜYÜT
3. HTML'yi Oluşturma
Son olarak, inşa etmeliyiz HTML, gerekli ithalatları gerçekleştirin ve .ts dosyamıza bildirdiğimiz seçicileri dahil edin, bunun için sistem.jsgerçekleştirmemizi sağlayacak olan içe aktarmak dosyamızın HTML içeriğini görelim:
10 dakikada açısal 2Bu yapıldıktan sonra sadece sunucumuzu çalıştırmamız ve uygulamamızı çalıştırmamız gerekiyor, bunun için derleyiciyi durdurup sunucuyu aşağıdaki komutla çalıştırıyoruz:
http sunucusuBu, içinde bir sunucu kuracak yerel ana bilgisayar: 8080 ve uygulamamıza erişmemize izin verecek.
Dosyamızda tanımlanan verileri göreceğiz TypeScript uygulamamıza enjekte edilenler, bu şekilde uygulamamızın mantığını ayırıyoruz ve sadece oluşturduğumuz seçicileri işleyen temiz bir HTML belgesine sahip olabiliyoruz. açısal 2, bize mümkün olan en az çabayı kullanarak daha optimum ve verimli çalışan bir uygulama veriyor.
