javascript - "التفكير في أنغولارجس" إذا كان لدي خلفية مسج؟


لنفترض أنني على دراية بتطوير التطبيقات من جانب العميل في مسج ، ولكن الآن أود بدء استخدام أنغولارجس . هل يمكنك وصف النقلة النوعية الضرورية؟ إليك بعض الأسئلة التي قد تساعدك في صياغة إجابة:

  • كيف يمكنني تصميم وتطبيقات الويب من جانب العميل بشكل مختلف؟ ما هو أكبر الفرق؟
  • ماذا يجب أن أوقف القيام / استخدام؛ ماذا يجب أن أبدأ في العمل / بدلا من ذلك؟
  • هل هناك أي اعتبارات / قيود من جانب الخادم؟

أنا لا أبحث عن مقارنة مفصلة بين jQuery و AngularJS .



Answers



1. لا تصميم الصفحة الخاصة بك، ثم تغييره مع التلاعب دوم

في مسج، يمكنك تصميم صفحة، ثم جعلها ديناميكية. وذلك لأن جكري تم تصميمه لزيادة ونمت بشكل لا يصدق من تلك الفرضية البسيطة.

ولكن في أنغولارجس، يجب أن تبدأ من الألف إلى الياء مع العمارة الخاصة بك في الاعتبار. بدلا من البدء من خلال التفكير "لدي هذه القطعة من دوم وأريد أن تجعل من تفعل X"، عليك أن تبدأ مع ما تريد تحقيقه، ثم يذهب نحو تصميم التطبيق الخاص بك، ثم انتقل أخيرا إلى تصميم وجهة نظركم.

2. لا زيادة مسج مع أنغولارجس

وبالمثل، لا تبدأ مع فكرة أن مسج لا X، Y، Z، لذلك أنا فقط إضافة أنغولارجس على رأس ذلك للنماذج وأجهزة التحكم. هذا هو مغريا حقا عندما كنت بدأت للتو، وهذا هو السبب أنا أوصي دائما أن المطورين أنغولارجس جديدة لا تستخدم مسج على الإطلاق، على الأقل حتى تعتاد على فعل الأشياء "الزاوي الطريق".

لقد رأيت العديد من المطورين هنا وعلى القائمة البريدية إنشاء هذه الحلول المتقدمة مع الإضافات مسج 150 أو 200 خطوط من التعليمات البرمجية التي ثم الغراء في أنغولارجس مع مجموعة من الاستدعاءات و $apply s التي هي مربكة وملتوية. ولكن في نهاية المطاف الحصول على العمل! والمشكلة هي أنه في معظم الحالات التي المساعد مسج يمكن إعادة كتابة في أنغولارجس في جزء صغير من التعليمات البرمجية، حيث يصبح فجأة كل شيء مفهومة ومباشرة.

وخلاصة القول هو هذا: عند حل، أولا "التفكير في أنغولارجس". إذا كنت لا تستطيع التفكير في حل، اطلب من المجتمع. إذا بعد كل ذلك ليس هناك حل سهل، ثم لا تتردد في الوصول إلى مسج. ولكن لا تدع جكري تصبح عكازا أو عليك أبدا إتقان أنغولارجس.

3. التفكير دائما من حيث العمارة

أولا نعرف أن تطبيقات صفحة واحدة هي التطبيقات . إنها ليست صفحات ويب. لذلك نحن بحاجة إلى التفكير مثل مطور من جانب الخادم بالإضافة إلى التفكير مثل مطور من جانب العميل. علينا أن نفكر في كيفية تقسيم التطبيق لدينا إلى الفردية، قابلة للتوسيع، قابلة للاختبار المكونات.

فكيف تفعل ذلك؟ كيف "تفكر في أنغولارجس"؟ وهنا بعض المبادئ العامة، على النقيض من مسج.

الرأي هو "السجل الرسمي"

في جكري، نقوم بتغيير طريقة العرض برمجيا. يمكن أن يكون لدينا القائمة المنسدلة المعرفة بأنها 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>

في مسج، في منطق التطبيق لدينا، ونحن تفعيله مع شيء من هذا القبيل:

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

عندما ننظر فقط إلى وجهة النظر، فإنه ليس من الواضح على الفور أن هناك أي وظيفة هنا. للتطبيقات الصغيرة، وهذا أمر جيد. ولكن بالنسبة للتطبيقات غير تافهة، الأمور بسرعة الحصول على مربكة ويصعب الحفاظ عليها.

في أنغولارجس، على الرغم من أن الرأي هو السجل الرسمي من وظيفة القائم على الرأي. سيكون ul مثل هذا بدلا من ذلك:

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

هذين تفعل الشيء نفسه، ولكن في النسخة أنغولارجس أي شخص يبحث في قالب يعرف ما من المفترض أن يحدث. كلما جاء عضو جديد في فريق التطوير على متن الطائرة، وقالت انها يمكن أن ننظر في هذا ومن ثم نعرف أن هناك توجيه يسمى dropdownMenu تعمل على ذلك؛ أنها لا تحتاج إلى إينتوت الجواب الصحيح أو فرز من خلال أي رمز. وقال لنا الرأي ما كان من المفترض أن يحدث. نظافة أكثر.

المطورين الجدد ل أنغولارجس غالبا ما تسأل سؤالا مثل: كيف أجد كل الروابط من نوع معين وإضافة توجيه عليها. المطور دائما فلابيرغاستد عندما أردنا: أنت لا. ولكن السبب كنت لا تفعل ذلك هو أن هذا هو مثل نصف مسج، نصف أنغولارجس، وليس جيدا. المشكلة هنا هي أن المطور يحاول "القيام مسج" في سياق أنغولارجس. هذا لن يذهب إلى العمل بشكل جيد. وجهة النظر هي السجل الرسمي. خارج توجيه (أكثر على هذا أدناه)، وأبدا، أبدا، أبدا تغيير دوم. وتطبق التوجيهات في الرأي ، لذلك النية واضحة.

تذكر: لا تقم بتصميم، ثم ترميز. يجب عليك المهندس المعماري، ومن ثم تصميم.

ربط البيانات

هذا هو إلى حد بعيد واحدة من أكثر الميزات رهيبة من أنغولارجس ويقطع الكثير من الحاجة إلى القيام أنواع من التلاعب دوم ذكرت في القسم السابق. سوف أنغولارجس تحديث تلقائيا وجهة نظرك بحيث لم يكن لديك ل! في جكري، نرد على الأحداث ثم نقوم بتحديث المحتوى. شيء مثل:

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

بالنسبة إلى طريقة العرض التي تبدو كما يلي:

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

وبصرف النظر عن خلط المخاوف، لدينا أيضا نفس المشاكل التي تشير إلى القصد الذي ذكرت من قبل. ولكن الأهم من ذلك، كان علينا أن مرجع يدويا وتحديث عقدة دوم. وإذا أردنا حذف إدخال سجل، يجب علينا أن نصدر شفرة ضد دوم لذلك أيضا. كيف يمكننا اختبار المنطق بعيدا عن دوم؟ وماذا لو أردنا تغيير العرض التقديمي؟

هذا فوضوي قليلا و تافه ضعيفة. ولكن في أنغولارجس، يمكننا القيام بذلك:

$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>

والآن بدلا من استخدام قائمة غير مرتبة، ونحن نستخدم صناديق التنبيه بوتستراب. ولم يكن لدينا لتغيير رمز وحدة التحكم! ولكن الأهم من ذلك، بغض النظر عن مكان أو كيف يحصل على تحديث السجل، وسوف تتغير طريقة العرض أيضا. تلقائيا. أنيق!

على الرغم من أنني لم تظهر هنا، البيانات ملزمة في اتجاهين. لذلك يمكن أيضا أن تكون رسائل السجل قابلة للتحرير في العرض فقط من خلال القيام بذلك: <input ng-model="entry.msg" /> . وكان هناك الكثير من الابتهاج.

طبقة نموذجية متميزة

في مسج، دوم هو نوع من مثل النموذج. ولكن في أنغولارجس، لدينا طبقة نموذج منفصلة يمكننا إدارة بأي شكل من الأشكال نريد، بشكل مستقل تماما عن وجهة النظر. وهذا يساعد على البيانات المذكورة أعلاه ملزمة، ويحافظ على فصل المخاوف ، ويدخل قابلية أكبر بكثير. ذكرت إجابات أخرى هذه النقطة، لذلك أنا سوف مجرد ترك الأمر في ذلك.

فصل المخاوف

