หลายเดือนก่อนฉันตัดสินใจเรียนเชิงมุม เมื่อฉันทำการล่วงหน้าและสร้างแอพที่ใช้มันฉันรู้ว่า Angular 2 อยู่ในหน้าตัวอย่างของนักพัฒนาดังนั้นจึงเป็นเรื่องของเวลาก่อนที่จะเปิดตัว เนื่องจาก Angular 2 จะไม่เข้ากันได้กับ Angular 1 และมีการเปลี่ยนแปลงมากมายคำถามคือจะดีกว่าหรือไม่ที่จะพัฒนาต่อไปด้วย Angular 1.x หรือเริ่มพัฒนา Angular 2

มันเป็นความจริงที่ว่าเราไม่จำเป็นต้องใช้เวอร์ชั่นล่าสุดหรือภาษาใหม่ล่าสุดในตลาดเสมอไป แต่ในกรณีนี้แอพยังมีขนาดเล็กดังนั้นฉันสามารถเปลี่ยนแปลงได้โดยไม่มีปัญหา

ให้ฉันนำหน้าด้วยการพูดว่าฉันถือว่าคุณและทุกคนที่จะอ่านสิ่งนี้มีความสะดวกสบายกับ Angular 1 ( ตอนนี้เรียกว่าAngularJSซึ่งตรงกันข้ามกับAngularสำหรับรุ่นที่ใหม่กว่า) ที่ถูกกล่าวว่าลองมาเพิ่มเติมและความแตกต่างที่สำคัญใน Angular 2+

1. cliพวกเขาเพิ่มเชิงมุม

ng new [app name]คุณสามารถเริ่มต้นโครงการใหม่โดยการทำงาน คุณสามารถให้บริการโครงการของคุณโดยเรียกใช้ng serve เรียนรู้เพิ่มเติมที่นี่: https://github.com/angular/angular-cli

2. รหัสเชิงมุมของคุณเขียนใน ES6 Typescript และคอมไพล์ในรันไทม์ถึง Javascript ในเบราว์เซอร์

เพื่อให้เข้าใจอย่างถ่องแท้ในเรื่องนี้ฉันแนะนำให้ตรวจสอบรายการทรัพยากรที่ฉันมีที่ด้านล่างของคำตอบ

3. โครงสร้างโครงการ

ในโครงสร้างพื้นฐานคุณจะมีapp/tsโฟลเดอร์ที่คุณจะทำงานส่วนใหญ่และ a app/jsคุณจะพบในapp/jsไฟล์โฟลเดอร์ที่มี.js.mapนามสกุล พวกเขา "แมป" ไฟล์ ".ts" ของคุณไปยังเบราว์เซอร์ของคุณเพื่อทำการดีบั๊กเนื่องจากเบราว์เซอร์ของคุณไม่สามารถอ่าน typescript ดั้งเดิม

อัปเดต : เป็นรุ่นเบต้า โครงสร้างโครงการเปลี่ยนไปเล็กน้อยในกรณีส่วนใหญ่และหากคุณใช้แองกูลาร์ไคลแอนคุณจะทำงานใน src/app/โฟลเดอร์ ในโครงการเริ่มต้นคุณจะมีดังต่อไปนี้

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css : ไฟล์ CSS ที่คุณควรใช้เฉพาะกับcomponent.html

app.component.html : มุมมอง (ตัวแปรที่ประกาศใน app.component.js)

app.component.spec.ts : ใช้สำหรับการทดสอบapp.component.ts

app.component.ts : รหัสของคุณที่ผูกกับapp.component.html

app.module.ts : นี่คือสิ่งที่จะช่วยปิดแอพของคุณและที่ซึ่งคุณจะกำหนดปลั๊กอินส่วนประกอบบริการและอื่น ๆ ทั้งหมดนี่คือสิ่งที่เทียบเท่ากับapp.jsในแองกูลาร์ 1

index.tsใช้เพื่อกำหนดหรือส่งออกไฟล์โครงการ

ข้อมูลเพิ่มเติม:
เคล็ดลับสำหรับมืออาชีพ: คุณสามารถเรียกใช้ng generate [option] [name]เพื่อสร้างบริการใหม่ส่วนประกอบท่อ ฯลฯ

นอกจากนี้ยังมีtsconfig.jsonไฟล์เป็นสิ่งสำคัญที่จะกำหนดกฎรวบรวม TS สำหรับโครงการของคุณ

หากคุณคิดว่าฉันต้องเรียนรู้ภาษาใหม่ทั้งหมด? ... เอ่อ ... TypeScript เป็นส่วนเสริมของ JavaScript อย่าถูกข่มขู่ มีไว้เพื่อให้การพัฒนาของคุณง่ายขึ้น ฉันรู้สึกว่าฉันมีความเข้าใจที่ดีกับมันหลังจากเพียงไม่กี่ชั่วโมงเล่นกับมันและมีมันลงหลังจาก 3 วัน

