สมมติว่าฉันคุ้นเคยกับการพัฒนาโปรแกรมประยุกต์ฝั่งไคลเอ็นต์ในjQueryแต่ตอนนี้ผมอยากจะเริ่มต้นใช้AngularJS คุณสามารถอธิบายการเปลี่ยนกระบวนทัศน์ที่จำเป็นได้หรือไม่? ต่อไปนี้เป็นคำถามสองสามข้อที่อาจช่วยคุณกำหนดกรอบคำตอบ:

• ฉันจะออกแบบและออกแบบเว็บแอปพลิเคชันฝั่งไคลเอ็นต์ได้อย่างไร ความแตกต่างที่ใหญ่ที่สุดคืออะไร?
• ฉันควรหยุดทำอะไร / ใช้ ฉันควรเริ่มทำ / ใช้อะไรแทน
• มีข้อควรพิจารณา / ข้อ จำกัด ด้านเซิร์ฟเวอร์หรือไม่?

ผมไม่ได้มองหาการเปรียบเทียบรายละเอียดระหว่างและjQueryAngularJS

1. อย่าออกแบบหน้าของคุณแล้วเปลี่ยนด้วยDOM manipulations

ใน jQuery คุณออกแบบหน้าแล้วทำให้หน้านั้นเป็นแบบไดนามิก นี่เป็นเพราะ jQuery ได้รับการออกแบบเพื่อเพิ่มและเติบโตอย่างเหลือเชื่อจากหลักฐานง่าย ๆ

แต่ใน AngularJS คุณจะต้องเริ่มจากพื้นดินโดยคำนึงถึงสถาปัตยกรรมของคุณเป็นหลัก แทนที่จะเริ่มจากคิดว่า "ฉันมี DOM ชิ้นนี้แล้วและฉันต้องการทำให้มันเป็น X" คุณต้องเริ่มจากสิ่งที่คุณต้องการทำให้สำเร็จจากนั้นไปที่การออกแบบแอปพลิเคชันของคุณและจากนั้นก็ออกแบบมุมมองของคุณ

2. อย่าเพิ่ม jQuery ด้วย AngularJS

อย่าเริ่มด้วยความคิดที่ว่า jQuery ทำ X, Y และ Z ดังนั้นฉันจะเพิ่ม AngularJS ไว้บนสุดสำหรับโมเดลและคอนโทรลเลอร์ นี่เป็นสิ่งที่ดึงดูดใจจริงๆเมื่อคุณเพิ่งเริ่มต้นซึ่งเป็นเหตุผลที่ฉันแนะนำเสมอว่านักพัฒนา AngularJS ใหม่จะไม่ใช้ jQuery เลยอย่างน้อยก็จนกว่าพวกเขาจะคุ้นเคยกับการทำสิ่งต่าง ๆ ในแบบ "เชิงมุม"

ฉันได้เห็นนักพัฒนาหลายคนที่นี่และในรายชื่อผู้รับจดหมายสร้างโซลูชันที่ซับซ้อนเหล่านี้ด้วยปลั๊กอิน jQuery 150 หรือ 200 บรรทัดของรหัสที่พวกเขายึดติดกับ AngularJS ด้วยคอลเลกชันของการโทรกลับและ$applys ที่สับสนและซับซ้อน แต่ในที่สุดพวกเขาก็ทำงานได้! ปัญหาคือในกรณีส่วนใหญ่ที่ปลั๊กอิน jQuery สามารถเขียนใหม่ใน AngularJS ในส่วนของรหัสที่ทุกอย่างก็กลายเป็นเข้าใจและตรงไปตรงมา

บรรทัดล่างคือ: เมื่อแก้ปัญหาแรก "คิดใน AngularJS"; หากคุณไม่สามารถคิดวิธีแก้ปัญหาให้ถามชุมชน ถ้าหลังจากทั้งหมดที่ไม่มีการแก้ปัญหาง่ายแล้วรู้สึกอิสระที่จะเข้าถึงสำหรับ jQuery แต่อย่าปล่อยให้ jQuery กลายเป็นไม้ค้ำมิฉะนั้นคุณจะไม่เชี่ยวชาญ AngularJS

3. คิดในแง่ของสถาปัตยกรรมเสมอ

รู้ก่อนว่าการใช้งานหน้าเดียวมีการใช้งาน พวกเขาไม่ใช่หน้าเว็บ ดังนั้นเราต้องคิดเหมือนนักพัฒนาฝั่งเซิร์ฟเวอร์นอกเหนือจากการคิดเหมือนนักพัฒนาฝั่งไคลเอ็นต์ เราต้องคิดเกี่ยวกับวิธีแบ่งแอปพลิเคชันของเราออกเป็นส่วนประกอบส่วนบุคคลที่ขยายได้และทดสอบได้

ดังนั้นแล้ววิธีการที่คุณทำอย่างนั้น? คุณ "คิดใน AngularJS" ได้อย่างไร นี่คือหลักการทั่วไปบางข้อซึ่งเทียบกับ jQuery

มุมมองคือ "บันทึกอย่างเป็นทางการ"

ใน jQuery เราเปลี่ยนมุมมองโดยทางโปรแกรม เราอาจมีเมนูแบบเลื่อนลงที่กำหนดulเช่น:

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

ใน jQuery ในแอปพลิเคชันตรรกะของเราเราจะเปิดใช้งานด้วยสิ่งที่ชอบ:

$('.main-menu').dropdownMenu();

เมื่อเราดูที่มุมมองไม่เห็นได้ชัดว่ามีฟังก์ชั่นใด ๆ สำหรับแอปพลิเคชั่นขนาดเล็กก็ใช้ได้ แต่สำหรับแอพพลิเคชั่นที่ไม่สำคัญสิ่งต่าง ๆ จะสับสนและยากต่อการบำรุงรักษาอย่างรวดเร็ว

อย่างไรก็ตามใน AngularJS มุมมองเป็นบันทึกอย่างเป็นทางการของฟังก์ชันการทำงานตามมุมมอง ulการประกาศของเราจะมีลักษณะเช่นนี้แทน:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

ทั้งสองทำสิ่งเดียวกัน แต่ใน AngularJS ทุกคนที่ดูเทมเพลตรู้ว่าควรจะเกิดอะไรขึ้น เมื่อใดก็ตามที่มีสมาชิกใหม่ของทีมพัฒนาเข้ามาอยู่บนกระดานเธอสามารถดูสิ่งนี้แล้วรู้ว่ามีคำสั่งที่เรียกว่าdropdownMenuปฏิบัติการอยู่ เธอไม่ต้องการคำตอบที่ถูกต้องหรือกรองผ่านรหัสใด ๆ มุมมองบอกเราว่าควรจะเกิดอะไรขึ้น ทำความสะอาดมาก

นักพัฒนาใหม่สำหรับ AngularJS มักถามคำถามเช่น: ฉันจะค้นหาลิงก์ทั้งหมดของประเภทเฉพาะและเพิ่มคำสั่งลงบนพวกเขาได้อย่างไร นักพัฒนาจะงุนงงอยู่เสมอเมื่อเราตอบกลับ: คุณทำไม่ได้ แต่เหตุผลที่คุณไม่ทำเช่นนี้ก็เพราะ half-jQuery, half-AngularJS และไม่ดี ปัญหาที่นี่คือผู้พัฒนาพยายามที่จะ "ทำ jQuery" ในบริบทของ AngularJS นั่นจะไม่ทำงานได้ดี มุมมองเป็นบันทึกอย่างเป็นทางการ นอกเหนือจากคำสั่ง (เพิ่มเติมด้านล่างนี้) คุณไม่เคยไม่เคยเปลี่ยน DOM และมีการนำแนวทางไปใช้ในมุมมองดังนั้นเจตนาจึงชัดเจน

โปรดจำไว้ว่า: อย่าออกแบบและทำเครื่องหมาย คุณต้องออกแบบและออกแบบ

การผูกข้อมูล

นี่คือหนึ่งในคุณสมบัติที่ยอดเยี่ยมที่สุดของ AngularJS และลดความจำเป็นในการทำ DOM ในประเภทก่อนหน้านี้ AngularJS จะอัปเดตมุมมองของคุณโดยอัตโนมัติเพื่อให้คุณไม่ต้องทำ! ใน jQuery เราตอบสนองต่อเหตุการณ์แล้วอัปเดตเนื้อหา สิ่งที่ต้องการ:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

สำหรับมุมมองที่มีลักษณะดังนี้:

<ul class="messages" id="log">
</ul>

นอกเหนือจากความกังวลผสมเรายังมีปัญหาเดียวกันของการแสดงเจตนาที่ฉันกล่าวก่อน แต่ที่สำคัญกว่านั้นเราต้องอ้างอิงและอัปเดตโหนด DOM ด้วยตนเอง และถ้าเราต้องการลบรายการบันทึกเราจะต้องใช้รหัสกับ DOM สำหรับสิ่งนั้นด้วย เราจะทดสอบตรรกะนอกเหนือจาก DOM ได้อย่างไร แล้วถ้าเราต้องการเปลี่ยนงานนำเสนอล่ะ

นี่เป็นเรื่องยุ่งและเรื่องเล็ก ๆ น้อย ๆ แต่ใน AngularJS เราสามารถทำได้:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

และมุมมองของเราสามารถมีลักษณะเช่นนี้:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

แต่สำหรับเรื่องนั้นมุมมองของเราอาจมีลักษณะเช่นนี้:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

และตอนนี้แทนที่จะใช้รายการที่ไม่ได้เรียงลำดับเรากำลังใช้กล่องการแจ้งเตือน Bootstrap และเราไม่เคยเปลี่ยนรหัสคอนโทรลเลอร์! แต่ที่สำคัญกว่าไม่ว่าที่หรือวิธีการเข้าสู่ระบบได้รับการปรับปรุงมุมมองจะเปลี่ยนเกินไป อัตโนมัติ เรียบร้อย!

แม้ว่าฉันจะไม่ได้แสดงไว้ที่นี่ แต่การผูกข้อมูลเป็นแบบสองทาง <input ng-model="entry.msg" />ดังนั้นบันทึกข้อความนอกจากนี้ยังอาจจะสามารถแก้ไขได้ในมุมมองเพียงแค่การทำเช่นนี้: และมีความยินดีอย่างมาก