وجميع التعادل أعلاه في هذا الموضوع فوق مقوس: إبقاء المخاوف الخاصة بك منفصلة. وجهة نظرك بمثابة السجل الرسمي لما يفترض أن يحدث (في معظمها). يمثل النموذج بياناتك؛ لديك طبقة خدمة لأداء المهام التي يمكن إعادة استخدامها؛ يمكنك التلاعب دوم وزيادة وجهة نظرك مع التوجيهات. وكنت الغراء كل ذلك جنبا إلى جنب مع وحدات التحكم. وقد ذكر هذا أيضا في إجابات أخرى، والشيء الوحيد الذي أود أن أضيف يتعلق قابلية الاختبار، والتي مناقشتها في قسم آخر أدناه.

حقن التبعية

لمساعدتنا على الخروج مع فصل المخاوف هو حقن التبعية (دي). إذا كنت تأتي من لغة الخادم (من جافا إلى فب ) ربما كنت على دراية بهذا المفهوم بالفعل، ولكن إذا كنت رجل من جانب العميل القادمة من مسج، وهذا المفهوم يمكن أن يبدو أي شيء من سخيفة لزوم لها إلى محب . لكنها ليست كذلك. :-)

من منظور واسع، يعني دي أنه يمكنك أن تعلن مكونات بحرية جدا ومن ثم من أي عنصر آخر، فقط أسأل عن مثيل منه وأنه سيتم منح. لم يكن لديك لمعرفة حول تحميل النظام، أو مواقع الملفات، أو أي شيء من هذا القبيل. قد لا تكون القوة مرئية على الفور، ولكن سأقدم مثالا واحدا فقط (شائع): الاختبار.

لنفترض في طلبنا أننا نحتاج إلى خدمة تقوم بتخزين التخزين من جانب الخادم من خلال واجهة برمجة تطبيقات ريست ، وبناء على حالة التطبيق، فإن التخزين المحلي كذلك. عند تشغيل الاختبارات على وحدات التحكم لدينا، ونحن لا نريد أن يكون على التواصل مع الخادم - نحن اختبار وحدة تحكم ، بعد كل شيء. يمكننا فقط إضافة خدمة وهمية من نفس الاسم كما لدينا عنصر الأصلي، و حاقن سيضمن أن لدينا تحكم يحصل وهمية واحدة تلقائيا-لدينا تحكم لا و تحتاج لا تعرف الفرق.

جار الحديث عن الاختبار ...

4. يحركها اختبار التنمية - دائما

هذا هو حقا جزء من القسم 3 على الهندسة المعمارية، ولكن من المهم جدا أن أضعه كقسم أعلى مستوى خاص به.

من بين كل من العديد من الإضافات مسج كنت قد رأيت، المستخدمة، أو مكتوبة، كم منهم كان جناح اختبار المرافق؟ ليست كثيرة جدا لأن جكري ليست قابلة جدا لذلك. ولكن أنغولارجس هو.

في مسج، والطريقة الوحيدة لاختبار في كثير من الأحيان لإنشاء المكون بشكل مستقل مع صفحة عينة / تجريبي التي يمكن أن اختباراتنا إجراء التلاعب دوم. حتى ذلك الحين لدينا لتطوير عنصر على حدة ومن ثم دمجه في التطبيق لدينا. كيف غير مريح! الكثير من الوقت، عند تطوير مع مسج، نختار التكرارية بدلا من التنمية يحركها الاختبار. ومن الذي يمكن أن يلومنا؟

ولكن لأن لدينا فصل المخاوف، يمكننا أن نفعل التنمية يحركها اختبار تكرارا في أنغولارجس! على سبيل المثال، لنفترض أننا نريد توجيها فائق البساطة للإشارة في القائمة لدينا إلى مسارنا الحالي. يمكننا أن نعلن ما نريد في وجهة نظر طلبنا:

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

حسنا، الآن يمكننا كتابة اختبار لعدم وجود التوجيه when-active :

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/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. من الناحية المفاهيمية، لا يتم تعبئتها توجيهات مسج

ستسمع في كثير من الأحيان "لا تفعل سوى معالجة دوم في توجيه". هذه ضرورة. تعامل مع الاحترام الواجب!

ولكن دعنا نغوص أعمق قليلا ...

بعض التوجيهات مجرد تزيين ما هو بالفعل في الرأي (أعتقد ngClass )، وبالتالي في بعض الأحيان تفعل دوم التلاعب على الفور ثم يتم في الأساس. ولكن إذا كان التوجيه مثل "القطعة" وله قالب، فإنه ينبغي أيضا احترام فصل المخاوف. أي أن القالب ينبغي أن يظل مستقلا إلى حد كبير عن تنفيذه في وظائف الوصلة ووحدة التحكم.

أنغولارجس يأتي مع مجموعة كاملة من الأدوات لجعل هذا من السهل جدا. مع ngClass يمكننا تحديث حيوي الطبقة؛ ngModel يسمح في اتجاهين البيانات ملزمة؛ ngShow و ngHide برمجيا إظهار أو إخفاء عنصر. وغيرها الكثير - بما في ذلك تلك التي نكتبها بأنفسنا. وبعبارة أخرى، يمكننا أن نفعل كل أنواع الذهول دون التلاعب دوم. وكلما كان التلاعب أقل دوم، فإن التوجيهات الأسهل هي اختبار، وأسهل أنها على غرار، وأسهل أنها لتغيير في المستقبل، وأكثر قابلة لإعادة الاستخدام القابلة للتوزيع هي.

أرى الكثير من المطورين الجدد إلى أنغولارجس باستخدام توجيهات كمكان لرمي حفنة من مسج. وبعبارة أخرى، يعتقدون "لأنني لا أستطيع أن أفعل التلاعب دوم في وحدة تحكم، وسوف تأخذ هذا الرمز وضعه في توجيه". في حين أن هذا بالتأكيد هو أفضل بكثير، فإنه غالبا ما لا تزال خاطئة .

فكر في المسجل المبرمج في القسم 3. حتى لو وضعنا ذلك في توجيه، ونحن لا تزال تريد أن تفعل ذلك "الطريق الزاوي". فإنه لا يزال لا يأخذ أي التلاعب دوم! هناك الكثير من الأوقات عندما التلاعب دوم ضروري، لكنه الكثير نادرة مما كنت اعتقد! قبل القيام بالتلاعب دوم في أي مكان في التطبيق الخاص بك، اسأل نفسك إذا كنت حقا بحاجة إلى. قد تكون هناك طريقة أفضل.

وإليك مثال سريع يظهر النمط الذي أراه في أغلب الأحيان. نريد زر تبديل. (ملاحظة: هذا المثال هو قليلا مفتعلة و سكوش مطول لتمثيل الحالات الأكثر تعقيدا التي يتم حلها في بالضبط نفس الطريقة.)

.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. أولا، مسج لم يكن ضروريا. لا يوجد شيء فعلنا هنا التي تحتاج مسج على الإطلاق!
  2. ثانيا، حتى لو كان لدينا بالفعل مسج على صفحتنا، ليس هناك سبب لاستخدامه هنا. يمكننا ببساطة استخدام angular.element لا تزال تعمل عند إسقاطها في المشروع الذي لا يملك مسج.
  3. ثالثا، حتى على افتراض مطلوب مسج لهذا التوجيه للعمل، سوف جكليت ( angular.element ) دائما استخدام مسج إذا تم تحميله! لذلك نحن بحاجة إلى عدم استخدام $ - يمكننا فقط استخدام angular.element .
  4. رابعا، ترتبط ارتباطا وثيقا بالثالث، هو أن عناصر جكليت لا يلزم أن تكون ملفوفة في $ - element الذي تم تمريره إلى وظيفة link سيكون بالفعل عنصر مسج!
  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;
            };
        }
    };
});

مرة أخرى، فإن عناصر النموذج موجودة في القالب، لذا يمكنك (أو المستخدمين) تبديلها بسهولة لأحد الأنماط التي تلائم أي نمط ضروري، ولا يجب أن يتم لمس المنطق . ريوزابيليتي - بوم!

ولا تزال هناك كل تلك الفوائد الأخرى، مثل الاختبار - فإنه من السهل! بغض النظر عن ما هو في القالب، لم يتم لمس أبي الداخلية التوجيه أبدا، لذلك إعادة بيعها من السهل. يمكنك تغيير القالب بقدر ما تريد دون لمس التوجيه. وبغض النظر عن ما قمت بتغييره، لا تزال الاختبارات الخاصة بك تمر.

w00t!

حتى إذا كانت التوجيهات ليست مجرد مجموعات من وظائف مثل مسج، ما هي؟ التوجيهات هي في الواقع تمديدات هتمل . إذا هتمل لا تفعل شيئا تحتاج إلى القيام به، يمكنك كتابة توجيه للقيام بذلك بالنسبة لك، ومن ثم استخدامه تماما كما لو كان جزءا من هتمل.