4. คุณผูก HTML ของคุณคล้ายกับวิธีที่คุณทำหากในคำสั่ง Angular 1 ดังนั้นตัวแปรที่ชอบ$scopeและ$rootScopeเลิกใช้แล้ว

สิ่งนี้คุณอาจถูกบอกเป็นนัย Angular 2 ยังคงเป็นMV *แต่คุณจะใช้ ' components ' เป็นวิธีในการผูกโค้ดกับเทมเพลตของคุณเช่นทำสิ่งต่อไปนี้

    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}

ที่นี่คิดว่าimportคำสั่งเป็นการฉีดพึ่งพาของคุณในตัวควบคุม v1 คุณสามารถใช้importเพื่อนำเข้าแพคเกจของคุณที่import {Component}บอกว่าคุณจะทำให้คุณต้องการที่จะผูกกับคุณcomponentHTML

สังเกต@Componentมัณฑนากรคุณมีและselector templateต่อไปนี้selectorเป็นวิธีการ$scopeที่คุณใช้เช่นเดียวกับคุณใช้ v1 directivesโดยที่ชื่อของselectorมันคือสิ่งที่คุณใช้ผูก HTML ของคุณ

<my-app> </my-app>

ในกรณีที่<my-app>เป็นชื่อของแท็กของคุณเองที่คุณจะใช้ที่จะทำหน้าที่เป็นตัวยึดสำหรับสิ่งที่ประกาศในแม่แบบของคุณ <h1> Hello World! </h1>IE) โดยที่นี่จะมีลักษณะดังต่อไปนี้ใน v1:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

นอกจากนี้คุณสามารถเพิ่มบางสิ่งระหว่างแท็กเหล่านี้เพื่อสร้างข้อความโหลดเช่นนี้:

<my-app> Loading... </my-app> 

จากนั้นจะแสดง " กำลังโหลด ... " เป็นข้อความโหลด

โปรดทราบว่าสิ่งที่ประกาศในtemplateคือเส้นทางหรือ HTML ดิบที่คุณจะใช้ในแท็กHTMLของคุณselector

การติดตั้งแบบเต็มของ Angular 1 จะมีลักษณะเช่นนี้:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

ใน v1 นี่จะดูเหมือนอะไร

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

นี่คือสิ่งที่ฉันชอบเกี่ยวกับ v2 ฉันพบว่าแนวทางเป็นเส้นโค้งการเรียนรู้ที่สูงชันสำหรับฉันใน v1 และแม้กระทั่งเมื่อฉันรู้ว่าพวกเขาพบว่าฉันมักจะมีการCSSแสดงผลไม่ได้ว่าฉันตั้งใจ ฉันพบว่าวิธีนี้ง่ายกว่า

V2 ช่วยให้การปรับขนาดแอพของคุณง่ายขึ้นเนื่องจากคุณสามารถแยกแอพของคุณได้ง่ายกว่าที่คุณทำใน v1 ฉันชอบวิธีการนี้เนื่องจากคุณสามารถมีส่วนการทำงานทั้งหมดของคุณในไฟล์เดียวซึ่งต่างกับการมีหลายส่วนในเชิงมุม v1

สิ่งที่เกี่ยวกับการแปลงโครงการของคุณจาก v1 เป็น v2

จากสิ่งที่ผมเคยได้ยินจากทีมพัฒนาหากคุณต้องการที่จะปรับปรุงโครงการ v1 v2 ของคุณเพื่อคุณจะเพียงแค่จะผ่านและการลบ blobs เลิกและแทนที่คุณ$scopes กับselectors ฉันพบว่าวิดีโอนี้มีประโยชน์ มันอยู่กับทีม Ionic บางตัวที่ทำงานเคียงข้างกับทีมเชิงมุมเนื่องจาก v2 ให้ความสำคัญกับมือถือมากขึ้นhttps://youtu.be/OZg4M_nWuIkหวังว่าสิ่งนี้จะช่วยได้

อัปเดต:ฉันอัปเดตโดยการเพิ่มตัวอย่างเนื่องจากการใช้งานอย่างเป็นทางการของ Angular 2 ได้ปรากฏ

UPDATE 2:นี่ยังเป็นคำถามยอดนิยมดังนั้นฉันคิดว่าฉันมีทรัพยากรบางอย่างที่ฉันพบว่ามีประโยชน์มากเมื่อฉันเริ่มทำงานกับ angular 2

ทรัพยากรที่มีประโยชน์:

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ ES6 ฉันขอแนะนำให้ตรวจสอบบทเรียนใหม่เกี่ยวกับECMAScript 6 / ES6ของ New Boston - YouTube Playlist