เลเยอร์โมเดลที่แตกต่าง

ใน jQuery DOM นั้นเป็นเหมือนโมเดล แต่ใน AngularJS เรามีเลเยอร์โมเดลแยกต่างหากที่เราสามารถจัดการได้ทุกอย่างที่เราต้องการโดยอิสระจากมุมมอง สิ่งนี้จะช่วยให้การเชื่อมโยงข้อมูลข้างต้นรักษาความกังวลและแนะนำการทดสอบได้ดียิ่งขึ้น คำตอบอื่น ๆ ที่กล่าวถึงประเด็นนี้ดังนั้นฉันจะทิ้งมันไว้อย่างนั้น

แยกความกังวล

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

ฉีดพึ่งพา

เพื่อช่วยให้เราแยกออกจากความกังวลคือการฉีดพึ่งพา (DI) ถ้าคุณมาจากภาษาฝั่งเซิร์ฟเวอร์ (จากJavaถึงPHP ) คุณอาจคุ้นเคยกับแนวคิดนี้อยู่แล้ว แต่ถ้าคุณเป็นคนฝั่งไคลเอ็นต์ที่มาจาก jQuery แนวคิดนี้สามารถดูเหมือนอะไรก็ได้ตั้งแต่โง่ไปถึงฟุ่มเฟือยถึงทันสมัย . แต่มันไม่ใช่ :-)

จากมุมมองที่กว้าง DI หมายความว่าคุณสามารถประกาศองค์ประกอบได้อย่างอิสระและจากองค์ประกอบอื่นใด ๆ เพียงแค่ขอตัวอย่างของมันและมันจะได้รับ คุณไม่จำเป็นต้องรู้เกี่ยวกับการโหลดคำสั่งหรือตำแหน่งไฟล์หรืออะไรทำนองนั้น พลังอาจไม่สามารถมองเห็นได้ในทันที แต่ฉันจะยกตัวอย่างเพียงตัวอย่างเดียว: การทดสอบ

สมมติว่าในแอปพลิเคชันของเราเราต้องการบริการที่ใช้พื้นที่เก็บข้อมูลฝั่งเซิร์ฟเวอร์ผ่านREST API และขึ้นอยู่กับสถานะของแอปพลิเคชันพื้นที่จัดเก็บในตัวเครื่องเช่นกัน เมื่อเรียกใช้การทดสอบกับคอนโทรลเลอร์ของเราเราไม่ต้องการสื่อสารกับเซิร์ฟเวอร์ - เรากำลังทดสอบคอนโทรลเลอร์หลังจากทั้งหมด เราสามารถเพิ่มบริการจำลองที่มีชื่อเดียวกับส่วนประกอบดั้งเดิมของเราและหัวฉีดจะตรวจสอบให้แน่ใจว่าคอนโทรลเลอร์ของเราได้รับอุปกรณ์ปลอมโดยอัตโนมัติ - คอนโทรลเลอร์ของเราไม่ต้องการและไม่ทราบความแตกต่าง

การพูดของการทดสอบ ...

4. การพัฒนาที่ขับเคลื่อนด้วยการทดสอบ - เสมอ

นี่เป็นส่วนหนึ่งของส่วนที่ 3 ในสถาปัตยกรรมจริงๆ แต่มันสำคัญมากที่ฉันจะต้องวางมันไว้ในส่วนระดับบนสุดของตัวเอง

จากปลั๊กอิน jQuery ทั้งหมดที่คุณเคยเห็นเคยใช้หรือเขียนมีกี่ชุดทดสอบ ไม่มากนักเพราะ jQuery ไม่ได้ตอบสนองต่อสิ่งนั้นมากนัก แต่ AngularJS คือ

ใน jQuery วิธีเดียวในการทดสอบมักจะสร้างส่วนประกอบอย่างอิสระด้วยหน้าตัวอย่าง / ตัวอย่างที่การทดสอบของเราสามารถดำเนินการจัดการ DOM ได้ ดังนั้นแล้วเรามีการพัฒนาส่วนประกอบแยกแล้วรวมไว้ในโปรแกรมของเรา ไม่สะดวกเท่าไหร่! เวลาส่วนใหญ่เมื่อพัฒนาด้วย jQuery เราเลือกทำซ้ำแทนการพัฒนาโดยอาศัยการทดสอบ และใครจะโทษเราได้?

แต่เนื่องจากเรามีข้อกังวลแยกกันเราสามารถทำการพัฒนาที่ขับเคลื่อนด้วยการทดสอบซ้ำใน AngularJS! ตัวอย่างเช่นสมมติว่าเราต้องการคำสั่งที่ง่ายสุด ๆ เพื่อระบุในเมนูของเราว่าเส้นทางปัจจุบันของเราคืออะไร เราสามารถประกาศสิ่งที่เราต้องการในมุมมองของใบสมัครของเรา:

<a href="/hello" when-active>Hello</a>

ตกลงตอนนี้เราสามารถเขียนการทดสอบสำหรับwhen-activeคำสั่งที่ไม่มีอยู่จริง:

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="https://stackoverflow.com/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

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

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

การทดสอบของเราผ่านไปแล้วและเมนูของเราทำงานตามที่ร้องขอ การพัฒนาของเรานั้นมีทั้งการวนซ้ำและการทดสอบ ชั่วร้ายเย็น

5. แนวความคิดคำสั่งจะไม่บรรจุ jQuery

คุณมักจะได้ยินคำว่า "จัดการ DOM เท่านั้นในคำสั่ง" นี่คือความจำเป็น รักษามันด้วยความเคารพ!

แต่ให้ดำน้ำลึกอีกหน่อย ...

คำสั่งบางอย่างเพียงตกแต่งสิ่งที่มีอยู่แล้วในมุมมอง (คิดว่าngClass) และบางครั้งก็ทำการจัดการ DOM ทันทีและโดยทั่วไปแล้วจะทำ แต่ถ้าสั่งเป็นเหมือน "เครื่องมือ" และมีแม่แบบที่มันควรจะยังเคารพแยกของความกังวล นั่นคือเทมเพลตก็ควรจะเป็นอิสระจากการนำไปใช้ในฟังก์ชั่นลิงค์และคอนโทรลเลอร์

AngularJS มาพร้อมกับชุดเครื่องมือทั้งหมดเพื่อให้ง่ายมาก ด้วยngClassเราสามารถปรับปรุงชั้นเรียนแบบไดนามิก; ngModelช่วยให้การผูกข้อมูลแบบสองทาง; ngShowและngHideแสดงหรือซ่อนองค์ประกอบโดยทางโปรแกรม และอีกมากมาย - รวมถึงสิ่งที่เราเขียนเอง กล่าวอีกนัยหนึ่งเราสามารถทำความสุดยอดได้ทุกประเภทโดยไม่ต้องจัดการ DOM การจัดการ DOM น้อยกว่าคำสั่งที่ง่ายขึ้นคือการทดสอบง่ายขึ้นพวกเขามีสไตล์ง่ายขึ้นพวกเขาจะเปลี่ยนได้ง่ายขึ้นในอนาคตและยิ่งใช้งานได้ง่ายขึ้นและสามารถกระจายได้อีก

ฉันเห็นนักพัฒนาจำนวนมากที่เพิ่งรู้จักกับ AngularJS โดยใช้คำสั่งเป็นสถานที่สำหรับโยน jQuery กล่าวอีกนัยหนึ่งพวกเขาคิดว่า "เนื่องจากฉันไม่สามารถจัดการ DOM ในคอนโทรลเลอร์ได้ฉันจะใช้รหัสนั้นในคำสั่ง" ในขณะที่แน่นอนจะดีกว่ามากก็มักจะยังคงไม่ถูกต้อง

ลองนึกถึงคนตัดไม้ที่เราตั้งโปรแกรมไว้ในส่วนที่ 3 แม้ว่าเราจะทำตามคำสั่งเราก็ยังต้องการที่จะทำ "วิธีเชิงมุม" มันยังไม่ใช้การจัดการ DOM ใด ๆ ! ยังมีอีกหลายครั้งเมื่อมีการจัดการ DOM เป็นสิ่งจำเป็น แต่มันเป็นจำนวนมากยากกว่าที่คุณคิด! ก่อนทำการจัดการ DOM ทุกที่ในแอปพลิเคชันของคุณถามตัวเองว่าคุณจำเป็นต้องใช้จริงๆหรือไม่ อาจมีวิธีที่ดีกว่า

นี่คือตัวอย่างย่อที่แสดงรูปแบบที่ฉันเห็นบ่อยที่สุด เราต้องการปุ่มสลับ (หมายเหตุ: ตัวอย่างนี้มีการประดิษฐ์เล็กน้อยและ verbose skosh เพื่อแสดงกรณีที่ซับซ้อนมากขึ้นซึ่งจะได้รับการแก้ไขในลักษณะเดียวกัน)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

มีบางสิ่งผิดปกติกับสิ่งนี้:

1. ครั้งแรก jQuery ไม่จำเป็น ไม่มีอะไรที่เราทำที่นี่ที่ต้องการ jQuery เลย!
2. ประการที่สองแม้ว่าเราจะมี jQuery ในหน้าของเราแล้วก็ไม่มีเหตุผลที่จะใช้ที่นี่ เราสามารถใช้งานได้ง่ายangular.elementและส่วนประกอบของเราจะยังคงทำงานได้เมื่อดร็อปเข้าสู่โครงการที่ไม่มี jQuery
3. ประการที่สามแม้สมมติ jQuery ถูกต้องสำหรับคำสั่งนี้ไปทำงาน jqLite ( angular.element) จะเสมอใช้ jQuery ถ้ามันถูกโหลด! ดังนั้นเราจึงไม่จำเป็นต้องใช้$- angular.elementเราก็สามารถใช้
4. ประการที่สี่การที่เกี่ยวข้องอย่างใกล้ชิดกับที่สามคือการที่องค์ประกอบ jqLite ไม่จำเป็นต้องอยู่ในห่อ$- The elementที่ถูกส่งผ่านไปยังlinkฟังก์ชั่นจะมีอยู่แล้วเป็นองค์ประกอบ jQuery!
5. และข้อที่ห้าซึ่งเราได้กล่าวถึงในส่วนก่อนหน้านี้เหตุใดเราจึงผสมข้อมูลเทมเพลตลงในตรรกะของเรา