وبعبارة أخرى، إذا كان أنغولارجس لا تفعل شيئا من خارج منطقة الجزاء، والتفكير كيف الفريق أن يحقق ذلك لتناسب الحق في مع ngClick ، ngClass ، وآخرون.

ملخص

لا تستخدم حتى مسج. لا حتى تضمينه. وسوف تعيقك. وعندما تأتي إلى المشكلة التي كنت تعتقد أنك تعرف كيفية حل في مسج بالفعل، قبل أن تصل إلى $ ، في محاولة للتفكير في كيفية القيام بذلك ضمن حدود أنغولارجس. إذا كنت لا تعرف، نسأل! 19 مرات من أصل 20، وأفضل طريقة للقيام بذلك لا تحتاج مسج ومحاولة حلها مع نتائج مسج في المزيد من العمل بالنسبة لك.




حتمية → إعلانية

في مسج، يتم استخدام محددات للعثور على عناصر دوم ثم ربط / تسجيل معالجات الحدث لهم. عند تشغيل حدث ما، يتم تنفيذ هذا الرمز (إمبيراتيف) لتحديث / تغيير دوم.

في أنغولارجس، تريد التفكير في طرق العرض بدلا من عناصر دوم. المشاهدات هي (إعلانية) هتمل التي تحتوي على توجيهات أنغولارجس. وضعت التوجيهات معالجات الحدث وراء الكواليس بالنسبة لنا وتعطينا داتابيندينغ ديناميكية. نادرا ما تستخدم المحددات، وبالتالي فإن الحاجة لمعرفات (وبعض أنواع الطبقات) تتضاءل إلى حد كبير. ترتبط المشاهدات بنماذج (عبر نطاقات). المشاهدات هي إسقاط للنموذج. الأحداث تغير النماذج (أي البيانات، خصائص النطاق)، والآراء التي تقدم تلك النماذج تحديث "تلقائيا".

في أنغولارجس، فكر في النماذج، بدلا من عناصر دوم المحددة في مسج التي تحمل بياناتك. فكر في وجهات النظر على أنها توقعات لتلك النماذج، بدلا من تسجيل رد فعل للتلاعب بما يراه المستخدم.

فصل المخاوف

جكري توظف جافا سكريبت غير مزعجة - يتم فصل السلوك (جافا سكريبت) من بنية (هتمل).

يستخدم أنغولارجس وحدات التحكم والتوجيهات (كل منها يمكن أن يكون لها وحدة تحكم خاصة بهم، و / أو تجميع وربط وظائف) لإزالة السلوك من وجهة نظر / هيكل (هتمل). الزاوي أيضا الخدمات والمرشحات للمساعدة في فصل / تنظيم التطبيق الخاص بك.

انظر أيضا https://.com/a/14346528/215945

تصميم التطبيق

نهج واحد لتصميم تطبيق أنغولارجس:

  1. فكر في نماذجك. إنشاء خدمات أو كائنات جافا سكريبت الخاصة بك لتلك النماذج.
  2. فكر في الطريقة التي تريد بها عرض نماذجك - وجهات نظرك. إنشاء قوالب هتمل لكل مشاهدة، وذلك باستخدام التوجيهات اللازمة للحصول على دينابيندينغ ديناميكية.
  3. إرفاق وحدة تحكم إلى كل عرض (باستخدام نغ-فيو والتوجيه، أو نغ-كونترولر). هل لديك وحدة تحكم تجد / الحصول على أي بيانات نموذج ما يحتاج العرض للقيام بعملها. جعل وحدات تحكم رقيقة قدر الإمكان.

الميراث النموذجي

يمكنك أن تفعل الكثير مع مسج دون معرفة كيفية عمل جافاسكريبت النموذج الأولي الميراث. عند تطوير تطبيقات أنغولارجس، سوف تجنب بعض المزالق الشائعة إذا كان لديك فهم جيد للميراث جافاسكريبت. القراءة الموصى بها: ما هي الفروق الدقيقة في نطاق النموذج الأولي / الميراث النموذجي في أنغولارجس؟




أنغولارجس مقابل مسج

أنغولارجس و جكري اعتماد إيديولوجيات مختلفة جدا. إذا كنت قادما من جكري قد تجد بعض الاختلافات من المستغرب. الزاوي قد تجعلك غاضبا.

هذا أمر طبيعي، يجب أن تدفع من خلال. الزاوي يستحق كل هذا العناء.

الفرق الكبير (تلدر)

جكري يعطيك مجموعة أدوات لاختيار بت التعسفي من دوم وإجراء تغييرات مخصصة لهم. يمكنك أن تفعل إلى حد كبير أي شيء تريد قطعة قطعة.

بدلا من ذلك أنجولارجس يعطيك مترجم .

ما يعنيه هذا هو أن أنغولارجس يقرأ دوم الخاص بك كامل من أعلى إلى أسفل ويعامل على أنها رمز، حرفيا كما تعليمات للمترجم. كما يجتاز دوم، فإنه يبحث عن توجيهات محددة ( توجيهات المترجم) التي تخبر مترجم أنغولارجس كيفية التصرف وما يجب القيام به. التوجيهات عبارة عن أشياء صغيرة مملوءة بجافا سكريبت يمكن أن تتطابق مع السمات أو العلامات أو الفئات أو حتى التعليقات.

عندما يحدد مترجم أنغلار أن قطعة من دوم تطابق توجيه معين، فإنه يستدعي الدالة التوجيه، ويمر عليه عنصر دوم، أي سمات، نطاق $ الحالي (وهو متغير المحلي مخزن)، وبعض بت مفيدة أخرى. قد تحتوي هذه السمات على تعبيرات يمكن تفسيرها من قبل التوجيه، والتي تخبرها عن كيفية العرض، وعندما يجب إعادة رسم نفسها.

يمكن توجيهات ثم سحب بدوره في مكونات الزاوي إضافية مثل وحدات تحكم، والخدمات، وما يخرج الجزء السفلي من المترجم هو تطبيق ويب شكلت بالكامل، السلكية حتى وعلى استعداد للذهاب.

وهذا يعني أن الزاوي هو قالب مدفوعة . يحرك النموذج جافا سكريبت، وليس العكس. هذا هو عكس جذري للأدوار، وعكس كامل من جافاسكريبت غير مزعجة كنا قد كتبت على مدى السنوات ال 10 الماضية أو نحو ذلك. هذا يمكن أن يستغرق بعض التعود على.

إذا كان هذا يبدو أنه قد يكون مفرطا في التقييد والحد، لا شيء يمكن أن يكون أبعد من الحقيقة. لأن أنغولارجس يعامل هتمل الخاص بك كما رمز، وتحصل على مستوى هتمل تحبب في تطبيق الويب الخاص بك . كل شيء ممكن، ومعظم الأمور من المستغرب سهلة بمجرد إجراء بعض قفزات المفاهيمية.

دعونا ننتقل إلى نتيغ شجاع.

أولا، الزاوي لا يحل محل مسج

الزاوي ومسج تفعل أشياء مختلفة. أنغولارجس يعطيك مجموعة من الأدوات لإنتاج تطبيقات الويب. جكري يعطيك أساسا أدوات لتعديل دوم. إذا كان جكري موجودا على صفحتك، فسوف تستخدم أنغولارجس تلقائيا. إذا لم يكن، أنغولارجس السفن مع مسج لايت، وهو خفض أسفل، ولكن لا يزال يمكن استخدامها تماما نسخة من مسج.

ميسكو يحب مسج ولا يعترض عليك استخدامه. ومع ذلك سوف تجد كما كنت مسبقا أن تتمكن من الحصول على كل ما تبذلونه من العمل بكثير القيام به باستخدام مزيج من نطاق والقوالب والتوجيهات، ويجب أن تفضل هذا العمل حيثما كان ذلك ممكنا لأن التعليمات البرمجية الخاصة بك وسوف تكون أكثر انفصالا، وأكثر شكلي، وأكثر من ذلك الزاوي.

إذا كنت تستخدم مسج، يجب أن لا يرش عليه في كل مكان. المكان الصحيح للتلاعب دوم في أنغولارجس هو في توجيه. المزيد عن هذه في وقت لاحق.

جافاسكريبت غير مزعجة مع محددات مقابل قوالب ديكلاراتيف

يتم تطبيق مسج عادة بشكل غير مزعج. يتم ربط شفرة جافا سكريبت في الرأس (أو التذييل)، وهذا هو المكان الوحيد المذكور. نحن نستخدم محددات لاختيار بت من الصفحة وكتابة الإضافات لتعديل تلك الأجزاء.

