تعرف على كيفية إنشاء أول تطبيق Angular لك في 20 دقيقة

Angular هو إطار عمل JavaScript ، تم إنشاؤه بواسطة Misko Hevery وصيانته بواسطة Google. إنه MVC (Model View Vontroller). يمكنك زيارة الصفحة الرسمية لمعرفة المزيد عنها.

الآن ، أحدث إصدار من Angular هو 5.2.10. يوجد الجيل الأول 1.x والجيل الثاني 2.x ، والجيلان مختلفان تمامًا في هياكلهما وطرقهما. لا تقلق إذا شعرت بالارتباك بشأن الإصدار ، لأننا في هذه المقالة سنستخدم الجيل الثاني 2.x

جدول المحتويات

  • إضافة عنصر (تعرف على كيفية إرسال نموذج في Angular)
  • إزالة عنصر (تعرف على كيفية إضافة حدث في Angular)
  • الرسوم المتحركة الزاوية (تعرف على كيفية تحريك المكونات)

المتطلبات الأساسية:

  • Node.js

تحقق مما إذا كان node.js مثبتًا على جهاز الكمبيوتر الخاص بك. تعرف على المزيد حول التثبيت.

  • npm

npm (مدير حزمة العقدة) مثبت مع Node.js

تحقق من إصدار node.js :

node -v

npm:

npm -v

الزاوي CLI

يجب أن يكون لديك أحدث إصدار من Angular-CLI. تعرف على المزيد حول Angular CLI هنا ، واعثر على إرشادات التثبيت.

تثبيت Angular-cli:

npm install -g @angular/cli

وأخيرًا ، يجب أن يكون لديك:

  • معرفة أساسية بجافا سكريبت
  • أساسيات HTML و CSS

لا تحتاج إلى أي معرفة ب Angular.

الآن بعد أن أصبح لدينا البيئة لتشغيل تطبيق Angular ، فلنبدأ!

إنشاء أول تطبيق لدينا

سوف نستخدم angular-cli لإنشاء وتوليد مكوناتنا. سيولد خدمات وجهاز توجيه ومكونات وتوجيهات.

لإنشاء مشروع Angular جديد باستخدام Angular-cli ، ما عليك سوى تشغيل:

ng new my-app

سيتم إنشاء المشروع تلقائيًا. لنقم بإنشاء تطبيق المهام الخاص بنا!

ng new todo-app

ثم افتح الملفات في محرر النصوص الخاص بك. أنا أستخدم نص Sublime ، لكن يمكنك اختيار أي محرر.

إليك ما تبدو عليه بنية التطبيق:

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

ملاحظة: يستخدم Angular 2 TypeScript ، حيث تنتهي الملفات بامتداد “.ts” .

لإنشاء واجهة جميلة لتطبيقنا ، سنستخدم Bootstrap 4 Framework.

تضمين bootstrap cdn في index.html :

قم بتشغيل التطبيق في جهازك:

ng serve

سيتم تشغيل التطبيق في // localhost: 4200 /

كل شيء على ما يرام ؟!

لنقم الآن ببعض هيكلة HTML. سنستخدم فئات Bootstrap لإنشاء نموذج بسيط.

app.component.html :

Todo App
 Add

في app.component.css :

body{ padding: 0; margin: 0;
}form{ max-width: 25em; margin: 1em auto;}

للحصول على قيمة الإدخال في Angular 2 ، يمكننا استخدام التوجيه ngModel . يمكنك إدراج متغير كسمة داخل عنصر الإدخال.

لإنشاء متغير كسمة ، استخدم # متبوعًا باسم المتغير.

// get the value of the Variable
{{myVariable.value}}

احصل الآن على قيمة المتغير "todo":

{{todo.value}}

كل شيء على ما يرام ؟!

الآن علينا تخزين القيمة التي تم التقاطها من المدخلات. يمكننا إنشاء مصفوفة فارغة في app.component.ts داخل فئة AppComponent:

export class AppComponent { todoArray=[] }

ثم يتعين علينا إضافة حدث نقرة إلى زرنا يدفع القيمة التي تم التقاطها إلى " todoArray ".