คำสั่งนี้สามารถเขียนใหม่ได้ (แม้ในกรณีที่ซับซ้อนมาก!) ก็ทำได้ง่ายกว่ามากเช่น:

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

อีกครั้งสิ่งที่แม่แบบอยู่ในแม่แบบเพื่อให้คุณ (หรือผู้ใช้ของคุณ) สามารถสลับได้อย่างง่ายดายสำหรับสิ่งที่ตรงกับสไตล์ที่จำเป็นใด ๆ และตรรกะที่ไม่เคยได้สัมผัส นำมาใช้ใหม่ - บูม!

และยังมีประโยชน์อื่น ๆ เหล่านั้นทั้งหมดเช่นการทดสอบ - ง่ายมาก! ไม่ว่าจะมีอะไรอยู่ในเทมเพลต API ภายในของ directive จะไม่ถูกแตะต้องดังนั้นการปรับโครงสร้างใหม่จึงเป็นเรื่องง่าย คุณสามารถเปลี่ยนเทมเพลตได้มากเท่าที่คุณต้องการโดยไม่ต้องสัมผัสคำสั่ง และไม่ว่าคุณจะเปลี่ยนแปลงอะไรการทดสอบของคุณก็ยังผ่าน

w00t!

ดังนั้นถ้าคำสั่งไม่ใช่แค่ชุดของฟังก์ชั่นที่เหมือน jQuery พวกมันคืออะไร? Directives เป็นจริงนามสกุลของ HTML หาก HTML ไม่ได้ทำสิ่งที่คุณต้องการให้ทำคุณเขียนคำสั่งให้ทำเพื่อคุณแล้วใช้เหมือนว่ามันเป็นส่วนหนึ่งของ HTML

วางวิธีอื่นถ้า AngularJS ไม่ได้ทำบางสิ่งบางอย่างออกมาจากกล่องคิดว่าทีมจะประสบความสำเร็จได้เพื่อให้พอดีกับสิทธิในngClick, ngClass, et al

สรุป

อย่าใช้แม้แต่ jQuery อย่ารวมไว้ด้วย มันจะรั้งคุณไว้ และเมื่อคุณพบปัญหาที่คุณคิดว่าคุณรู้วิธีแก้ปัญหาใน jQuery แล้วก่อนที่คุณจะไปถึงให้$ลองคิดถึงวิธีการทำภายในขอบเขตของ AngularJS ถ้าคุณไม่รู้ถาม! 19 ครั้งจาก 20 วิธีที่ดีที่สุดในการทำมันไม่จำเป็นต้อง jQuery และพยายามที่จะแก้ปัญหาด้วย jQuery ผลลัพธ์ในการทำงานมากขึ้นสำหรับคุณ

จำเป็น→การประกาศ

ใน jQuery ตัวเลือกจะใช้เพื่อค้นหาองค์ประกอบDOMจากนั้นเชื่อมโยง / ลงทะเบียนตัวจัดการเหตุการณ์ เมื่อเหตุการณ์ทริกเกอร์รหัส (จำเป็น) เรียกใช้งานเพื่อปรับปรุง / เปลี่ยนแปลง DOM

ใน AngularJS คุณต้องการคิดถึงมุมมองมากกว่าองค์ประกอบ DOM มุมมอง (เปิดเผย) HTML มี AngularJS สั่ง คำสั่งตั้งค่าตัวจัดการเหตุการณ์ที่อยู่เบื้องหลังสำหรับเราและให้ข้อมูลแบบไดนามิก ตัวเลือกจะไม่ค่อยถูกใช้ดังนั้นความต้องการ ID (และคลาสบางประเภท) จึงลดลงอย่างมาก จำนวนการดูเชื่อมโยงกับโมเดล (ผ่านขอบเขต) มุมมองเป็นภาพของโมเดล รูปแบบการเปลี่ยนแปลงกิจกรรม (นั่นคือข้อมูลคุณสมบัติขอบเขต) และมุมมองที่คาดการณ์โมเดลเหล่านั้นจะอัปเดต "โดยอัตโนมัติ"

ใน AngularJS ให้คิดถึงโมเดลมากกว่าองค์ประกอบ DOM ที่เลือก jQuery ที่เก็บข้อมูลของคุณ คิดเกี่ยวกับมุมมองเป็นมุมมองของแบบจำลองเหล่านั้นแทนที่จะลงทะเบียนการเรียกกลับเพื่อจัดการสิ่งที่ผู้ใช้เห็น

แยกความกังวล

jQuery ใช้JavaScript ที่ไม่เป็นการรบกวน - พฤติกรรม (JavaScript) ถูกแยกออกจากโครงสร้าง (HTML)

AngularJS ใช้ตัวควบคุมและคำสั่ง (ซึ่งแต่ละอย่างสามารถมีตัวควบคุมของตนเองและ / หรือรวบรวมและฟังก์ชั่นการเชื่อมโยง) เพื่อลบพฤติกรรมจากมุมมอง / โครงสร้าง (HTML) Angular ยังมีบริการและตัวกรองเพื่อช่วยแยก / จัดการแอปพลิเคชันของคุณ

ดูเพิ่มเติมที่https://stackoverflow.com/a/14346528/215945

ออกแบบโปรแกรม

วิธีการหนึ่งในการออกแบบแอปพลิเคชัน AngularJS:

1. คิดถึงโมเดลของคุณ สร้างบริการหรือวัตถุ JavaScript ของคุณเองสำหรับรุ่นเหล่านั้น
2. คิดเกี่ยวกับวิธีที่คุณต้องการนำเสนอโมเดลของคุณ - มุมมองของคุณ สร้างเทมเพลต HTML สำหรับแต่ละมุมมองโดยใช้คำสั่งที่จำเป็นเพื่อรับข้อมูลแบบไดนามิก
3. แนบคอนโทรลเลอร์ไปยังแต่ละมุมมอง (ใช้ ng-view และ routing หรือ ng-controller) ให้คอนโทรลเลอร์ค้นหา / รับเฉพาะข้อมูลโมเดลที่มุมมองต้องการทำงาน ทำให้ตัวควบคุมบางที่สุด

มรดกต้นแบบ

คุณสามารถทำอะไรได้หลายอย่างกับ jQuery โดยไม่ทราบว่าการสืบทอดต้นแบบต้นแบบ JavaScript ทำงานอย่างไร เมื่อพัฒนาแอปพลิเคชัน AngularJS คุณจะหลีกเลี่ยงข้อผิดพลาดบางอย่างหากคุณมีความเข้าใจที่ดีเกี่ยวกับการสืบทอด JavaScript อ่านที่แนะนำ: อะไรคือความแตกต่างของขอบเขตต้นแบบ / มรดกต้นแบบใน AngularJS?

AngularJS กับ jQuery

AngularJS และ jQuery ใช้แนวคิดที่แตกต่างกันมาก หากคุณมาจาก jQuery คุณอาจพบความแตกต่างที่น่าแปลกใจ เชิงมุมอาจทำให้คุณโกรธ

นี่เป็นเรื่องปกติคุณควรผลักดัน เชิงมุมมีค่า

ความแตกต่างใหญ่ (TLDR)

jQuery ให้ชุดเครื่องมือสำหรับคุณในการเลือกบิตของ DOM และทำการเปลี่ยนแปลง Ad-hoc คุณสามารถทำอะไรก็ได้ที่คุณชอบทีละชิ้น

AngularJS แทนที่จะช่วยให้คุณมีคอมไพเลอร์

สิ่งนี้หมายความว่า AngularJS อ่าน DOM ทั้งหมดของคุณจากบนลงล่างและถือว่าเป็นรหัสตามตัวอักษรตามคำแนะนำของคอมไพเลอร์ เมื่อสำรวจผ่าน DOM มันจะมองหาคำสั่งเฉพาะ(คำสั่งคอมไพเลอร์) ที่บอก AngularJS คอมไพเลอร์ว่าจะทำอย่างไร คำสั่งเป็นวัตถุขนาดเล็กที่เต็มไปด้วย JavaScript ซึ่งสามารถจับคู่กับแอตทริบิวต์แท็กคลาสหรือแม้แต่ความคิดเห็น

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

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

ซึ่งหมายความว่าเชิงมุมเป็นเทมเพลต เทมเพลตของคุณขับเคลื่อน JavaScript ไม่ใช่วิธีอื่น นี่คือการย้อนกลับของบทบาทอย่างสิ้นเชิงและตรงกันข้ามกับ JavaScript ที่ไม่สร้างความรำคาญซึ่งเราได้เขียนมาตลอด 10 ปีที่ผ่านมา สิ่งนี้อาจทำให้เกิดความคุ้นเคย

หากสิ่งนี้ฟังดูเหมือนว่าเกินความจริงและมีข้อ จำกัด ไม่มีอะไรที่จะไกลไปกว่าความจริง เนื่องจาก AngularJS ใช้ HTML ของคุณเป็นรหัสคุณจะได้รับระดับ HTML ในเว็บแอปพลิเคชันของคุณ ทุกอย่างเป็นไปได้และสิ่งต่าง ๆ ส่วนใหญ่จะง่ายอย่างน่าประหลาดใจเมื่อคุณทำการกระโดดความคิดไม่กี่

ลงไปที่ nitty gritty กันดีกว่า

อันดับแรก Angular ไม่ได้แทนที่ jQuery

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

Misko ชอบ jQuery และไม่คัดค้านการใช้งาน อย่างไรก็ตามคุณจะพบว่าคุณสามารถทำงานให้เสร็จได้โดยใช้การผสมผสานของขอบเขตเทมเพลตและคำสั่งและคุณควรเลือกเวิร์กโฟลว์นี้หากเป็นไปได้เนื่องจากรหัสของคุณจะแยกกันมากขึ้นกำหนดค่าได้มากขึ้นและมากขึ้น เชิงมุม.

หากคุณใช้ jQuery คุณไม่ควรโรยทั่วสถานที่ ตำแหน่งที่ถูกต้องสำหรับการจัดการ DOM ใน AngularJS อยู่ในคำสั่ง เพิ่มเติมเกี่ยวกับสิ่งเหล่านี้ในภายหลัง

JavaScript ไม่สร้างความรำคาญกับ Selectors vs. Temlarative Templates