جافا سكريبت قيد التحكم. هتمل له وجود مستقل تماما. يبقى هتمل الخاص بك الدلالي حتى بدون جافا سكريبت. سمات أونكليك هي ممارسة سيئة للغاية.

واحدة من الأشياء الأولى ستلاحظ حول أنغولارجس هو أن السمات المخصصة في كل مكان . سيتم هتمل هتمل الخاص بك مع سمات نغ، والتي هي أساسا على كليك سمات على المنشطات. هذه هي التوجيهات (توجيهات مترجم)، وهي واحدة من الطرق الرئيسية التي يتم توصيل النموذج إلى النموذج.

عندما ترى لأول مرة هذا قد يكون إغراء لكتابة أنغولارجس قبالة كما المدرسة القديمة تدخلي جافا سكريبت (كما فعلت في البداية). في الواقع، أنغولارجس لا تلعب من قبل تلك القواعد. في أنغولارجس، HTML5 هو قالب. يتم تجميعها من قبل أنغولارجس لإنتاج صفحة الويب الخاصة بك.

هذا هو الفرق الكبير الأول. إلى جكري، صفحة الويب الخاصة بك هي دوم ليتم التلاعب بها. إلى أنغولارجس، هتمل الخاص بك هو رمز ليتم تجميعها. يقرأ أنغولارجس في صفحة الويب بأكملها ويجمعها حرفيا إلى صفحة ويب جديدة باستخدام المدمج في مترجم.

يجب أن يكون النموذج تصريحا؛ يجب أن يكون معناها واضحا ببساطة من خلال قراءتها. نحن نستخدم سمات مخصصة مع أسماء ذات مغزى. نحن تشكل عناصر هتمل جديدة، مرة أخرى مع أسماء ذات مغزى. مصمم مع الحد الأدنى من المعرفة هتمل وأي مهارة الترميز يمكن قراءة قالب أنغولارجس وفهم ما تقوم به. يمكنه إجراء تعديلات. هذا هو الطريق الزاوي.

القالب في مقعد القيادة.

واحدة من الأسئلة الأولى سألت نفسي عند بدء أنغولارجس وتشغيل من خلال الدروس هو "أين هو رمز بلدي؟" . لقد كتبت أي جافا سكريبت، ولكن لدي كل هذا السلوك. الجواب واضح. لأن أنغولارجس يجمع دوم، أنغولارجس هو معالجة هتمل الخاص بك كما التعليمات البرمجية. لكثير من الحالات البسيطة انها غالبا ما تكون كافية لمجرد كتابة قالب والسماح أنغولارجس تجميعه في تطبيق بالنسبة لك.

يقوم النموذج بتشغيل تطبيقك. انها تعامل على أنها دسل . يمكنك كتابة مكونات أنغولارجس، وسوف أنغولارجس رعاية سحبها في وجعلها متاحة في الوقت المناسب على أساس هيكل القالب الخاص بك. هذا هو مختلف جدا لنمط مفك القياسية، حيث القالب هو فقط للإخراج.

انها أكثر مماثلة ل زسلت من روبي على القضبان على سبيل المثال.

هذا هو انقلاب جذري من السيطرة التي تأخذ بعض التعود على.

توقف عن محاولة قيادة تطبيقك من جافا سكريبت. السماح للقالب دفع التطبيق، والسماح أنغولارجس رعاية الأسلاك المكونات معا. هذا هو أيضا الطريق الزاوي.

هتمل الدلالي مقابل النماذج الدلالية

مع مسج يجب أن تحتوي صفحة هتمل على محتوى دلالي دلالي. إذا تم إيقاف تشغيل جافا سكريبت (بواسطة مستخدم أو محرك بحث)، فلا يزال المحتوى متاحا لك.

لأن أنغولارجس يعامل صفحة هتمل كقالب. القالب ليس من المفترض أن يكون الدلالي كما يتم تخزين المحتوى الخاص بك عادة في النموذج الخاص بك الذي يأتي في نهاية المطاف من أبي الخاص بك. أنجولارجس يجمع دوم الخاص بك مع نموذج لإنتاج صفحة ويب الدلالية.

لم يعد مصدر هتمل الدلالي، بدلا من ذلك، أبي الخاص بك و دوم المترجمة هي الدلالي.

في أنغولارجس، وهذا يعني أن يعيش في النموذج، هتمل هو مجرد قالب، للعرض فقط.

عند هذه النقطة سيكون لديك على الأرجح جميع أنواع الأسئلة المتعلقة كبار المسئولين الاقتصاديين وإمكانية الوصول، وبحق عن ذلك. هناك قضايا مفتوحة هنا. سيعمل معظم قراء الشاشة الآن على تحليل جافا سكريبت. يمكن لمحركات البحث أيضا فهرسة محتوى أجاكسد . ومع ذلك، سوف تحتاج إلى التأكد من أنك تستخدم عناوين بريد بوستستيت وكان لديك ملف سيتماب لائق. انظر هنا لمناقشة هذه المسألة: https://.com/a/23245379/687677

فصل المخاوف (سوك) مقابل مفك

فصل المخاوف (سوك) هو النمط الذي نشأ على مدى سنوات عديدة من تطوير شبكة الإنترنت لمجموعة متنوعة من الأسباب بما في ذلك كبار المسئولين الاقتصاديين، وإمكانية الوصول وعدم توافق المتصفح. تبدو هكذا:

  1. هتمل - المعنى الدلالي. يجب أن تكون هتمل قائمة بذاتها.
  2. كس - التصميم، بدون كس تظل الصفحة قابلة للقراءة.
  3. جافاسكريبت - السلوك، بدون النص البرمجي يبقى المحتوى.

مرة أخرى، أنغولارجس لا تلعب من خلال قواعدها. في السكتة الدماغية، أنغولارجس يلغي مع عقد من الحكمة تلقى وبدلا من ذلك تنفذ نمط مفك التي القالب لم يعد الدلالي، ولا حتى قليلا.

تبدو هكذا:

  1. النموذج - تحتوي النماذج على بيانات دلالية. وعادة ما تكون النماذج كائنات جسون . توجد النماذج كخصائص كائن يسمى النطاق $. يمكنك أيضا تخزين وظائف أداة مفيد على نطاق $ الذي قوالب الخاص بك يمكن الوصول بعد ذلك.
  2. عرض - يتم كتابة وجهات النظر الخاصة بك في هتمل. وجهة النظر عادة لا تكون دلالية لأن البيانات الخاصة بك تعيش في النموذج.
  3. المراقب المالي - وحدة التحكم الخاصة بك هي وظيفة جافا سكريبت الذي هوكس الرأي إلى النموذج. وظيفتها هي تهيئة نطاق $. اعتمادا على التطبيق الخاص بك، قد تحتاج أو لا تحتاج إلى إنشاء وحدة تحكم. هل يمكن أن يكون العديد من وحدات التحكم على الصفحة.

مفك و سوك ليست على طرفي نقيض من نفس المقياس، فهي على محاور مختلفة تماما. سوك لا معنى له في سياق أنغولارجس. عليك أن تنسى والمضي قدما.

إذا كنت، مثل لي، كنت تعيش من خلال حروب المتصفح، قد تجد هذه الفكرة هجومية تماما. الحصول على أكثر من ذلك، فإنه سوف يكون يستحق كل هذا العناء، أعدك.

الإضافات مقابل التوجيهات

الإضافات تمديد مسج. توجيهات أنغولارجس توسيع قدرات المتصفح الخاص بك.

في مسج نحدد الإضافات عن طريق إضافة وظائف إلى jQuery.prototype. ثم ربط هذه في دوم عن طريق تحديد العناصر ودعوة البرنامج المساعد على النتيجة. والفكرة هي لتوسيع قدرات مسج.

على سبيل المثال، إذا كنت ترغب في دائري على صفحتك، قد تحدد قائمة غير مرتبة من الأرقام، وربما ملفوفة في عنصر الملاحة. يمكنك بعد ذلك كتابة بعض مسج لتحديد القائمة على الصفحة وتصفيفه باعتباره معرض مع مهلات للقيام الرسوم المتحركة انزلاق.

في أنغولارجس، نحدد التوجيهات. التوجيه هو الدالة التي ترجع كائن جسون. هذا الكائن يخبر أنغولارجس ما عناصر دوم للبحث عنها، وما هي التغييرات التي يجب إجراؤها عليها. يتم توصيل التوجيهات في قالب باستخدام سمات أو عناصر، التي اخترعتها. والفكرة هي توسيع قدرات هتمل مع سمات وعناصر جديدة.

طريقة أنغولارجس هو توسيع قدرات هتمل الأصلية تبحث. يجب كتابة هتمل الذي يشبه هتمل، مع تمديد سمات وعناصر مخصصة.

