---
title: Angular 2 Starter Project
localeTitle: الزاوي 2 كاتب المشروع
---
هذا البرنامج التعليمي سوف يبني مشروع بذور بسيط للغاية مع Angular2. سنبدأ مع أبسط التطبيقات الممكنة ثم نضيف المزيد من الوظائف.
## نظرة عامة
يتم إنشاء تطبيقات Angular 2 من خلال إنشاء قوالب HTML التي تحتوي على ترميز معين زاوي. ثم يتم إنشاء فئات لإدارة القوالب ويتم تغليف كل شيء في وحدة نمطية ، والتي قمت بتجميعها معاً لإنشاء التطبيق الخاص بك. يشار إلى هذه الوحدات على أنها **مكونات** .
يفسر الزاوي هذه الوحدات ويستخدمها لتقديم طلبك في المتصفح.
## تطبيق المبتدئين
دعونا نبدأ مع تطبيق الحد الأدنى. سنبدأ بتطبيق يحتوي على وحدة نمطية واحدة تتمثل مهمتها الوحيدة في عرض بعض النصوص.
سنبدأ بإنشاء مجلد جديد باسم "app".
`$ mkdir app
`
كما ذكرنا أعلاه ، سيبدأ تطبيقنا بوحدة نمطية واحدة ، أو **مكون** ، سيعرض بعض النص على الشاشة. يمكننا استخدام كل من جافا سكريبت الخالص أو TypeScript لعمل تطبيق زاوي 2. باستخدام TypeScript ، يكون من الأسهل والأكثر ملاءمة للمبرمج ![:wink:](//forum.freecodecamp.com/images/emoji/emoji_one/wink.png?v=2 ":غمزة:")
دعونا نتعلم كيفية إنشاء مكون باستخدام TypeScript.
أنشئ ملفًا باسم _`app.component.ts`_ كما هو موضح:
`` // app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '
`,
styles: [`
.counter {
width: 100%;
margin: auto;
background: darkgreen;
border-radius: 5px;
color: white;
padding: 20px;
text-align: center;
}
.counter h1 {
margin: 0;
padding: 20px;
font-size: 36px;
}
.counter button {
background: #f1c40f;
border: 0;
box-shadow: 0px 5px 0px #927608;
padding: 20px;
width: 100%;
outline: none;
border-radius: 5px;
color: darkgreen;
font-weight: bold;
}
.counter button:hover {
background: #a9890a;
cursor: pointer;
}
`]
})
export class IncrementClicker {
curClicks = 0;
incrementClicks() {
this.curClicks++;
}
}
```
Our component structure is similar to our previous one, but we've added a bit of functionality here. You will notice our class is no longer empty. We've added a variable to track the clicks as well as a function to increment them when the user clicks the button.
You can display properties from your class in your template using double braces such as: `{{ variableName }}`
We bind the button click event to our class function using Angulars Event Bindings.
```html
```
Notice that we've also added some styling to our components. This way everything is self-contained in this module. You may also include a `templateUrl` and/or `styleUrls` properties instead to extract the template and style rules to an external file and link them here.
Now we just need to update our `AppComponent` to include our new component:
```js
// app/app.component.ts
import { Component } from '@angular/core';
/* Nested Component */
import { IncrementClicker } from 'app/increment-clicker.component';
@Component({
selector: 'my-app',
directives: [IncrementClicker],
template: `
Free Code Camp Rocks!
`,
styles: [`
h1 { color: darkgreen; font-family: Arial, Helvetica, sans-serif;}
`]
})
export class AppComponent { }
```
To pull in our new `IncrementClicker` component we need to import it by including the class name as well as the location of the typescript file as we did on this line:
```js
import { IncrementClicker } from 'app/increment-clicker.component';
```
We then add the `IncrementClicker` *component* as a directive to the `AppComponent` module using:
```js
directives: [IncrementClicker],
``
وأخيرًا ، نضيف العلامة التي يتصل بها المكون في النموذج. لذلك ، سيتطابق المحدد في مكون `IncrementClicker` مع العلامة التي نريد أن يظهر فيها.
`js template:`
# رمز معسكر الصخور!
`,`
يتم تضمين لدينا الآن في التطبيق لدينا!
\[قانون تحديث
[عرض التطبيق الكامل](http://run.plnkr.co/plunks/BdvNONEmO3Jwg0EavX22/)