โดยทั่วไปแล้ว jQuery จะถูกใช้งานอย่างสงบเสงี่ยม รหัส JavaScript ของคุณมีการเชื่อมโยงในส่วนหัว (หรือส่วนท้าย) และนี่เป็นที่เดียวเท่านั้นที่มีการกล่าวถึง เราใช้ตัวเลือกเพื่อเลือกบิตของหน้าและเขียนปลั๊กอินเพื่อแก้ไขส่วนเหล่านั้น

JavaScript อยู่ในการควบคุม HTML นั้นมีความเป็นอิสระอย่างสมบูรณ์ HTML ของคุณยังคงความหมายแม้ไม่มี JavaScript แอตทริบิวต์ Onclick เป็นวิธีปฏิบัติที่ไม่ดีมาก

หนึ่งในสิ่งแรกที่คุณจะสังเกตเห็นเกี่ยวกับ AngularJS คือแอตทริบิวต์ที่กำหนดเองนั้นมีอยู่ทั่วไปแอตทริบิวต์ที่กำหนดเองได้ทุกที่HTML ของคุณจะเกลื่อนไปด้วยแอตทริบิวต์ ng ซึ่งเป็นคุณลักษณะ onClick บนเตียรอยด์เป็นหลัก นี่เป็นคำสั่ง (คอมไพเลอร์คำสั่ง) และเป็นหนึ่งในวิธีหลักที่เทมเพลตจะถูกเชื่อมโยงกับโมเดล

เมื่อคุณเห็นสิ่งนี้เป็นครั้งแรกคุณอาจถูกไล่ออกให้เขียน AngularJS เป็นจาวาสคริปต์ที่ล่วงล้ำมาจากโรงเรียนเก่า (อย่างที่ฉันเคยทำในตอนแรก) อันที่จริง AngularJS ไม่ได้เล่นตามกฎเหล่านั้น ใน AngularJS HTML5 ของคุณเป็นเทมเพลต มันถูกรวบรวมโดย AngularJS เพื่อผลิตหน้าเว็บของคุณ

นี่คือความแตกต่างครั้งใหญ่ครั้งแรก หากต้องการ jQuery หน้าเว็บของคุณคือ DOM ที่ต้องจัดการ สำหรับ AngularJS HTML ของคุณคือรหัสที่จะรวบรวม AngularJS อ่านในหน้าเว็บทั้งหมดของคุณและรวบรวมเป็นหน้าเว็บใหม่โดยใช้คอมไพเลอร์ในตัว

แม่แบบของคุณควรเปิดเผย ความหมายของมันควรจะชัดเจนเพียงแค่อ่าน เราใช้แอตทริบิวต์ที่กำหนดเองพร้อมชื่อที่มีความหมาย เราสร้างองค์ประกอบ HTML ใหม่อีกครั้งด้วยชื่อที่มีความหมาย นักออกแบบที่มีความรู้ HTML น้อยที่สุดและไม่มีทักษะการเขียนโค้ดสามารถอ่านเทมเพลต AngularJS ของคุณและเข้าใจสิ่งที่กำลังทำอยู่ เขาหรือเธอสามารถทำการปรับเปลี่ยน นี่คือวิธีเชิงมุม

แม่แบบอยู่ในที่นั่งคนขับ

หนึ่งในคำถามแรกที่ฉันถามตัวเองเมื่อเริ่มต้น AngularJS และทำงานผ่านบทช่วยสอนคือ"รหัสของฉันอยู่ที่ไหน" . ฉันไม่ได้เขียน JavaScript แต่ยังมีพฤติกรรมทั้งหมดนี้ คำตอบนั้นชัดเจน เนื่องจาก AngularJS รวบรวม DOM AngularJS จึงใช้ HTML ของคุณเป็นรหัส สำหรับกรณีง่าย ๆ หลายครั้งมันก็เพียงพอแล้วที่จะเพียงแค่เขียนเทมเพลตและให้ AngularJS รวบรวมมันเป็นแอพพลิเคชั่นสำหรับคุณ

เทมเพลตของคุณขับเคลื่อนแอปพลิเคชันของคุณ มันถือว่าเป็นDSL คุณเขียนส่วนประกอบ AngularJS และ AngularJS จะดูแลการดึงและทำให้พร้อมใช้งานในเวลาที่เหมาะสมตามโครงสร้างของแม่แบบของคุณ สิ่งนี้แตกต่างอย่างมากกับรูปแบบMVCมาตรฐานซึ่งเทมเพลตใช้สำหรับส่งออกเท่านั้น

มันคล้ายกับXSLTมากกว่าRuby on Railsมากกว่า

นี่เป็นสิ่งที่ตรงกันข้ามกับการควบคุมอย่างสิ้นเชิง

หยุดพยายามผลักดันแอปพลิเคชันของคุณจาก JavaScript ให้เทมเพลตขับเคลื่อนแอปพลิเคชันและให้ AngularJS ดูแลการเดินสายส่วนประกอบด้วยกัน นี่ก็เป็นวิธีเชิงมุม

Semantic HTML vs. Semantic Models

ด้วย jQuery หน้า HTML ของคุณควรมีเนื้อหาที่สื่อความหมาย หากปิด JavaScript (โดยผู้ใช้หรือเครื่องมือค้นหา) เนื้อหาของคุณยังคงสามารถเข้าถึงได้

เพราะ AngularJS ใช้หน้า HTML ของคุณเป็นเทมเพลต เทมเพลตไม่ควรมีความหมายเนื่องจากเนื้อหาของคุณจะถูกจัดเก็บในแบบจำลองของคุณซึ่งท้ายที่สุดแล้วมาจาก API ของคุณ AngularJS คอมไพล์ DOM ของคุณด้วยรูปแบบการสร้างเว็บเพจแบบ semantic

แหล่งที่มา HTML ของคุณไม่มีความหมายอีกต่อไปแทน API และ DOM ที่คอมไพล์แล้วของคุณนั้นมีความหมาย

ใน AngularJS ความหมายมีชีวิตอยู่ในรูปแบบ HTML เป็นเพียงแม่แบบสำหรับแสดงเท่านั้น

ณ จุดนี้คุณอาจมีคำถามทุกข้อเกี่ยวกับSEOและการเข้าถึงและถูกต้อง มีปัญหาเปิดอยู่ที่นี่ โปรแกรมอ่านหน้าจอส่วนใหญ่จะแยกวิเคราะห์ JavaScript ในขณะนี้ เครื่องมือค้นหาสามารถทำดัชนีเนื้อหาAJAXed อย่างไรก็ตามคุณจะต้องแน่ใจว่าคุณใช้ pushstate URL และคุณมีแผนผังไซต์ที่ดี ดูที่นี่สำหรับการสนทนาของปัญหา: https://stackoverflow.com/a/23245379/687677

การแยกข้อกังวล (SOC) กับ MVC

การแยกข้อกังวล (SOC) เป็นรูปแบบที่เติบโตมานานหลายปีในการพัฒนาเว็บไซต์ด้วยเหตุผลหลายประการรวมถึง SEO การเข้าถึงและการเข้ากันไม่ได้ของเบราว์เซอร์ ดูเหมือนว่านี้:

1. HTML - ความหมายความหมาย HTML ควรยืนอยู่คนเดียว
2. CSS - ใส่สไตล์โดยไม่มี CSS หน้ายังสามารถอ่านได้
3. JavaScript - พฤติกรรมโดยไม่มีสคริปต์เนื้อหาจะยังคงอยู่

อีกครั้ง AngularJS ไม่เล่นตามกฎ ในจังหวะ, AngularJS ทำไปกับทศวรรษของภูมิปัญญาที่ได้รับและใช้รูปแบบ MVC ซึ่งแม่แบบไม่ได้มีความหมายอีกต่อไปไม่แม้แต่น้อย

ดูเหมือนว่านี้:

1. รุ่น - โมเดลของคุณมีข้อมูลความหมายของคุณ แบบจำลองมักเป็นวัตถุJSON โมเดลมีอยู่เป็นคุณลักษณะของวัตถุที่เรียกว่า $ scope นอกจากนี้คุณยังสามารถจัดเก็บฟังก์ชั่นยูทิลิตี้ที่มีประโยชน์ใน $ scope ซึ่งแม่แบบของคุณสามารถเข้าถึงได้
2. มุมมอง - มุมมองของคุณเขียนด้วย HTML มุมมองมักไม่ได้มีความหมายเพราะข้อมูลของคุณอาศัยอยู่ในรูปแบบ
3. คอนโทรลเลอร์ - คอนโทรลเลอร์ของคุณเป็นฟังก์ชัน JavaScript ซึ่งเชื่อมต่อมุมมองกับโมเดล ฟังก์ชั่นของมันคือการเริ่มต้น $ scope ขึ้นอยู่กับแอปพลิเคชันของคุณคุณอาจหรืออาจไม่จำเป็นต้องสร้างคอนโทรลเลอร์ คุณสามารถควบคุมได้หลายหน้า

MVC และ SOC ไม่ได้อยู่ฝั่งตรงข้ามของระดับเดียวกัน แต่อยู่ในแกนที่แตกต่างอย่างสิ้นเชิง SOC ไม่สมเหตุสมผลในบริบท AngularJS คุณต้องลืมมันและไปต่อ

ถ้าอย่างคุณฉันอาศัยอยู่ในสงครามเบราว์เซอร์คุณอาจพบว่าความคิดนี้ค่อนข้างน่ารังเกียจ รับไปมันจะคุ้มค่าฉันสัญญา

ปลั๊กอินกับคำสั่ง

ปลั๊กอินขยาย jQuery AngularJS Directives ขยายขีดความสามารถของเบราว์เซอร์ของคุณ

ใน jQuery เรากำหนดปลั๊กอินโดยการเพิ่มฟังก์ชั่นใน jQuery.prototype จากนั้นเราเชื่อมโยงสิ่งเหล่านี้ลงใน DOM โดยเลือกองค์ประกอบและเรียกใช้ปลั๊กอินกับผลลัพธ์ แนวคิดคือการขยายขีดความสามารถของ jQuery

ตัวอย่างเช่นหากคุณต้องการภาพหมุนบนหน้าของคุณคุณอาจกำหนดรายการตัวเลขที่ไม่เรียงลำดับซึ่งอาจถูกห่อด้วยองค์ประกอบการนำทาง จากนั้นคุณอาจเขียน jQuery เพื่อเลือกรายการในหน้านั้นและพักเป็นแกลเลอรี่ที่มีเวลาในการทำแอนิเมชั่นเลื่อน