إذا كنت ترغب في دائري، فقط استخدام عنصر <carousel /> ، ثم تحديد توجيه لسحب في قالب، وجعل هذا العمل مصاصة.

الكثير من التوجيهات الصغيرة مقابل الإضافات الكبيرة مع مفاتيح التكوين

الاتجاه مع مسج هو كتابة الإضافات كبيرة كبيرة مثل صندوق الضوء الذي نحن ثم تكوين عن طريق تمرير في العديد من القيم والخيارات.

هذا خطأ في أنغولارجس.

استخدم مثال القائمة المنسدلة. عند كتابة البرنامج المساعد المنسدلة قد يميل إلى رمز في معالجات النقر، وربما وظيفة لإضافة في شيفرون الذي هو إما أعلى أو لأسفل، وربما تغيير فئة العنصر تكشفت، تظهر إخفاء القائمة، وجميع الاشياء المفيدة.

حتى تريد إجراء تغيير صغير.

لنفترض أن لديك قائمة تريد تكشفها عند التمرير. حسنا الآن لدينا مشكلة. وقد السلكية دينا المساعد لدينا فوق معالج بالنسبة لنا، ونحن في طريقنا للبحاجة إلى إضافة خيار التكوين لجعلها تتصرف بشكل مختلف في هذه الحالة المحددة.

في AngularJS نكتب توجيهات أصغر. سيكون لدينا توجيهات المنسدلة تكون صغيرة يبعث على السخرية. قد حفاظ على حالة مطوية، وتوفير طرق لأضعاف ()، تتكشف () أو تبديل (). ومن شأن هذه الطرق ببساطة بتحديث 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. إذا كنا نريد أن نجعل القضية استثناءات الحالة، قالب يجعل هذا سهلا.

إغلاق مقابل نطاق $

يتم إنشاء الإضافات مسج في الإغلاق. يتم الحفاظ على الخصوصية داخل هذا الإغلاق. والامر متروك لكم للحفاظ على سلسلة النطاق الخاص بك داخل هذا الإغلاق. كنت في الواقع سوى الوصول إلى مجموعة من العقد DOM تمريره في البرنامج المساعد كتبها مسج، بالإضافة إلى أي المتغيرات المحلية المحددة في الإغلاق وأي غلوبالس عرفتها. وهذا يعني أن الإضافات هي نفسها بنفسها تماما الواردة. هذا أمر جيد، ولكن يمكن الحصول على المقيد عند إنشاء تطبيق كامل. في محاولة لتمرير البيانات بين أقسام صفحة ديناميكية يصبح واجبا.

AngularJS ديه $ الأجسام النطاق. هذه هي الأشياء الخاصة التي تم إنشاؤها والتي تحتفظ بها AngularJS التي تقوم بتخزين النموذج الخاص بك. وبعض التوجيهات تفرخ نطاق $ الجديد، الذي افتراضيا يرث من $ نطاق التفاف لها باستخدام جافا سكريبت الميراث تنميط. الكائن $ نطاق يمكن الوصول إليها في وحدة تحكم وطريقة العرض.

هذا هو الجزء ذكي. لأن بنية $ نطاق الميراث يتبع تقريبا هيكل DOM، عناصر من الحصول على نطاقها الخاص، وأية نطاقات تحتوي على بسلاسة، وصولا إلى نطاق $ العالمي (وهي ليست نفس النطاق العالمي).

وهذا يجعل من الاسهل بكثير لتمرير البيانات حولها، ولتخزين البيانات على مستوى مناسب. إذا تكشفت في القائمة المنسدلة، فقط $ نطاق المنسدلة يحتاج إلى معرفة ذلك. إذا كان المستخدم بتحديث تفضيلاتهم، قد ترغب في تحديث نطاق $ العالمي، وسوف يكون تلقائيا نبهت أي نطاقات متداخلة الاستماع إلى تفضيلات المستخدم.

وهذا قد يبدو معقدا، في الواقع، مرة واحدة على الاسترخاء في ذلك، انها مثل الطيران. لا تحتاج لإنشاء الكائن نطاق $، AngularJS instantiates وتكوين لانها لكم، بشكل صحيح ومناسب على أساس التسلسل الهرمي القالب. ثم يجعل AngularJS في متناول مكون الخاص بك باستخدام السحر من حقن التبعية (أكثر على ذلك لاحقا).

يتغير DOM اليدوي مقابل ربط البيانات

في مسج إجراء جميع التغييرات DOM الخاص بك عن طريق اليد. يمكنك بناء عناصر DOM جديدة برمجيا. إذا كان لديك مجموعة JSON وأنت تريد وضعه إلى DOM، يجب كتابة دالة لتوليد HTML وأدخله.

في AngularJS يمكنك القيام بذلك أيضا، ولكن كنت مدعوة للاستفادة من ربط البيانات. تغيير النموذج الخاص بك، ولأن لا بد من DOM إليها عبر قالب DOM الخاص بك سيتم تحديث تلقائيا، لا تدخل المطلوبة.

لأن تتم من القالب، وذلك باستخدام إما سمة أو بناء الجملة متعرج ربط البيانات، فإنه من السهل عظمى للقيام به. هناك القليل فوق المعرفي المرتبط به لذلك ستجد نفسك تفعل ذلك في كل وقت.

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

يربط عنصر المدخلات ل $scope.user.name. سوف تحديث المدخلات تحديث قيمة في النطاق الحالي الخاص بك، والعكس بالعكس.

بطريقة مماثلة:

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

سيتم إخراج اسم المستخدم في فقرة. انها تعيش ملزم، لذلك إذا كان $scope.user.nameيتم تحديث قيمة، سوف القالب تحديث جدا.

اياكس كل الوقت

في مسج إجراء مكالمة اياكس بسيط إلى حد ما، لكنه ما زال شيئا كنت قد تفكر مرتين. هناك تعقيد وأضاف أن نفكر، وقسما كبيرا من النصي للمحافظة عليه.

في AngularJS، اياكس هو الافتراضي الخاص بك الذهاب الى حل ويحدث ذلك في كل وقت، تقريبا دون أن يلاحظ. يمكنك تضمين القوالب مع نانوغرام تشمل. يمكنك تطبيق قالب مع أبسط التوجيه المخصصة. يمكنك لف مكالمة أياكس في الخدمة وخلق نفسك جيثب الخدمة، أو فليكر الخدمة، والتي يمكنك الوصول إليها بكل سهولة مذهلة.

كائنات خدمة مقابل وظائف مساعد

في مسج، إذا كنا نريد لإنجاز مهمة صغيرة غير المتصلة دوم مثل سحب تغذية من API، ونحن قد كتابة دالة صغيرة للقيام بذلك في إغلاق دينا. هذا هو حل صحيح، ولكن ماذا إذا كنا نريد للوصول إلى تغذية في كثير من الأحيان؟ ماذا لو أردنا إعادة استخدام هذا الرمز في تطبيق آخر؟

AngularJS يعطينا كائنات خدمة.

الخدمات هي أشياء بسيطة التي تحتوي على وظائف والبيانات. هم دائما سنغلتونس، وهذا يعني لا يمكن أبدا أن يكون هناك أكثر من واحد منهم. نقول أننا نريد الوصول إلى API تجاوز المكدس، ونحن قد إرسال بريد Serviceالذي يحدد طرق للقيام بذلك.

دعونا نقول لدينا عربة التسوق. ونحن قد تحدد ShoppingCartService التي تحافظ على عربة لدينا، ويحتوي على طرق لإضافة وإزالة العناصر. لأن الخدمة غير المفردة، ويتم مشاركة جميع المكونات الأخرى، أي الكائن الذي يحتاج إلى أن يكتب إلى عربة التسوق وسحب البيانات منه. انها دائما نفس العربة.

كائنات خدمة مكونات AngularJS بذاتها التي يمكننا استخدامها وإعادة استخدامها كما نراه مناسبا. هم كائنات JSON بسيطة تحتوي على وظائف والبيانات. هم دائما سنغلتونس، لذلك إذا قمت بتخزين البيانات على الخدمة في مكان واحد، يمكنك الحصول على هذه البيانات من مكان آخر فقط عن طريق طلب نفس الخدمة.

حقن التبعية (DI) مقابل Instatiation - ويعرف أيضا باسم دي تأثيرات معكرونية

AngularJS تدير تبعيات لك. إذا كنت تريد كائن، ببساطة تشير إلى ذلك، وسوف AngularJS الحصول عليها بالنسبة لك.

حتى البدء في استخدام هذا، فإنه من الصعب أن أشرح فقط ما وقت نعمة كبيرة وهذا هو. شيء مثل AngularJS DI موجود داخل مسج.