เพื่อเขียนฟังก์ชั่น typescript และดูว่าพวกเขารวบรวมไปยังจาวาสคริปต์ได้อย่างไรตรวจสอบภาษาสนามเด็กเล่น typescript

เมื่อต้องการดูฟังก์ชันโดยฟังก์ชันแยกย่อยของสิ่งที่ค่า Angular 1 สมมูลใน Angular 2 ให้ดูAngular.io - Cookbook -A1 A2 การอ้างอิงด่วน

มันอาจช่วยให้คุณเข้าใจการเปรียบเทียบ Angular 1 กับ Angular 2

The Angular 2 พิสูจน์แล้วว่ามีประโยชน์มากมายเหนือ Angular 1:

• มันเป็นส่วนประกอบทั้งหมด
• ตรวจจับการเปลี่ยนแปลงที่ดีขึ้น
• การรวบรวมเวลาล่วงหน้า (AOT) ช่วยเพิ่มความเร็วในการเรนเดอร์
• TypeScript ใช้สำหรับการพัฒนาแอพพลิเคชั่น Angular 2 เป็นหลัก
• Angular 2 มีประสิทธิภาพที่ดีกว่า Angular 1
• Angular 2 มีระบบ templating ที่ทรงพลังกว่า Angular 1
• Angular 2 มี API ที่ง่ายกว่าการโหลดแบบขี้เกียจการดีบักได้ง่ายขึ้น
• Angular 2 สามารถทดสอบได้มากกว่า Angular 1
• Angular 2 ให้ส่วนประกอบที่ซ้อนกัน
• Angular 2 เป็นวิธีการดำเนินการมากกว่าสองระบบเข้าด้วยกัน
• และอื่น ๆ ...

Angular 2 และ Angular 1 นั้นเป็นเฟรมเวิร์กต่างกันที่มีชื่อเดียวกัน

angular 2 พร้อมสำหรับสถานะปัจจุบันของมาตรฐานเว็บและสถานะในอนาคตของเว็บ (ES6 \ 7, ความไม่สมบูรณ์, ส่วนประกอบ, เงา DOM, พนักงานบริการ, ความเข้ากันได้กับมือถือ, โมดูล, ตัวพิมพ์และอื่น ๆ ... )

angular 2 ฆ่าคุณสมบัติหลักมากมายในเชิงมุม 1 เช่น - คอนโทรลเลอร์, $ scope, directives (แทนที่ด้วยคำอธิบายประกอบ @component), การกำหนดโมดูลและอื่น ๆ อีกมากมายแม้แต่สิ่งที่เรียบง่ายเช่น ng-repeat ไม่เหมือนเดิม

ไม่ว่าจะด้วยวิธีใดการเปลี่ยนแปลงก็ดีแองกูลาร์ 1.x มีข้อบกพร่องและแองกูลาร์ 2 ก็พร้อมสำหรับความต้องการของเว็บในอนาคต

เพื่อสรุปสิ่งต่าง ๆ - ฉันไม่แนะนำให้คุณเริ่มโปรเจกต์แองกูลาร์ 1.x ตอนนี้ - นี่อาจเป็นเวลาที่เลวร้ายที่สุดในการทำเช่นนี้เนื่องจากคุณจะต้องย้ายในภายหลังไปที่แองกูลาร์ 2 2, google ได้เปิดตัวโปรเจ็กต์ที่มีมุม 2 และเมื่อคุณทำโปรเจค 2 เสร็จแล้วควรจะอยู่ในสปอตไลท์ หากคุณต้องการตัว stabler คุณสามารถคิดถึง react \ elm และ flux และ redux เป็นเฟรมเวิร์กของ JS

angular 2 จะยอดเยี่ยมนั่นไม่ต้องสงสัยเลย

ไม่มีกรอบสมบูรณ์ คุณสามารถอ่านเกี่ยวกับข้อบกพร่องในเชิงมุม 1 ที่นี่และที่นี่ แต่นั่นไม่ได้หมายความว่ามันไม่ดี คำถามคือสิ่งที่คุณกำลังแก้ปัญหา ถ้าคุณต้องการที่จะเปิดตัวแอปง่าย ๆ อย่างรวดเร็วซึ่งมีน้ำหนักเบาด้วยการ จำกัดการใช้ข้อมูลที่ จำกัดแล้วไปข้างหน้ากับ Angular 1 Angular 1 ถูกสร้างขึ้น 6 ปีย้อนกลับเพื่อแก้ปัญหาการสร้างต้นแบบที่รวดเร็วซึ่งทำได้ค่อนข้างดี แม้ว่ากรณีการใช้งานของคุณจะซับซ้อน แต่คุณก็สามารถใช้ Angular 1 ได้ แต่คุณควรตระหนักถึงความแตกต่างและแนวปฏิบัติที่เหมาะสมที่สุดในการสร้างแอปพลิเคชันเว็บที่ซับซ้อน หากคุณกำลังพัฒนาแอพเพื่อการเรียนรู้ฉันขอแนะนำให้ย้ายไปที่ Angular 2 เนื่องจากเป็นที่ที่อนาคตของ Angular เป็น