ใน AngularJS เรากำหนดคำสั่ง คำสั่งเป็นฟังก์ชั่นที่ส่งกลับวัตถุ JSON วัตถุนี้จะบอก AngularJS ว่าองค์ประกอบ DOM ใดที่ควรมองหาและการเปลี่ยนแปลงที่ทำกับพวกมัน คำสั่งถูกเชื่อมต่อกับเทมเพลตโดยใช้แอตทริบิวต์หรือองค์ประกอบที่คุณประดิษฐ์ แนวคิดคือการขยายขีดความสามารถของ HTML ด้วยคุณลักษณะและองค์ประกอบใหม่

วิธี AngularJS คือการขยายขีดความสามารถของ HTML ที่เป็นภาษาพื้นเมือง คุณควรเขียน HTML ที่ดูเหมือน HTML ขยายด้วยแอตทริบิวต์ที่กำหนดเองและองค์ประกอบ

หากคุณต้องการม้าหมุนให้ใช้<carousel />องค์ประกอบแล้วกำหนดคำสั่งเพื่อดึงแม่แบบและทำให้เครื่องดูดนั้นทำงานได้

คำสั่งขนาดเล็กจำนวนมากเทียบกับปลั๊กอินขนาดใหญ่ที่มีสวิตช์การกำหนดค่า

แนวโน้มกับ jQuery คือการเขียนปลั๊กอินขนาดใหญ่ที่ยอดเยี่ยมอย่างไลท์บ็อกซ์ซึ่งเรากำหนดค่าโดยผ่านค่าและตัวเลือกมากมาย

นี่เป็นข้อผิดพลาดใน AngularJS

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

จนกว่าคุณจะต้องการเปลี่ยนแปลงเล็กน้อย

สมมติว่าคุณมีเมนูที่คุณต้องการเปิดขึ้นเมื่อวางเมาส์เหนือ ทีนี้เรามีปัญหา ปลั๊กอินของเรามีสายในตัวจัดการการคลิกของเราสำหรับเราเราจะต้องเพิ่มตัวเลือกการกำหนดค่าเพื่อให้มันทำงานแตกต่างกันในกรณีเฉพาะนี้

ใน AngularJS เราเขียนคำสั่งที่เล็กลง คำสั่งแบบเลื่อนลงของเราจะมีขนาดเล็กอย่างน่าขัน มันอาจรักษาสถานะ folded และจัดเตรียมวิธีในการ fold (), unfold () หรือ toggle () วิธีการเหล่านี้จะอัปเดต $ scope.menu.visible ซึ่งเป็นบูลีนที่ถือสถานะ

ตอนนี้ในเทมเพลตของเราเราสามารถโยงเรื่องนี้ได้:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

ต้องการอัปเดตเมื่อวางเมาส์หรือไม่

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

เทมเพลตขับเคลื่อนแอปพลิเคชันเพื่อให้เราได้รับข้อมูลระดับ HTML อย่างละเอียด ถ้าเราต้องการแยกเป็นกรณี ๆ ไปเท็มเพลตทำให้ง่ายขึ้น

ปิดและขอบเขต $

ปลั๊กอิน JQuery ถูกสร้างขึ้นในการปิด ความเป็นส่วนตัวยังคงอยู่ภายในการปิดที่ มันขึ้นอยู่กับคุณที่จะรักษาห่วงโซ่ขอบเขตของคุณไว้ในการปิดนั้น คุณสามารถเข้าถึงชุดของโหนด DOM เท่านั้นที่ส่งผ่านไปยังปลั๊กอินโดย jQuery รวมถึงตัวแปรท้องถิ่นใด ๆ ที่กำหนดในการปิดและรูปกลมใด ๆ ที่คุณกำหนดไว้ ซึ่งหมายความว่าปลั๊กอินมีอยู่ในตัวเอง นี่เป็นสิ่งที่ดี แต่สามารถ จำกัด ได้เมื่อสร้างแอปพลิเคชันทั้งหมด การพยายามส่งผ่านข้อมูลระหว่างส่วนต่างๆของหน้าแบบไดนามิกกลายเป็นเรื่องน่าเบื่อ

AngularJS มี $ ขอบเขตวัตถุ เหล่านี้เป็นวัตถุพิเศษที่สร้างและดูแลโดย AngularJS ซึ่งคุณจัดเก็บแบบจำลองของคุณ คำสั่งบางอย่างจะวางไข่ $ ขอบเขตใหม่ซึ่งโดยค่าเริ่มต้นสืบทอดมาจากการห่อ $ scope โดยใช้การสืบทอด JavaScript ต้นแบบ วัตถุ $ scope สามารถเข้าถึงได้ในตัวควบคุมและมุมมอง

นี่คือส่วนที่ฉลาด เนื่องจากโครงสร้างของการสืบทอดขอบเขต $ เป็นไปตามโครงสร้างของ DOM องค์ประกอบจึงสามารถเข้าถึงขอบเขตของตนเองและขอบเขตใด ๆ ที่มีอยู่ได้อย่างราบรื่นจนถึงขอบเขต $ global (ซึ่งไม่เหมือนกับขอบเขตทั่วโลก)

สิ่งนี้ทำให้การส่งผ่านข้อมูลง่ายขึ้นและจัดเก็บข้อมูลในระดับที่เหมาะสม หากมีการเปิดตัวแบบเลื่อนลงขอบเขต $ แบบเลื่อนลงเท่านั้นที่จำเป็นต้องรู้ หากผู้ใช้อัปเดตการตั้งค่าของพวกเขาคุณอาจต้องการอัปเดตขอบเขต $ ทั่วโลกและขอบเขตที่ซ้อนกันใด ๆ ที่ฟังการตั้งค่าผู้ใช้จะได้รับการแจ้งเตือนโดยอัตโนมัติ

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

การเปลี่ยนแปลง DOM ด้วยตนเองกับการผูกข้อมูล

ใน jQuery คุณทำการเปลี่ยนแปลง DOM ทั้งหมดด้วยมือ คุณสร้างองค์ประกอบ DOM ใหม่โดยทางโปรแกรม หากคุณมีอาร์เรย์ JSON และคุณต้องการนำไปไว้ใน DOM คุณต้องเขียนฟังก์ชันเพื่อสร้าง HTML และแทรก

ใน AngularJS คุณสามารถทำได้เช่นกัน แต่คุณควรใช้ข้อมูลที่มีผลผูกพัน เปลี่ยนโมเดลของคุณและเนื่องจาก DOM ถูกผูกไว้ผ่านเทมเพลต DOM ของคุณจะอัปเดตโดยอัตโนมัติจึงไม่จำเป็นต้องมีการแทรกแซง

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

<input ng-model="user.name" />

$scope.user.nameผูกองค์ประกอบการป้อนข้อมูลเพื่อ การอัปเดตอินพุตจะอัปเดตค่าในขอบเขตปัจจุบันของคุณและในทางกลับกัน

ในทำนองเดียวกัน:

<p>
  {{user.name}}
</p>

จะเอาท์พุทชื่อผู้ใช้ในวรรค มันมีผลผูกพันสดดังนั้นหาก$scope.user.nameมีการอัปเดตค่าแม่แบบจะอัปเดตด้วย

อาแจ็กซ์ตลอดเวลา

ใน jQuery การโทร Ajax นั้นค่อนข้างง่าย แต่ก็ยังมีบางสิ่งที่คุณอาจคิดสองครั้ง มีความซับซ้อนเพิ่มขึ้นให้คิดและเป็นชิ้นของสคริปต์เพื่อรักษา

ใน AngularJS Ajax เป็นโซลูชัน go-to เริ่มต้นของคุณและเกิดขึ้นตลอดเวลาเกือบจะไม่มีคุณสังเกตเห็น คุณสามารถรวมเทมเพลตที่มี ng-include ได้ คุณสามารถใช้เทมเพลตด้วยคำสั่งที่กำหนดเองง่ายที่สุด คุณสามารถตัดการโทร Ajax ในบริการและสร้างบริการGitHubหรือบริการFlickrซึ่งคุณสามารถเข้าถึงได้อย่างง่ายดายอย่างน่าอัศจรรย์

บริการวัตถุ vs ฟังก์ชั่นผู้ช่วย

ใน jQuery หากเราต้องการทำงานที่ไม่เกี่ยวข้องกับงานเล็กเช่นดึงฟีดจาก API เราอาจเขียนฟังก์ชั่นเล็ก ๆ น้อย ๆ เพื่อทำเช่นนั้นในตอนท้าย นั่นเป็นคำตอบที่ถูกต้อง แต่ถ้าเราต้องการเข้าถึงฟีดนั้นบ่อยๆ ถ้าเราต้องการนำรหัสนั้นกลับมาใช้ใหม่ในแอปพลิเคชันอื่น

AngularJS ให้บริการวัตถุแก่เรา

บริการเป็นวัตถุอย่างง่ายที่มีฟังก์ชั่นและข้อมูล พวกเขามักจะเป็นซิงเกิลตันซึ่งหมายความว่าจะไม่มีใครมากกว่าหนึ่งคน สมมติว่าเราต้องการเข้าถึง Stack Overflow API เราอาจเขียนวิธีการStackOverflowServiceที่กำหนด

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

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

การพึ่งพาการฉีด (DI) กับการติดตั้ง - aka-spaghettification

AngularJS จัดการการอ้างอิงของคุณสำหรับคุณ หากคุณต้องการวัตถุเพียงอ้างถึงแล้ว AngularJS จะรับมันให้คุณ

จนกว่าคุณจะเริ่มใช้สิ่งนี้มันก็ยากที่จะอธิบายว่านี่เป็นเรื่องใหญ่ขนาดไหน ไม่มีอะไรที่เหมือนกับ AngularJS DI อยู่ใน jQuery

DI หมายความว่าแทนที่จะเขียนแอปพลิเคชันของคุณและเชื่อมโยงเข้าด้วยกันคุณจะต้องกำหนดไลบรารีของส่วนประกอบแต่ละอันที่ระบุด้วยสตริง