DI يعني أنه بدلا من كتابة طلبك والأسلاك معا، يمكنك بدلا من ذلك تحديد مكتبة من المكونات، التي حددها سلسلة لكل منهما.

يقول لدي مكون يسمى "FlickrService" الذي يحدد طرق لسحب JSON يتغذى من فليكر. الآن، إذا كنت تريد أن تكتب وحدة تحكم التي يمكن الوصول إلى فليكر، أنا فقط بحاجة إلى الرجوع إلى "FlickrService" بالاسم عندما أعلن وحدة تحكم. سوف AngularJS رعاية instantiating عنصر وجعلها متاحة للتحكم بلدي.

على سبيل المثال، وهنا يمكنني تحديد خدمة:

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

الآن عندما أريد أن استخدام هذه الخدمة أنا فقط أشير إليها بالاسم من هذا القبيل:

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

سيتعرف AngularJS أن هناك حاجة إلى وجوه FlickrService إنشاء مثيل وحدة تحكم، وسوف توفر واحد بالنسبة لنا.

هذا يجعل الأمور الأسلاك معا من السهل جدا، والى حد كبير يقضي على أي اتجاه نحو تأثيرات معكرونية. لدينا قائمة كاملة من المكونات، وAngularJS يسلم منهم لنا واحدا تلو الآخر، وعندما كنا في حاجة إليها.

الهندسة المعمارية خدمة وحدات

مسج يقول القليل جدا عن كيف يجب أن تنظيم التعليمات البرمجية. AngularJS ديه الآراء.

AngularJS يمنحك الوحدات حيث يمكنك وضع التعليمات البرمجية. إذا كنت تكتب السيناريو الذي يتحدث إلى فليكر على سبيل المثال، قد ترغب في إنشاء وحدة نمطية فليكر التفاف كل ما تبذلونه من وظائف فليكر ذات الصلة في ويمكن وحدات تشمل وحدات أخرى (DI). التطبيق الرئيسي الخاص بك هو عادة وحدة نمطية، وهذا ينبغي أن يشمل جميع وحدات أخرى سيعتمد التطبيق الخاص بك على.

يمكنك الحصول على إعادة استخدام رمز بسيط، إذا كنت تريد أن تكتب تطبيق آخر بناء على فليكر، يمكنك تضمين فقط وحدة فليكر وفويلا، لديك حق الوصول إلى جميع وظائف فليكر المتعلقة بك في التطبيق الجديد الخاص بك.

وحدات تحتوي على مكونات AngularJS. عندما كنا تشمل وحدة نمطية، جميع المكونات في هذه الوحدة تصبح متاحة لنا كقائمة بسيطة حددها سلاسل فريدة من نوعها . يمكننا بعد ذلك حقن تلك المكونات إلى بعضها البعض باستخدام آلية حقن التبعية AngularJS ل.

لنلخص

AngularJS ومسج ليسوا أعداء. فمن الممكن لاستخدام مسج داخل AngularJS متقن. إذا كنت تستخدم AngularJS جيدا (قوالب،-ربط البيانات ونطاقها $، التوجيهات، وما إلى ذلك) وسوف تجد كنت في حاجة الى الكثير أقل مسج مما قد تتطلب خلاف ذلك.

الشيء الرئيسي هو أن ندرك القالب يدفع طلبك. التوقف عن محاولة لكتابة الإضافات الكبيرة التي تفعل كل شيء. بدلا من ذلك إرسال توجيهات الصغيرة التي تفعل شيئا واحدا، ثم كتابة قالب بسيط لسلك بعضهم البعض.

نفكر أقل مزعجة جافا سكريبت، وبدلا من التفكير في ملحقات HTML.

كتابي الصغير

حصلت متشوقة للغاية حول AngularJS، كتبت كتابا قصيرا على ذلك الذي كنت موضع ترحيب كبير لقراءة على الانترنت http://nicholasjohnson.com/angular-book/ . آمل أن يكون مفيدا.




هل تستطيع أن تصف النقلة النوعية التي هي ضرورية؟

ضرورة مقابل تصريحي

مع مسج تخبر DOM ما يجب أن يحدث، وخطوة خطوة. مع AngularJS تصفون ما هي النتائج التي تريدها لكن ليس في كيفية القيام بذلك. المزيد عن هذا هنا . أيضا، تحقق من إجابة كافة Rajcok ل.

كيف يمكنني معماري وتصميم العميل تطبيقات الويب بشكل مختلف؟

AngularJS هو إطار العميل بأكمله يستخدم MVC نمط (راجع لهم تمثيل رسومي ). ويركز بشكل كبير على فصل الاهتمامات.

ما هو أكبر الفرق؟ ما الذي يجب أن يتوقف عن فعل / استخدام. ما ينبغي أن أبدأ به / باستخدام بدلا من ذلك؟

مسج هي مكتبة

AngularJS هو إطار العميل جميلة والإختبار للغاية، الذي يجمع بين طن من الاشياء باردة مثل MVC، حقن التبعية ، ربط البيانات وأكثر من ذلك بكثير.

وهو يركز على فصل الاهتمامات واختبار ( وحدة اختبار واختبار نهاية إلى نهاية)، مما يسهل تطوير اختبار يحركها.

أفضل طريقة لبدء يمر البرنامج التعليمي على رهيبة . يمكنك الذهاب من خلال الخطوات في بضع ساعات. ومع ذلك، في حال كنت ترغب في السيطرة على المفاهيم الكامنة وراء الكواليس، وهي تشمل عدد لا يحصى من الإشارة لمزيد من القراءة.

هل هناك أي اعتبارات من جانب الخادم / قيود؟

تستطيع استخدامه على التطبيقات الموجودة حيث كنت تستخدم مسج النقي. ومع ذلك، إذا كنت تريد أن تأخذ كامل الاستفادة من AngularJS الميزات التي قد تنظر في الترميز جانب الملقم باستخدام راحة النهج.

وبذلك سوف تسمح لك للاستفادة من المصنع المورد ، مما يخلق فكرة مجردة من راحة جانب الخادم الخاص بك API ويجعل المكالمات من جانب الخادم (الحصول على، حفظ، حذف، وما إلى ذلك) من السهل بشكل لا يصدق.




لوصف "نقلة نوعية"، وأعتقد أن الجواب القصير يمكن أن يكون كافيا.

AngularJS يغير الطريقة التي تجد العناصر

في مسج ، يمكنك عادة استخدام محددات للعثور على العناصر، ومن ثم سلك عنها:
$('#id .class').click(doStuff);

في AngularJS ، يمكنك استخدام توجيهات للاحتفال العناصر مباشرة، لسلك لهم:
<a ng-click="doStuff()">

AngularJS لا تحتاج (أو تريد) عليك أن تجد العناصر باستخدام محددات - الفرق الأساسي بين AngularJS في jqLite مقابل كاملة مسج هو أن jqLite لا يدعم محددات .

لذلك عندما يقول الناس "لا تشمل مسج على الإطلاق"، انها أساسا لأنها لا تريد لك استخدام محددات. انهم يريدون لك أن تعلم كيفية استخدام توجيهات بدلا من ذلك. مباشرة، وليس اختيار!




مسج

مسج يجعل طويلة يبعث على السخرية أوامر جافا سكريبت مثل getElementByHerpDerpأقصر وعبر متصفح.

AngularJS

AngularJS يسمح لك لجعل الخاصة HTML العلامات / السمات التي تفعل أشياء التي تعمل بشكل جيد مع تطبيقات الويب الديناميكية (منذ تم تصميم HTML لصفحات ثابتة) الخاص بك.

تصحيح:

قائلا "لدي خلفية مسج كيف يمكنني التفكير في AngularJS؟" هو مثل قوله "لدي خلفية HTML كيف يمكنني التفكير في جافا سكريبت؟" حقيقة أن كنت طالبا السؤال يظهر لك على الأرجح لا يفهمون المقاصد الأساسية لهذه الموارد اثنين. هذا هو السبب في أنني اخترت أن الإجابة على السؤال ببساطة عن طريق مشيرا إلى الفرق الأساسي بدلا من الذهاب من خلال القائمة قائلا "AngularJS يجعل استخدام توجيهات بينما يستخدم مسج محددات CSS لجعل كائن مسج التي لا هذا وذاك ... الخ." . لا يحتاج هذا السؤال إجابة مطولة.

مسج هو وسيلة لجعل البرمجة جافا سكريبت في المتصفح أسهل. أوامر أقصر، عبر متصفح، الخ