app.component.html :

Add

في app.component.ts :

export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
استخدم console.log (this.todoArray) لرؤية قيمة الصفيف

إحضار البيانات من "todoArray"

Now we have to fetch data stored in “todosArray.” We will use the *ngFor directive to loop through the array and extract the data.

app.component.html:


    
    
     
  • {{todo}}
    •

After fetching data:

The data will now be fetched automatically when we click the add button.

Styling the app

I like to use Google-fonts and Material-icons, which are free to use.

Include Google fonts inside app.component.css:

/*Google fonts*/@import url('//fonts.googleapis.com/css?family=Raleway');

And Material-icons inside index.html:

After adding some styling to our app, it will look like this:

To use Material icons:

iconName

Add “delete” and “add” icons in app.component.html:

// put add icon inside "input-group-text" div
add
// and delete icon inside list item 
  • {{todo}}delete

    • For styles in app.component.css:

    /*Google fonts*/@import url('//fonts.googleapis.com/css?family=Raleway');
    body{ padding: 0; margin: 0;
    }form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

    Our app is almost done, but we need to add some features. A delete functionality should let users click a delete icon and delete an item. It would also be great to have the option to enter a new item with the return key, instead of clicking the add button.

    Deleting items

    To add the delete functionality, we will use the “splice” array method and a for loop. We will loop through “todoarray” and extract the item we want to delete.

    Add a (click) event to delete icon and give it “todo” as parameter :

  • {{todo}} delete

    • In app.component.ts:

    /*delete item*/ deleteItem(){ console.log("delete item") }

    When you click delete, this should show up in the console:

    Now we have to loop through “todoArray” and splice the item we clicked.

    In app.component.ts:

    /*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }

    The result:

    Awesome ?!!

    Entering to add items

    We can add a submit event to the form:

    (ngSubmit)="TodoSubmit()"

    We need to add the variable “#todoForm” to the form and give it “ngForm” as a value. In this case, we just have one field so we will just get a single value. If we have multiple fields, the submit event will return the values of all the fields in the form.

    app.component.html

    in app.component.ts

    // submit Form todoSubmit(value:any){ console.log(value) }

    Check the console. It will return an object of values:

    So now we have to push the returned value to “todoArray”:

    // submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } }

    Here we are ?. The value is inserted without needing to click the add button, just by clicking “enter”:

    One more thing. To reset the the form after submitting, add the “resetForm()” build-in method to submit the event.

    The form will reset after each submit now:

    Adding animations

    I like to add a little touch of animations. To add animation, import the animations components in your app.component.ts:

    import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

    Then add the animations property to “@component” decorator:

    @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),
    transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])
    ]})

    Now the items have a nice effect when they’re entered and deleted.

    All the code

    app.component.ts

    import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
    @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),
    transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])
    ]})export class AppComponent { todoArray=[]; todo; //todoForm: new FormGroup()
    addTodo(value){ if(value!==""){ this.todoArray.push(value) //console.log(this.todos) }else{ alert('Field required **') } }
    /*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }
    // submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } } }

    app.component.html

    Todo App
    add
    
      
     
    • {{todo}} delete
      •

    app.component.css

    /*Google fonts*/@import url('//fonts.googleapis.com/css?family=Raleway');
    body{ padding: 0; margin: 0;
    }form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em; overflow: hidden;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}

    We are done ?. You can find the files and code on Github.

    See the Demo

    Conclusion

    Angular is easier than you think. Angular is one of the best JavaScript libraries, and it has great support and a nice community. It also has tools that make working with Angular fast and easy, like Angular-cli.

    Subscribe to this mail-list to learn more about Angular.

    [email protected] (@hayanisaid1995) | Twitter

    The latest Tweets from [email protected] (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com

    Here are some of the best online courses to learn Angular for free:

    Angular 1.x

    • Shaping with Angular
    • Learn Angular

    الزاوي 2.x (موصى به)

    • تعلم Angular2 (كورسيترو)
    • قائمة تشغيل يوتيوب