ว่าฉันมีองค์ประกอบที่เรียกว่า 'FlickrService' ซึ่งกำหนดวิธีการดึงฟีด JSON จาก Flickr ตอนนี้ถ้าฉันต้องการเขียนคอนโทรลเลอร์ที่สามารถเข้าถึง Flickr ได้ฉันต้องอ้างถึง 'FlickrService' ตามชื่อเมื่อฉันประกาศคอนโทรลเลอร์ AngularJS จะดูแล instantiating ส่วนประกอบและทำให้มันพร้อมใช้งานสำหรับคอนโทรลเลอร์ของฉัน

ตัวอย่างเช่นที่นี่ฉันกำหนดบริการ:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

ตอนนี้เมื่อฉันต้องการใช้บริการนั้นฉันเพียงแค่อ้างอิงโดยใช้ชื่อดังนี้:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS จะรับรู้ว่าจำเป็นต้องมีวัตถุ FlickrService ในการสร้างอินสแตนซ์ของคอนโทรลเลอร์และจะให้สิ่งหนึ่งกับเรา

สิ่งนี้ทำให้การเดินสายเข้าด้วยกันเป็นเรื่องง่ายมากและจะช่วยลดแนวโน้มที่จะเกิด spagettification เรามีรายการองค์ประกอบที่เรียบง่ายและ AngularJS มอบให้พวกเราทีละคนเมื่อเราต้องการ

สถาปัตยกรรมบริการแบบแยกส่วน

jQuery พูดน้อยมากเกี่ยวกับวิธีที่คุณควรจัดระเบียบรหัสของคุณ AngularJS มีความคิดเห็น

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

คุณจะได้รับการนำรหัสมาใช้อย่างง่ายหากคุณต้องการเขียนแอปพลิเคชั่นอื่นตาม Flickr คุณสามารถรวมโมดูล Flickr และ voila ได้คุณสามารถเข้าถึงฟังก์ชั่นที่เกี่ยวข้องกับ Flickr ทั้งหมดในแอปพลิเคชันใหม่ของคุณ

โมดูลประกอบด้วยส่วนประกอบ AngularJS เมื่อเรารวมถึงโมดูลส่วนประกอบทั้งหมดที่อยู่ในโมดูลที่กลายเป็นใช้ได้ให้เราเป็นรายการที่เรียบง่ายระบุสายที่ไม่ซ้ำกันของพวกเขา จากนั้นเราสามารถฉีดส่วนประกอบเหล่านั้นเข้าด้วยกันโดยใช้กลไกการฉีดของ AngularJS

เพื่อสรุป

AngularJS และ jQuery ไม่ใช่ศัตรู เป็นไปได้ที่จะใช้ jQuery ภายใน AngularJS อย่างมาก หากคุณกำลังใช้ AngularJS ดี (แม่แบบการผูกข้อมูล, $ ขอบเขตคำสั่งอื่น ๆ ) คุณจะพบว่าคุณจะต้องมีจำนวนมากน้อย jQuery กว่าที่คุณมิฉะนั้นอาจต้อง

สิ่งสำคัญที่ต้องตระหนักคือแม่แบบของคุณขับเคลื่อนแอปพลิเคชันของคุณ หยุดพยายามเขียนปลั๊กอินขนาดใหญ่ที่ทำทุกอย่าง แทนที่จะเขียนคำสั่งเล็ก ๆ น้อย ๆ ที่ทำสิ่งหนึ่งแล้วเขียนเทมเพลตอย่างง่าย ๆ เพื่อโยงเข้าด้วยกัน

คิดถึง JavaScript ที่ไม่สร้างความรำคาญให้น้อยลงและลองคิดในแง่ของส่วนขยาย HTML แทน

หนังสือเล่มเล็ก ๆ ของฉัน

ผมตื่นเต้นมากเกี่ยวกับ AngularJS ผมเขียนหนังสือสั้น ๆ เกี่ยวกับมันที่คุณยินดีต้อนรับมากที่จะอ่านออนไลน์http://nicholasjohnson.com/angular-book/ ฉันหวังว่ามันจะเป็นประโยชน์

คุณสามารถอธิบายการเปลี่ยนกระบวนทัศน์ที่จำเป็นได้หรือไม่?

คำสั่ง vs Declarative

ด้วยjQueryคุณจะบอก DOM ว่าต้องเกิดอะไรขึ้นทีละขั้นตอน ด้วยAngularJSคุณจะอธิบายผลลัพธ์ที่คุณต้องการ แต่ไม่ใช่วิธีการ เพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่ ตรวจสอบคำตอบของ Mark Rajcok ด้วย

ฉันจะออกแบบและออกแบบเว็บแอปฝั่งไคลเอ็นต์ได้อย่างไร

AngularJS เป็นเฟรมเวิร์กฝั่งไคลเอ็นต์ทั้งหมดที่ใช้รูปแบบMVC (ตรวจสอบการแสดงกราฟิกของพวกเขา) มันมุ่งเน้นไปที่การแยกความกังวลอย่างมาก

ความแตกต่างที่ใหญ่ที่สุดคืออะไร? ฉันควรหยุดทำอะไร / ใช้ ฉันควรเริ่มทำ / ใช้อะไรแทน

jQueryเป็นห้องสมุด

AngularJSเป็นเฟรมเวิร์กฝั่งไคลเอ็นต์ที่สวยงามทดสอบได้สูงซึ่งรวมเอาสิ่งดีๆมากมายเช่น MVC การฉีดพึ่งพาการผูกข้อมูลและอื่น ๆ อีกมากมาย

มันมุ่งเน้นไปที่การแยกความกังวลและการทดสอบ (การทดสอบหน่วยและการทดสอบแบบ end-to-end) ซึ่งอำนวยความสะดวกในการพัฒนาโดยใช้การทดสอบ

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

มีข้อควรพิจารณา / ข้อ จำกัด ด้านเซิร์ฟเวอร์หรือไม่?

คุณสามารถใช้กับแอพพลิเคชั่นที่มีอยู่ซึ่งคุณใช้งาน jQuery อยู่แล้ว อย่างไรก็ตามหากคุณต้องการใช้ประโยชน์จากคุณสมบัติของ AngularJS อย่างเต็มที่คุณอาจลองเขียนโค้ดฝั่งเซิร์ฟเวอร์โดยใช้วิธีRESTful

การทำเช่นนี้จะช่วยให้คุณสามารถใช้ประโยชน์จากโรงงานทรัพยากรของพวกเขาซึ่งสร้างนามธรรมของเซิร์ฟเวอร์ RESTful APIของคุณและทำให้การโทรฝั่งเซิร์ฟเวอร์ (รับ, บันทึก, ลบ, ฯลฯ ) ง่ายอย่างเหลือเชื่อ

เพื่ออธิบาย "การเปลี่ยนกระบวนทัศน์" ฉันคิดว่าคำตอบสั้น ๆ ก็พอเพียง

AngularJS เปลี่ยนวิธีการค้นหาองค์ประกอบ

ในjQueryโดยทั่วไปคุณใช้ตัวเลือกเพื่อค้นหาองค์ประกอบและต่อสายเหล่านั้น:
$('#id .class').click(doStuff);

ในAngularJSคุณใช้คำสั่งเพื่อทำเครื่องหมายองค์ประกอบโดยตรงเพื่อวางสาย:
<a ng-click="doStuff()">

AngularJS ไม่จำเป็นต้อง (หรือต้องการ) คุณสามารถค้นหาองค์ประกอบโดยใช้ตัวเลือก - ความแตกต่างหลักระหว่าง AngularJS ของjqLiteเมื่อเทียบกับเต็มเป่าjQueryคือjqLite ไม่สนับสนุนเตอร์

ดังนั้นเมื่อมีคนพูดว่า "ไม่รวม jQuery เลย" ส่วนใหญ่เป็นเพราะพวกเขาไม่ต้องการให้คุณใช้ตัวเลือก พวกเขาต้องการให้คุณเรียนรู้การใช้คำสั่งแทน ตรงไม่เลือก!

jQuery

jQuery สร้างคำสั่ง JavaScript ที่ยาวเหยียดเช่นgetElementByHerpDerpสั้นและข้ามเบราว์เซอร์

AngularJS

AngularJS ช่วยให้คุณสร้างแท็ก / คุณสมบัติ HTML ของตัวเองที่ทำสิ่งที่ทำงานได้ดีกับเว็บแอปพลิเคชันแบบไดนามิก (เนื่องจาก HTML ถูกออกแบบมาสำหรับหน้าคงที่)

แก้ไข:

พูดว่า "ฉันมีพื้นหลัง jQuery ฉันจะคิดอย่างไรใน AngularJS" เหมือนกับว่า "ฉันมีพื้นหลัง HTML ฉันจะคิดอย่างไรใน JavaScript" ความจริงที่ว่าคุณกำลังถามคำถามนั้นแสดงให้เห็นว่าคุณส่วนใหญ่ไม่เข้าใจวัตถุประสงค์พื้นฐานของแหล่งข้อมูลทั้งสองนี้ นี่คือเหตุผลที่ฉันเลือกที่จะตอบคำถามโดยเพียงชี้ให้เห็นถึงความแตกต่างพื้นฐานแทนที่จะผ่านรายการที่พูดว่า "AngularJS ใช้คำสั่งในขณะที่ jQuery ใช้ตัวเลือก CSS เพื่อสร้างวัตถุ jQuery ซึ่งทำสิ่งนี้และอื่น ๆ .... " . คำถามนี้ไม่ต้องการคำตอบที่ยาว

jQuery เป็นวิธีที่ทำให้การเขียนโปรแกรมจาวาสคริปต์ในเบราว์เซอร์ง่ายขึ้น คำสั่งที่สั้นกว่าเบราว์เซอร์ ฯลฯ

AngularJS ขยาย HTML ดังนั้นคุณไม่จำเป็นต้องใส่<div>ทุกที่เพื่อสร้างแอปพลิเคชัน มันทำให้ HTML ใช้งานได้จริงสำหรับแอปพลิเคชันมากกว่าที่มันถูกออกแบบมาสำหรับซึ่งเป็นหน้าเว็บแบบคงที่สำหรับการศึกษา มันทำได้ในลักษณะวงเวียนโดยใช้ JavaScript แต่โดยพื้นฐานแล้วมันเป็นส่วนเสริมของ HTML ไม่ใช่ JavaScript

jQuery: คุณคิดมากเกี่ยวกับ 'การค้นหาDOM ' สำหรับองค์ประกอบ DOM และทำอะไรบางอย่าง