AngularJS يمتد HTML، لذلك لم يكن لديك لوضع <div>كل مكان فقط لتقديم طلب. يجعل HTML فعلا العمل للتطبيقات وليس ما صممت من أجله، وهو ثابت، وصفحات الويب التعليمية. وهي تنجز هذا بطريقة ملتوية باستخدام جافا سكريبت، ولكن في الأساس هو امتداد لHTML، وليس جافا سكريبت.




مسج: كنت أفكر كثيرا حول "الاستعلام عن DOM " لعناصر DOM والقيام بشيء.

AngularJS: THE النموذج هو الحقيقة، وكنت أعتقد دائما من هذه الزاوية.

على سبيل المثال، عند الحصول على البيانات من الخادم الذي كنت تنوي عرضه في بعض التنسيق في DOM، في مسج، تحتاج إلى '1. البحث عن "مكان في DOM كنت تريد أن تضع هذه البيانات، و" 2. UPDATE / APPEND 'ذلك هناك من خلق عقدة جديدة أو مجرد وضع لها HTML داخلي . ثم عندما تريد تحديث وجهة النظر هذه، يمكنك ثم '3. FIND "موقع و" (4). تحديث'. هذه الدورة من إيجاد وتحديث كل ذلك في نفس سياق الحصول على البيانات والتنسيق من ذهب الخادم في AngularJS.

مع AngularJS لديك النموذج الخاص بك (جافا سكريبت الكائنات التي تستخدم بالفعل ل) وقيمة النموذج يخبرك عن نموذج (الواضح) وحول وجهة النظر، وعملية على نموذج ينتشر تلقائيا إلى العرض، لذلك كنت دون ' تي ان تفكر في ذلك. وسوف تجد نفسك في AngularJS لم يعد العثور على الأشياء في DOM.

لوضع بطريقة أخرى، في مسج، تحتاج إلى التفكير في محددات CSS، وهذا هو، أين هو divأو tdالتي تحتوي على فئة أو سمة، وما إلى ذلك، بحيث يمكنني الحصول HTML أو اللون أو قيمة، ولكن في AngularJS، سوف تجد نفسك في التفكير مثل هذا: ما أنا نموذج التعامل معها، وسوف تعيين قيمة النموذج إلى true. انك لم يكلف نفسه عناء نفسك ما إذا كانت وجهة النظر التي تعكس هذه القيمة هو مربع فحص أو يقيم في tdعنصر (تفاصيل كنت كثيرا ما يحتاج إلى التفكير في مسج).

ومع التلاعب DOM في AngularJS، تجد نفسك مضيفا التوجيهات والمرشحات، والتي يمكن ان يخطر لك من ملحقات HTML صالحة.

أكثر شيء واحد سوف تواجه في AngularJS: في مسج استدعاء وظائف مسج الكثير، في AngularJS، سوف AngularJS استدعاء وظائف، بحيث AngularJS سوف "اقول لكم كيف نفعل الأشياء، ولكن الفوائد تستحق العناء، لذلك AngularJS التعلم عادة ما يعني تعلم ما يريد AngularJS أو الطريقة التي AngularJS يتطلب أن تقديم مهامكم، وسوف ندعو وفقا لذلك. هذا هو واحد من الأشياء التي تجعل AngularJS إطار بدلا من المكتبة.




مسج هي مكتبة DOM التلاعب.

AngularJS هو إطار MV *.

في الواقع، AngularJS هي واحدة من عدد قليل جافا سكريبت MV * أطر (العديد من أدوات جافا سكريبت MVC لا تزال تقع تحت مكتبة الفئة).

كونه الإطار، تستضيف التعليمات البرمجية ويأخذ ملكية القرارات حول ما يجب استدعاء ومتى!

AngularJS نفسه يتضمن طبعة مسج لايت داخلها. حتى بالنسبة لبعض الأساسي اختيار DOM / التلاعب، وكنت حقا لم يكن لديك لتشمل مكتبة مسج (أنه يوفر العديد من بايت لتشغيل على الشبكة).

AngularJS لديه مفهوم "توجيهات" لDOM التلاعب وتصميم مكونات واجهة المستخدم التي يمكن إعادة استخدامها، لذلك يجب استخدامها كلما كنت تشعر بالحاجة للقيام DOM المتعلقة التلاعب الاشياء (توجيهات هي المكان الوحيد الذي يجب عليك كتابة رمز مسج أثناء استخدام AngularJS).

AngularJS ينطوي على بعض منحنى التعلم (أكثر من مسج :-).

-> للأي مطور القادمة من مسج الخلفية، فإن أول نصيحتي أن يكون إلى "تعلم جافا سكريبت كلغة الدرجة الأولى قبل أن يقفز على إطار الغنية مثل AngularJS!" تعلمت حقيقة أعلاه بالطريقة الصعبة.

حظا طيبا وفقك الله.




تلك هي بعض الإجابات لطيفة جدا، ولكن طويلة.

لتلخيص تجربتي:

  1. وحدات التحكم ومقدمي (الخدمات والمصانع وغيرها) لتعديل نموذج البيانات، NOT HTML.
  2. HTML وتوجيهات تحدد تخطيط وملزمة للنموذج.
  3. إذا كنت بحاجة إلى تبادل البيانات بين وحدات التحكم، إنشاء خدمة أو المصنع - فهي سنغلتونس التي يتم مشاركتها عبر التطبيق.
  4. إذا كنت بحاجة إلى القطعة HTML، إنشاء التوجيه.
  5. إذا كان لديك بعض البيانات وتحاول الآن لتحديث HTML ... توقف! تحديث النموذج، وتأكد من الالتزام HTML الخاص بك إلى النموذج.



انهم التفاح والبرتقال. كنت لا تريد مقارنتها. انهم شيئين مختلفين. AngularJs بالفعل مسج لايت بنيت في الذي يسمح لك لأداء التلاعب DOM الأساسية من دون حتى بما في ذلك نسخة مسج في مهب كامل.

مسج هو كل شيء عن التلاعب DOM. أنه لا يحل كل الآلام عبر متصفح خلاف ذلك سيكون لديك للتعامل مع كنها ليست الإطار الذي يسمح لك لتقسيم التطبيق إلى مكونات مثل AngularJS.

والشيء الجميل في AngularJs هو أنه يسمح لك لفصل / عزل التلاعب DOM في التوجيهات. هناك المدمج في توجيهات استعداد لتتمكن من استخدامها مثل نانوغرام النقر. يمكنك إنشاء توجيهات المخصصة الخاصة بك التي سوف تحتوي على كل ما تبذلونه من المنطق رأي أو التلاعب DOM لذلك لم يكن نهاية المطاف كود التلاعب تختلط DOM في وحدات تحكم أو الخدمات التي يجب أن تأخذ الرعاية من منطق الأعمال.

فواصل الزاوي أسفل التطبيق الخاص بك - وحدات تحكم - خدمات - المشاهدات - الخ

وهناك أكثر من شيء، وهذا التوجيه. انها السمة التي يمكن أن نعلق على أي عنصر DOM ويمكنك الذهاب المكسرات مع مسج داخلها دون الحاجة إلى القلق حول مسج بك يتعارض على الإطلاق مع مكونات AngularJs أو عبث مع هندسته المعمارية.

سمعت من ميتوب حضرت، وقال واحد من مؤسسي الزاوي عملوا بجد لفصل التلاعب DOM حتى لا تحاول إدراجها مرة أخرى.




الاستماع إلى البودكاست جافا سكريبت جابر: الحلقة رقم 32 الذي يضم المبدعين الأصلي من AngularJS: Misko Hevery وايجور مينار. يتحدثون كثيرا عن ما يشبه أن يأتي إلى AngularJS من خلفيات جافا سكريبت الأخرى، لا سيما مسج.

قدمت واحدة من النقاط التي وردت في بودكاست الكثير من الأشياء انقر بالنسبة لي مع النواحي لسؤالك:

MISKO : [...] واحدة من الأشياء التي فكرت بالكاد جدا في الزاوي هو، كيف يمكننا توفير الكثير من منافذ الخروج بحيث يمكنك الخروج وأساسا يجدوا طريقة للخروج من هذا. بالنسبة لنا، فإن الجواب هو هذا الشيء يسمى "توجيهات". ومع توجيهات، فإنك تصبح أساسا العادية القليل مسج جافا سكريبت، يمكنك أن تفعل ما تريد.

ايغور : حتى التفكير في توجيه مثل تعليمات للمترجم أن يقول أنه كلما واجهتم هذا عنصر معين أو هذه CSS في القالب، وعليك أن تبقي هذا النوع من رمز وهذا الرمز هو المسؤول عن عنصر وكل شيء تحت هذا العنصر في شجرة DOM.