คุณสมบัติโดดเด่นอย่างหนึ่งใน Angular v2 และใน ReactJs ก็คือพวกเขาทั้งสองได้นำเอาสถาปัตยกรรม Web-Components ใหม่ของการพัฒนามาใช้ สิ่งนี้หมายความว่าตอนนี้เราสามารถสร้างส่วนประกอบของเว็บที่เป็นอิสระและ plug-and-play ให้กับเว็บไซต์ใด ๆ ในโลกที่มีเทคโนโลยีสแต็คเดียวกันของ Web-Component นี้ เย็น! ใช่เจ๋งมาก :)

การเปลี่ยนแปลงที่โดดเด่นที่สุดอื่น ๆ ใน Angular v2 คือภาษาของการพัฒนาหลักไม่ใช่ TypeScript แม้ว่า TypeScript จะเป็นของ Microsoft แต่มันก็เป็น superset ของ JavaScript ของปี 2015 (หรือ ECMAScript6 / ES6) แต่ก็มีคุณสมบัติบางอย่างที่มีแนวโน้มมาก ฉันอยากจะแนะนำให้ผู้อ่านเช็คเอาต์ TypeScript ในรายละเอียดเล็กน้อย (ซึ่งสนุกแน่นอน) หลังจากอ่านบทช่วยสอนนี้

ที่นี่ฉันจะบอกว่าพวกที่พยายามเชื่อมโยง Angular v1 และ Angular v2 ทำให้ผู้อ่านสับสนมากขึ้นและในความเห็นต่ำต้อยของฉัน Angular v1 และ Angular v2 ควรได้รับการปฏิบัติเป็นสองกรอบที่แตกต่างกัน ใน Angular v2 เรามีแนวคิดของ Web-Components ในการพัฒนาเว็บแอปพลิเคชันในขณะที่ Angular v1 เราต้องเล่นกับ Controllers และ (เศร้าหรือโชคดี) ไม่มีคอนโทรลเลอร์ใน Angular v2

สิ่งหนึ่งที่ควรสังเกตคือ angular2 กำลังใช้ typescript

ฉันทำ angular1 กับ cordova ในฝึกงานของฉันและตอนนี้ฉันกำลังทำ angular 2 ฉันคิดว่า angular2 จะเป็นแนวโน้มที่มีโครงสร้างมากกว่าในความคิดของฉัน แต่ข้อเสียคือมีทรัพยากรน้อยมากที่จะอ้างถึงเมื่อคุณมีปัญหาหรือปัญหา angular 1.x มีคำสั่งส่วนบุคคลมากมายที่สามารถใช้งานได้ง่ายสุด ๆ

หวังว่ามันจะช่วย

Angular 2 นั้นดีกว่า 1 อย่างน้อยในสิ่งที่มี: การสนับสนุนสำหรับส่วนประกอบของเว็บการใช้ typescript ประสิทธิภาพและความเรียบง่ายโดยรวมของอินเทอร์เฟซคือเหตุผลที่ฉันตัดสินใจเริ่มโครงการโดยใช้ angular 2 อย่างไรก็ตามจากการเริ่มต้น ฉันรู้ว่ามีปัญหาในเชิงมุม 2 (เช่นการกำหนดเส้นทางด้วย apache) ซึ่งมีเอกสารน้อยมากหรือไม่มีเลยดังนั้นเอกสารและชุมชนของเชิงมุม 2 จึงเป็นข้อผิดพลาดที่ใหญ่ที่สุดสำหรับเชิงมุม 2 เนื่องจากไม่ได้พัฒนาเพียงพอ

ฉันจะบอกว่าถ้าคุณต้องการเพิ่มเว็บไซต์อย่างรวดเร็วเพื่อกำหนดเส้นตายสั้น ๆ ให้ใช้มุมที่รู้จักกันดี 1 ถ้าคุณอยู่ในโครงการที่ยาวขึ้นและสามารถให้เวลาในการตรวจสอบปัญหาใหม่ (ซึ่งคุณอาจเป็นคนแรกที่พบ ซึ่งอาจเป็นโบนัสถ้าคุณนึกถึงการบริจาคคุณอาจมอบให้กับชุมชนเชิงมุม 2) มากกว่าไปกับชุมชนเชิงมุม 2