AngularJS: แบบจำลองนี้เป็นความจริงและคุณคิดเสมอจาก ANGLE นั้น

ตัวอย่างเช่นเมื่อคุณได้รับข้อมูลจากเซิร์ฟเวอร์ที่คุณต้องการแสดงในบางรูปแบบใน DOM ใน jQuery คุณจะต้อง '1 ค้นหา 'ที่อยู่ใน DOM ที่คุณต้องการวางข้อมูลนี้' 2 UPDATE / ผนวก' มันมีโดยการสร้างโหนดใหม่หรือเพียงแค่การตั้งค่าของinnerHTML จากนั้นเมื่อคุณต้องการอัปเดตมุมมองนี้คุณจะต้อง '3 ค้นหา 'ที่ตั้งและ' 4 UPDATE' วัฏจักรของการค้นหาและอัปเดตทั้งหมดที่ดำเนินการภายในบริบทเดียวกันของการรับและการจัดรูปแบบข้อมูลจากเซิร์ฟเวอร์จะหายไปใน AngularJS

ด้วย AngularJS คุณมีแบบจำลองของคุณ (วัตถุ JavaScript ที่คุณคุ้นเคยอยู่แล้ว) และคุณค่าของแบบจำลองจะบอกคุณเกี่ยวกับแบบจำลอง (อย่างชัดเจน) และเกี่ยวกับมุมมองและการทำงานของแบบจำลองจะแพร่กระจายไปยังมุมมองโดยอัตโนมัติ ไม่ต้องคิดเกี่ยวกับมัน คุณจะพบว่าตัวเองใน AngularJS ไม่พบสิ่งใน DOM อีกต่อไป

หากต้องการใส่อีกวิธีหนึ่งใน jQuery คุณต้องคิดถึงตัวเลือก CSS นั่นคือที่ใดdivหรือtdที่มีคลาสหรือคุณลักษณะ ฯลฯ เพื่อที่ฉันจะได้รับ HTML หรือสีหรือค่า แต่ใน AngularJS คุณจะพบว่าตัวเองกำลังคิดแบบนี้: ฉันกำลังทำอะไรกับโมเดลฉันจะตั้งค่าของโมเดลให้เป็นจริง คุณไม่ได้สนใจว่ามุมมองที่แสดงถึงค่านี้เป็นช่องทำเครื่องหมายหรืออยู่ในtdองค์ประกอบ (รายละเอียดที่คุณมักต้องคิดใน jQuery)

และด้วยการจัดการ DOM ใน AngularJS คุณจะพบว่าคุณกำลังเพิ่มคำสั่งและตัวกรองซึ่งคุณคิดว่าเป็นส่วนขยาย HTML ที่ถูกต้อง

อีกสิ่งหนึ่งที่คุณจะได้สัมผัสใน AngularJS: ใน jQuery คุณเรียกฟังก์ชัน jQuery เป็นอย่างมากใน AngularJS, AngularJS จะเรียกหน้าที่ของคุณดังนั้น AngularJS จะ 'บอกวิธีทำสิ่งต่าง ๆ ' แต่ข้อดีคือคุ้มค่าดังนั้นการเรียนรู้ AngularJS มักจะหมายถึงการเรียนรู้สิ่งที่ AngularJS ต้องการหรือวิธีที่ AngularJS ต้องการให้คุณนำเสนอฟังก์ชั่นของคุณและมันจะเรียกมันตามนั้น นี่เป็นหนึ่งในสิ่งที่ทำให้ AngularJS เป็นกรอบงานแทนที่จะเป็นห้องสมุด

เหล่านี้เป็นคำตอบที่ดีมาก แต่มีความยาว

เพื่อสรุปประสบการณ์ของฉัน:

1. ตัวควบคุมและผู้ให้บริการ (บริการโรงงาน ฯลฯ ) ใช้สำหรับการแก้ไขโมเดลข้อมูลไม่ใช่ HTML
2. HTML และคำสั่งกำหนดเค้าโครงและผูกพันกับรูปแบบ
3. หากคุณต้องการใช้ข้อมูลร่วมกันระหว่างตัวควบคุมให้สร้างบริการหรือจากโรงงาน - เป็นแบบซิงเกิลที่แชร์ข้ามแอปพลิเคชัน
4. หากคุณต้องการวิดเจ็ต HTML ให้สร้างคำสั่ง
5. หากคุณมีข้อมูลและกำลังพยายามอัปเดต HTML ... STOP! อัปเดตโมเดลและตรวจสอบให้แน่ใจว่า HTML ของคุณถูกผูกไว้กับโมเดล

jQuery เป็นไลบรารีการจัดการ DOM

AngularJS เป็นกรอบงาน MV *

อันที่จริง AngularJS เป็นหนึ่งในเฟรมเวิร์ก JavaScript MV * ไม่กี่ตัว (เครื่องมือ MVC JavaScript จำนวนมากยังคงอยู่ภายใต้ไลบรารีหมวดหมู่)

เป็นกรอบมันเป็นเจ้าภาพรหัสของคุณและเป็นเจ้าของการตัดสินใจเกี่ยวกับสิ่งที่โทรและเมื่อ!

AngularJS เองมี jQuery-lite edition อยู่ภายใน ดังนั้นสำหรับการเลือก / จัดการ DOM ขั้นพื้นฐานบางอย่างคุณไม่จำเป็นต้องรวมไลบรารี jQuery (ซึ่งช่วยประหยัดหลายไบต์ในการทำงานบนเครือข่าย)

AngularJS มีแนวคิด "Directives" สำหรับการจัดการ DOM และออกแบบส่วนประกอบ UI ที่ใช้ซ้ำได้ดังนั้นคุณควรใช้เมื่อใดก็ตามที่คุณรู้สึกว่าจำเป็นต้องทำสิ่งที่เกี่ยวข้องกับการจัดการ DOM (คำสั่งเป็นที่เดียวที่คุณควรเขียนโค้ด jQuery ในขณะที่ใช้ AngularJS)

AngularJS เกี่ยวข้องกับช่วงการเรียนรู้ (มากกว่า jQuery :-)

-> สำหรับนักพัฒนาที่มาจากพื้นหลัง jQuery คำแนะนำแรกของฉันคือ "เรียนรู้จาวาสคริปต์เป็นภาษาชั้นหนึ่งก่อนที่จะกระโดดสู่กรอบอันอุดมสมบูรณ์เช่น AngularJS!" ฉันเรียนรู้ความจริงข้างต้นอย่างยากลำบาก

โชคดี.

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

jQuery นั้นเกี่ยวกับการจัดการ DOM มันแก้ความเจ็บปวดข้ามเบราว์เซอร์ทั้งหมดไม่งั้นคุณจะต้องจัดการกับมัน แต่มันไม่ใช่กรอบที่ให้คุณแบ่งแอพของคุณออกเป็นส่วนประกอบอย่าง AngularJS

สิ่งที่ดีเกี่ยวกับ AngularJs คือมันช่วยให้คุณสามารถแยก / แยกการจัดการ DOM ในคำสั่ง มีคำสั่งในตัวพร้อมให้คุณใช้เช่น ng-click คุณสามารถสร้างคำสั่งกำหนดเองของคุณเองที่จะมีตรรกะการดูหรือการจัดการ DOM ทั้งหมดของคุณดังนั้นคุณจึงไม่ต้องจบรหัสการจัดการ DOM ที่ยุ่งเหยิงในตัวควบคุมหรือบริการที่ควรดูแลตรรกะทางธุรกิจ

แอปเชิงมุมแบ่งแอปของคุณเป็น - ตัวควบคุม - บริการ - การดู - ฯลฯ

และมีอีกสิ่งหนึ่งนั่นคือคำสั่ง มันเป็นคุณสมบัติที่คุณสามารถแนบไปกับองค์ประกอบ DOM ใด ๆ และคุณสามารถใช้ถั่วกับ jQuery ได้โดยไม่ต้องกังวลว่า jQuery ของคุณจะขัดแย้งกับส่วนประกอบของ AngularJs หรือยุ่งกับสถาปัตยกรรม

ฉันได้ยินจากการพบปะที่ฉันเข้าร่วมหนึ่งในผู้ก่อตั้ง Angular กล่าวว่าพวกเขาทำงานอย่างหนักเพื่อแยกการจัดการ DOM ออกจากกันดังนั้นอย่าพยายามรวมพวกเขากลับเข้ามา

ฟังพอดคาสต์JavaScript Jabber: Episode # 32ที่มีผู้สร้างดั้งเดิมของ AngularJS: Misko Hevery & Igor Minar พวกเขาพูดคุยกันมากมายเกี่ยวกับสิ่งที่ชอบมาที่ AngularJS จากภูมิหลัง JavaScript อื่น ๆ โดยเฉพาะ jQuery

หนึ่งในคะแนนที่ได้รับจากพอดแคสต์ทำหลายสิ่งหลายอย่างให้ฉันด้วยความเคารพต่อคำถามของคุณ:

MISKO : [... ] หนึ่งในสิ่งที่เราคิดเกี่ยวกับแทบจะไม่มากใน Angular คือเราจะให้ช่องหนีจำนวนมากเพื่อให้คุณสามารถออกไปและโดยทั่วไปหาวิธีออก สำหรับเราคำตอบคือสิ่งนี้เรียกว่า "คำสั่ง" และด้วยคำสั่งคุณจะกลายเป็น jQuery JavaScript ปกติคุณสามารถทำสิ่งที่คุณต้องการ

IGOR : ดังนั้นคิดว่าคำสั่งเป็นคำสั่งของคอมไพเลอร์ที่บอกมันเมื่อใดก็ตามที่คุณเจอองค์ประกอบนี้หรือ CSS นี้ในเทมเพลตและคุณเก็บโค้ดประเภทนี้ไว้และโค้ดนั้นจะรับผิดชอบองค์ประกอบนั้น ในต้นไม้ DOM

บันทึกของตอนทั้งหมดได้ที่ลิงค์ที่ให้ไว้ข้างต้น