يمكن الاطلاع على نص الحلقة كاملة متاح على الرابط المذكور أعلاه.

لذلك، للرد مباشرة على سؤالك: AngularJS هو -very- عنيد وهو إطار MV * صحيح. ومع ذلك، لا يزال بإمكانك أن تفعل كل الاشياء رائع حقا كنت تعرف والحب مع مسج داخل التوجيهات. انها ليست مسألة "كيف أفعل ما كنت في مسج؟" بقدر ما هو مسألة "كيف يمكنني استكمال AngularJS مع كل من الاشياء كنت تفعل في مسج؟"

انها حقا دولتين مختلفتين جدا للعقل.




أجد هذا السؤال مثيرة للاهتمام، لأن أول التعرض خطيرا للبرمجة جافا سكريبت كان نود.جي إس وAngularJS. أنا لم يتعلم مسج، وانا اعتقد ان هذا شيء جيد، لأنني لم يكن لديك لطرح فكرة أي شيء. في الحقيقة، أنا تجنب بنشاط حلول مسج لمشاكلي، وبدلا من ذلك، فقط نبحث عن "طريقة AngularJS" لحلها. لذا، أعتقد أن جوابي على هذا السؤال يغلي أساسا الى "أعتقد كمن لم يتعلم مسج" وتجنب أي إغراء لدمج مسج مباشرة (من الواضح AngularJS يستخدم ذلك إلى حد ما وراء الكواليس).




AngularJS ومسج:

AngularJs ومسج مختلفة تماما في كل مستوى باستثناء وظائف JQLite وسترون ذلك بمجرد البدء في تعلم الميزات AngularJs الأساسية (شرحت أدناه).

AngularJs هو إطار العميل الذي يقدم لإنشاء التطبيق العميل مستقل. مسج هي مكتبة العميل الذي لعب في جميع أنحاء DOM.

AngularJs كول المبدأ - إذا كنت تريد بعض التغييرات على واجهة المستخدم الخاص بك التفكير من منظور تغيير بيانات نموذج. تغيير بياناتك وUI سوف إعادة تقديم نفسها. لا تحتاج لألعب حولك DOM في كل مرة ما لم وحتى لا يكاد مطلوب منها، وأنه ينبغي التعامل معها أيضا من خلال توجيهات الزاوي.

للإجابة على هذا السؤال، أريد أن أشارك تجربتي في أول تطبيق المشاريع مع AngularJS. هذه هي السمات الأكثر رهيبة التي توفر الزاوي حيث نبدأ بتغيير لدينا مسج عقلية ونحصل على الزاوي مثل الإطار وليس المكتبة.

في اتجاهين ربط البيانات هو مدهش: كان لي الشبكة مع جميع وظائف UPDATE، DELTE، INSERT. لدي الكائن البيانات التي تربط نموذج الشبكة باستخدام NG-تكرار. تحتاج فقط إلى كتابة سطر واحد من التعليمات البرمجية جافا سكريبت بسيط لحذف وإدراج وهذا كل شيء. شبكة التحديثات تلقائيا بتغيير نموذج الشبكة على الفور. وظيفة التحديث هو الوقت الحقيقي، أي رمز لذلك. تشعر مدهش !!!

توجيهات قابلة لإعادة الاستخدام والسوبر: كتابة التوجيهات في مكان واحد واستخدامه خلال التطبيق. يا الهي!!! أنا استخدم هذه التوجيهات لالترحيل، التعابير المنطقية، التصديقات، وما إلى ذلك هو رائع حقا!

توجيه قوي: والامر متروك التطبيق الخاص بك كيف تريد استخدامه، ولكن ذلك يتطلب الأسطر القليلة جدا من التعليمات البرمجية لتوجيه الطلب لتحديد HTML وحدة تحكم (جافا سكريبت)

تحكم كبيرة: التحكم تعتني HTML الخاصة بهم، ولكن هذا الفصل يعمل بشكل جيد للحصول على الوظائف المشتركة كذلك. إذا كنت ترغب في استدعاء نفس الوظيفة على بنقرة زر واحدة على HTML الرئيسي، مجرد كتابة نفس اسم الدالة في كل وحدة تحكم وكتابة التعليمات البرمجية الفردية.

الإضافات: هناك العديد من الميزات الأخرى المماثلة مثل تظهر تراكب في التطبيق الخاص بك. أنت لا تحتاج إلى كتابة التعليمات البرمجية لذلك، ومجرد استخدام تراكب المساعد متوفرة كما WC-تراكب، وهذا تلقائيا رعاية جميع مدعوم (XHR) طلبات.

مثالية لل راحة الهندسة المعمارية: يجري الأطر كاملة يجعل AngularJS كبيرة للعمل مع بنية مريحة. للاتصال واجهات برمجة التطبيقات REST CRUD أسهل جدا و

الخدمات : اكتب الرموز الشائعة باستخدام الخدمات وأقل رمز في وحدات تحكم. خدمات فنية يمكن استخدامها لتبادل وظائف مشتركة بين وحدات تحكم.

التمدد : سيارة أجرة وسعت توجيهات HTML باستخدام توجيهات الزاوي. إرسال تعبيرات داخل أتش تي أم أل وتقييمها على وقت التشغيل. إنشاء توجيهات والخدمات الخاصة بك واستخدامها في مشروع آخر من دون أي جهد إضافي.




كما جافا سكريبت MV * مبتدئين والتركيز فقط على بنية التطبيق (وليس المسائل الخادم / العميل)، وأود أن أوصى بالتأكيد الموارد التالية (التي أنا مندهش لم يذكر حتى الآن): أنماط جافا سكريبت التصميم ، من خلال آدي عثماني ، كمقدمة لمختلف أنماط جافا سكريبت التصميم . تؤخذ المصطلحات المستخدمة في هذه الإجابة من المستند المرتبط أعلاه. أنا لا أريد أن أكرر ما صيغت بشكل جيد في إجابة مقبولة. بدلا من ذلك، هذه الإجابة وصلات إلى الخلفيات النظرية التي AngularJS الطاقة (ومكتبات أخرى).

مثلي، فسوف ندرك بسرعة أن AngularJS (أو Ember.js ، Durandal، وغيرها من MV * أطر لهذه المسألة) هو إطار معقد واحد تجميع العديد من أنماط مختلفة تصميم جافا سكريبت.

لقد وجدت أنه من الأسهل أيضا، لاختبار (1) الأصلي شفرة جافا سكريبت و (2) المكتبات الصغيرة لكل واحد من هذه الأنماط على حدة قبل الغوص في إطار عالمي واحد. وهذا ما سمح لي لفهم أفضل القضايا التي حاسمة ادريسيس إطار (لأنك واجهت شخصيا مع المشكلة).

فمثلا:

  • جافا سكريبت البرمجة وجوه المنحى (وهذا هو رابط بحث جوجل). وهي ليست مكتبة، ولكن بالتأكيد شرط مسبق لأي برمجة التطبيقات. ومن علمني تطبيقات أصلية من أنماط النموذج، منشئ، المفرد والديكور
  • مسج / تسطير ل نمط واجهة (مثل لWYSIWYG عن التلاعب DOM)
  • Prototype.js لل نموذج / منشئ / نمط mixin
  • RequireJS / Curl.js ل وحدة نمط / AMD
  • KnockoutJS ل ملاحظتها، نشر / الاشتراك نمط

ملاحظة: هذه القائمة ليست كاملة، ولا "أفضل المكتبات. ما يحدث لمجرد أن يكون المكتبات استعملتها. وتشمل هذه المكتبات أيضا أكثر أنماط، تلك المذكورة هي مجرد يركز على الرئيسية أو المقاصد الأصلية. إذا كنت تشعر شيء مفقود من هذه القائمة، من فضلك أذكر أنه في التعليقات، وسوف أكون سعيدا لإضافته.




في الواقع، إذا كنت تستخدم AngularJS، لا تحتاج مسج بعد الآن. AngularJS نفسه لديه والتوجيه ملزمة، وهي عبارة عن "استبدال" جيد جدا بالنسبة لمعظم الأشياء التي يمكنك القيام به مع مسج.

أنا عادة تطوير التطبيقات النقالة باستخدام AngularJS و قرطبة . الشيء الوحيد من مسج أنا في حاجة هو محدد.

بواسطة غوغلينغ، وأرى أن هناك قائمة بذاتها مسج وحدة نمطية محدد هناك. انها إز.

وقررت أن تجعل من مقتطف الشفرة الصغيرة التي مساعدتي بسرعة بدء موقع على شبكة الانترنت باستخدام AngularJS مع قوة محدد مسج (باستخدام إز).

أنا مشتركة قانون بلدي هنا: https://github.com/huytd/Sizzular