ดังนั้นเพื่อตอบคำถามของคุณโดยตรง: AngularJS นั้นมีความคิดเห็นมากและเป็นกรอบ MV ที่แท้จริง อย่างไรก็ตามคุณยังสามารถทำสิ่งที่เจ๋ง ๆ ทั้งหมดที่คุณรู้จักและชื่นชอบกับ jQuery ภายในแนวทาง ไม่ใช่เรื่องของ "ฉันจะทำสิ่งที่ฉันเคยทำใน jQuery ได้อย่างไร" เท่าที่เป็นเรื่องของ "ฉันจะเสริม AngularJS กับทุกสิ่งที่ฉันเคยทำใน jQuery ได้อย่างไร"

มันเป็นสภาพจิตใจที่แตกต่างกันสองอย่างจริงๆ

ฉันพบว่าคำถามนี้น่าสนใจเพราะการเปิดรับโปรแกรม JavaScript ครั้งแรกของฉันคือNode.jsและ AngularJS ฉันไม่เคยเรียน jQuery และฉันคิดว่านั่นเป็นสิ่งที่ดีเพราะฉันไม่ต้องเรียนรู้อะไรเลย ในความเป็นจริงฉันหลีกเลี่ยงการแก้ปัญหา jQuery อย่างแข็งขันและหาวิธี "AngularJS" เพื่อแก้ปัญหาเหล่านั้น แต่เพียงผู้เดียว ดังนั้นฉันคิดว่าคำตอบของฉันสำหรับคำถามนี้จะเป็นไปได้ว่า "คิดเหมือนคนที่ไม่เคยเรียนรู้ jQuery" และหลีกเลี่ยงสิ่งล่อใจที่จะรวม jQuery โดยตรง (เห็นได้ชัดว่า AngularJS ใช้มันในระดับหนึ่ง)

AngularJS และ jQuery:

AngularJs และ JQuery นั้นแตกต่างกันอย่างสิ้นเชิงในทุกระดับยกเว้นฟังก์ชั่น JQLite และคุณจะเห็นมันเมื่อคุณเริ่มเรียนรู้คุณสมบัติหลักของ AngularJs (ฉันอธิบายไว้ด้านล่าง)

AngularJs เป็นเฟรมเวิร์กฝั่งไคลเอ็นต์ที่เสนอเพื่อสร้างแอ็พพลิเคชันฝั่งไคลเอ็นต์อิสระ JQuery เป็นไลบรารีฝั่งไคลเอ็นต์ที่เล่นรอบ DOM

AngularJs Cool Principle - หากคุณต้องการให้การเปลี่ยนแปลงบางอย่างใน UI ของคุณคิดจากมุมมองการเปลี่ยนแปลงข้อมูลโมเดล เปลี่ยนข้อมูลของคุณและ UI จะแสดงผลตัวเองอีกครั้ง คุณไม่จำเป็นต้องเล่น DOM ในแต่ละครั้งเว้นแต่และจนกว่าจะมีความต้องการแทบจะไม่และมันก็ควรได้รับการจัดการผ่าน Angular Directives

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

การผูกข้อมูลแบบสองทางเป็นสิ่งที่น่าอัศจรรย์: ฉันมีกริดที่มีฟังก์ชั่นทั้งหมด UPDATE, DELTE, INSERT ฉันมีวัตถุข้อมูลที่ผูกโมเดลของกริดโดยใช้ ng-repeat คุณจะต้องเขียนโค้ด JavaScript ง่ายๆบรรทัดเดียวเพื่อลบและแทรกเท่านั้น กริดจะอัพเดตโดยอัตโนมัติเมื่อโมเดลกริดเปลี่ยนไปทันที ฟังก์ชั่นการอัพเดทเป็นแบบเรียลไทม์ไม่มีรหัส คุณรู้สึกตื่นตาตื่นใจ !!!

คำสั่งที่นำกลับมาใช้ใหม่ได้นั้นยอดเยี่ยม: เขียนคำสั่งในที่เดียวและใช้มันตลอดทั้งแอปพลิเคชัน พระเจ้าช่วย!!! ฉันใช้คำสั่งเหล่านี้สำหรับเพจจิ้ง regex การตรวจสอบและอื่น ๆ มันเจ๋งจริงๆ!

การกำหนดเส้นทางมีความแข็งแรง: ขึ้นอยู่กับการใช้งานของคุณว่าคุณต้องการใช้งานอย่างไร แต่ต้องใช้รหัสน้อยมากในการกำหนดเส้นทางการร้องขอเพื่อระบุ HTML และตัวควบคุม (JavaScript)

ตัวควบคุมยอดเยี่ยม: ตัวควบคุมดูแล HTML ของตัวเอง แต่ตัวแยกนี้ทำงานได้ดีสำหรับการใช้งานทั่วไปเช่นกัน หากคุณต้องการเรียกใช้ฟังก์ชั่นเดียวกันกับการคลิกปุ่มบน HTML หลักเพียงแค่เขียนชื่อฟังก์ชั่นเดียวกันในแต่ละคอนโทรลเลอร์และเขียนรหัสแต่ละรายการ

ปลั๊กอิน: มีคุณสมบัติที่คล้ายกันอื่น ๆ อีกมากมายเช่นการแสดงภาพซ้อนทับในแอปของคุณ คุณไม่จำเป็นต้องเขียนโค้ดให้ใช้ปลั๊กอินโอเวอร์เลย์ที่มีเป็น wc-overlay และสิ่งนี้จะดูแลคำขอXMLHttpRequest (XHR) ทั้งหมดโดยอัตโนมัติ

เหมาะสำหรับสถาปัตยกรรมRESTful : การเป็นเฟรมเวิร์กที่สมบูรณ์ทำให้ AngularJS ยอดเยี่ยมในการทำงานกับสถาปัตยกรรม RESTful ในการโทรหา REST CRUD API นั้นง่ายมากและ

บริการ : เขียนรหัสทั่วไปโดยใช้บริการและรหัสน้อยลงในคอนโทรลเลอร์ สามารถใช้ Sevices เพื่อแบ่งปันฟังก์ชั่นทั่วไปของคอนโทรลเลอร์

การขยาย : Angular ได้ขยายคำสั่ง HTML โดยใช้คำสั่งเชิงมุม เขียนนิพจน์ภายใน html และประเมินผลบนรันไทม์ สร้างคำสั่งและบริการของคุณเองและใช้ในโครงการอื่นโดยไม่ต้องใช้ความพยายามเป็นพิเศษ

ในฐานะที่เป็น JavaScript MV * เริ่มต้นและหมดจดมุ่งเน้นไปที่การประยุกต์ใช้สถาปัตยกรรม (ไม่ใช่เรื่องเซิร์ฟเวอร์ / ฝั่งไคลเอ็นต์) แน่นอนฉันจะแนะนำทรัพยากรต่อไปนี้ (ซึ่งผมกำลังแปลกใจไม่ได้กล่าวถึงยัง): รูปแบบการออกแบบ JavaScriptโดย Addy Osmani เช่นการแนะนำให้แตกต่างกันรูปแบบการออกแบบ JavaScript ข้อกำหนดที่ใช้ในคำตอบนี้นำมาจากเอกสารที่ลิงก์ด้านบน ฉันจะไม่ทำซ้ำสิ่งที่เป็นคำที่ดีจริงๆในคำตอบที่ยอมรับ แต่คำตอบนี้เชื่อมโยงกลับไปยังภูมิหลังทางทฤษฎีที่ให้อำนาจ AngularJS (และห้องสมุดอื่น ๆ )

เช่นเดียวกับฉันคุณจะรู้ได้อย่างรวดเร็วว่า AngularJS (หรือEmber.js , Durandal และเฟรมเวิร์ก MV * อื่น ๆ สำหรับเรื่องนั้น) เป็นหนึ่งในเฟรมเวิร์กที่ซับซ้อนซึ่งประกอบไปด้วยรูปแบบการออกแบบ JavaScript ที่หลากหลาย

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

ตัวอย่างเช่น:

• การเขียนโปรแกรมเชิงวัตถุ JavaScript (นี่คือลิงค์ค้นหาของ Google) ไม่ใช่ไลบรารี แต่เป็นข้อกำหนดเบื้องต้นสำหรับการเขียนโปรแกรมประยุกต์ใด ๆ มันสอนการใช้งานพื้นเมืองของต้นแบบตัวสร้างรูปแบบซิงเกิลและมัณฑนากร
• jQuery / Underscoreสำหรับรูปแบบซุ้ม (เช่น WYSIWYG สำหรับจัดการ DOM)
• Prototype.jsสำหรับต้นแบบ / ตัวสร้าง / รูปแบบมิกซ์อิน
• RequireJS / Curl.jsสำหรับรูปแบบโมดูล / AMD
• KnockoutJSสำหรับรูปแบบการเผยแพร่ / สมัครสมาชิกที่สังเกตได้

หมายเหตุ: รายการนี้ไม่สมบูรณ์หรือ 'ห้องสมุดที่ดีที่สุด'; พวกเขาเพิ่งเป็นห้องสมุดที่ฉันใช้ ห้องสมุดเหล่านี้มีรูปแบบมากขึ้นส่วนที่กล่าวถึงเป็นเพียงจุดสนใจหลักหรือเจตนาดั้งเดิม หากคุณรู้สึกว่ามีบางอย่างขาดหายไปจากรายการนี้โปรดพูดถึงมันในความคิดเห็นและฉันยินดีที่จะเพิ่ม

ที่จริงแล้วถ้าคุณใช้ AngularJS คุณไม่จำเป็นต้องใช้ jQuery อีกต่อไป AngularJS เองมีผลผูกพันและคำสั่งซึ่งเป็น "การแทนที่" ที่ดีมากสำหรับสิ่งส่วนใหญ่ที่คุณสามารถทำได้ด้วย jQuery

ฉันมักจะพัฒนาโปรแกรมมือถือโดยใช้ AngularJS และคอร์โดวา สิ่งเดียวจาก jQuery ที่ฉันต้องการคือตัวเลือก

โดย googling ฉันเห็นว่ามีโมดูลตัวเลือก jQuery สแตนด์อะโลนอยู่ที่นั่น มันเสียงดังฉ่า

และฉันตัดสินใจสร้างโค้ดขนาดจิ๋วที่ช่วยให้ฉันเริ่มเว็บไซต์ได้อย่างรวดเร็วโดยใช้ AngularJS ด้วยพลังของ jQuery Selector (ใช้ Sizzle)

ฉันแบ่งปันรหัสของฉันที่นี่: https://github.com/huytd/Sizzular