למד זוויתית בקורס חינם זה בן 33 חלקים מאת דן ווהלין המומחה לזווית

תִכנוּת

על פי סקר מפתחי Stack Overflow 2018 , Angular היא אחת המסגרות / ספריות הפופולריות ביותר בקרב מפתחים מקצועיים. כך שלימוד זה מגדיל את הסיכויים שלך לקבל עבודה כמפתח אתרים באופן משמעותי.

לכן חברנו לאחד המומחים הנודעים ביותר במסגרת, ויצרנו קורס Angular בחינם ב- Scrimba.

המדריך דן ווהלין הוא מומחה למפתחים של גוגל אשר העניק שירותי הדרכה, אדריכלות ופיתוח עבור כמה מהתאגידים הגדולים בתעשייה ויצר כמה מקורסי ההדרכה הפופולריים ביותר באודמי ובפלורלסייט. הוא גם דובר קבוע בכנסי מפתחים ברחבי העולם.

בקורס זה דן מנחה אותך ביצירת אפליקציית Angular הראשונה שלך באמצעות TypeScript. על ידי סיום הקורס תוסיף מיומנויות בעלות ערך לחגורת הכלים שלך.

עכשיו בואו נסתכל על אופן בניית הקורס!

חלק מס '1: סקירת הקורס

בסרטון ההיכרות נותן דן סקירה על הקורס, היבטים מרכזיים של Angular וכיצד מתווה הקורס. הוא גם מספר לך קצת על הרקע שלו, כך שאתה מכיר אותו לפני שאתה קופץ לקוד של האפליקציה החדשה שלך.

חלק מס '2: סקירת יישומים

בחלק זה דן נותן לנו הצצה לאפליקציה שאנחנו הולכים לבנות. הוא נועד לאפשר לנו להתמקד באבני הבניין העיקריות של Angular. על ידי יצירת אפליקציה להצגת נתוני לקוחות וההזמנות שלהם, אנו נחדד את ההיבטים המרכזיים של Angular, כגון רכיבים, מודולים, שירותים וניתוב. כמו כן, במהלך הקורס נלמד על תכונות נהדרות שיש לכל אפליקציה, כמו מיון וסינון.

חלק מס '3: CLI זוויתי

בחלק זה אנו לומדים את יסודות השימוש בכלי CLI Angular (ממשק שורת פקודה) ועוברים על הפקודות הבסיסיות:

ng --version ng --help ng new my-app-name ng generate [component | directive | pipe | service | class | interface | enum | guard] ng build ng serve ng lint ng tests

לדוגמה, ng --new my-app-nameייצור עבורנו אפליקציית Angular ריקה חדשה ונוכל להשתמש בה ng -generateכדי ליצור חלקים מהאפליקציה שלנו.

ng buildיבנה הכל עבורנו, ואף ng serve -oיפתח שרת פיתוח וכן יפתח לנו חלון דפדפן לצפייה באפליקציה שלנו.

חלק מס '4: סקירת קבצי פרויקט

בסרטון הזה של הקורס, דן נותן סקירה בסיסית של פקוד CLI ליצירת אפליקציה ריקה זוויתית ונותן סקירה מהירה של קבצים בתצורה כמו tslint, tsconfigואת protractorבתיקיית האפליקציה שלנו.

חלק 5: התמונה הגדולה

כאן אנו לומדים הפשטה שימושית לפיה רכיבים דומים לגושי לגו - אנו בונים רכיבים ואז משתמשים בהם כדי להיצמד יחד ליצירת אפליקציה. אנו מקבלים גם רענון מהיר למשפחת שפות JavaScript ולומדים היכן TypeScripts משתלב.

דן נותן לנו מודל מנטאלי טוב לשימוש לחשיבה על הקוד שלנו תוך כדי עבודה עם Angular כדי שנוכל לדמיין היכן הכל משתלב.

חלק מס '6: רכיבים ומודולים - סקירה כללית

לא מופשט משם, התרשים עבור קוד זוויתי עשוי להיראות כך.

הרכיבים מורכבים מקוד ותבנית HTML והוא יכול להכיל בורר, כך שנוכל לקרוא לזה ב- HTML שלנו.

כל רכיב מורכב מ:

לאחר מכן דן מסביר מהו כל אחד מהחלקים וכיצד הם משתלבים בדרך הזוויתית של פיתוח רכיבים. אחד הדברים הגדולים ב- Angular הוא שזה צפוי מאוד. ברגע שתלמד כיצד ליצור את הרכיב הראשון שלך אתה בדרך ליצור רכיבים נוספים.

חלק מס '7: רכיבים ומודולים - רכיב אפליקציות

בחלק זה של הקורס אנו מסתכלים על HelloWorldרכיב.

דן מפרק עבורנו כל היבט ברכיב ומסביר כיצד משתמשים בו ואיך מעבדים את הרכיב שלנו על ידי Angular, כיצד הוא מתווסף app.moduleובסופו של דבר כיצד הוא מעובד על גבי המסכים שלנו.

אנו למדים שזה selector: 'app-root'מה שמאפשר לנו להתקשר בהמשך לרכיב מה- HTML שלנו באמצעות

יש לנו גם הצצה לחיבור נתונים שעליו נלמד יותר בפרקים מאוחרים יותר.

חלק מס '8: רכיבים ומודולים - מודול אפליקציה

בתסריט זה אנו מקדישים יותר זמן ללמוד על פעולותיהם הפנימיות app.moduleשנגענו בקאסט הקודם ולומדים על NgModuleו BrowserModule.

חלק מס '9: רכיבים ומודולים - הוספת רכיב לקוחות

בקאסט זה דן נותן לנו כמה טיפים ליצירת רכיבים באמצעות ה- CLI ואז מראה כיצד ליצור רכיבים באופן ידני. אנו לומדים כיצד לבנות רכיב המרחיב עוד יותר את הידע שלנו מחלק מס '6.

כעת אנו מביאים כמה נתונים כדי לחקות את ה- API שלנו וללמוד כיצד מודולים עוזרים לנו לשמור על הקוד שלנו מאורגן וקל יותר לשימוש חוזר.

חלק מס '10: רכיבים ומודולים - הוספת רכיב של רשימת לקוחות

בחלק זה, אנו יוצרים customers-list.componentטבלת HTML להצגת רשימת הלקוחות שלנו. אנו נרשמים במהירות customers.moduleומשתמשים בבורר כדי להציג את הטבלה הריקה שלנו.

השלב הבא יהיה לאכלס את הטבלה בכמה נתונים.

חלק מס '11: רכיבים ומודולים - הוספת רכיב תיבת טקסט מסנן

לפני שאנחנו מוסיפים נתונים לטבלה שלנו, דן מראה לנו כיצד להוסיף a filter-textbox.componentלטבלה שלנו ואנחנו מחזקים את הדרך הזוויתית של יצירת רכיב, רושמים אותו במודול ומשתמשים בו ב- HTML שלנו עם סלקטורים.

חלק מס '12: רכיבים ומודולים - הוספת מודול משותף וממשקים

בחלק זה דן מדבר על השימוש shared.module - מודול שבו אנו מכניסים רכיבים או תכונות אחרות שאנו רוצים לשתף בכל האפליקציה שלנו, ולא רק customers.

יש לנו גם רענון מהיר של ממשקי TypeScript וכיצד ניתן להשתמש בהם ביישומי Angular כדי לספק עזרה טובה יותר בקוד ולהגביר את הפרודוקטיביות.

export interface ICustomer { id: number; name: string; city: string; orderTotal?: number; customerSince: any; }

חלק מס '13: קשירת נתונים - סקירת קשירת נתונים

בפרק זה אנו לומדים על קשירת נתונים, לומדים כמה טכניקות ורואים כיצד להוסיף קשירת נתונים ליישום שלנו.

בדרך כלל אנו קושרים נתונים בתבניות שלנו. קשירת נתונים נכנסת לפעולה כאשר רכיב מקבל את הנתונים שלנו ומחבר אותם לתבנית. אנו יכולים להכניס נתונים לתבנית באמצעות Property Bindingולטפל באירועי משתמש ולהוציא נתונים מתבנית באמצעות Event Binding. Angular מספק דרך חזקה ונקייה להוסיף קשירת נתונים בתבניות מהירה וקלה לזכירה.

דן מספק לנו שקופית שימושית לזכור תחביר נדרש ...

…and some on Angular directives, for example, ngFor, used to loop through items in a collection and get some properties from the items, and ngIf to add and remove an HTML element from the DOM.

Part #14: Data Binding — Getting Started with Data Binding

In this cast we play around with Property Binding and Event Binding to better understand how they work in Angular, using the knowledge from the previous chapter.

Dan shows how we can use the [hidden] property to display an h1 element dynamically:

{{ title }}

And to bind DOM events such as click:

Show/Hide

Part #15: Data Binding — Directives and Interpolation

Here we have a look at Interpolation. The rationale is that we need to get data from each customer to generate a table row in a table from Part #10.

This is the part when things start coming together: we use directive ngFor to loop through each customer in filteredCustomers and interpolate data from a customer into a table row. We learn a few tricks about rendering data conditionally using ngIf.

In the end we get a pretty looking table!

Part #16: Data Binding — Event Binding

Event Binding is crucial when we need to handle an event, like a mouse move or a click. In this screencast, Dan guides us through adding functionality to sort the data in our table. We will start on it in this chapter and finish it when we get to the Services part of our course.

We create a placeholder event handler in our customer-list.component:

sort(prop: string) { // A sorter service will handle the sorting }

Add binding in customers-list.component.html:

NameCityOrder Total

Part #17: Data Binding — Input Properties

We have some data in a people array in our customers.component and we need to pass it into our filteredCustomers array in customers-list.component, effectively passing data from a parent component to a child.

For that we will use Angular’s Input property which relies on a decorator named Input():

@Input() get customers(): ICustomer[] { return this._customers } set customers(value: ICustomer[]) { if (value) { this.filteredCustomers = this._customers = value; this.calculateOrders(); } }

And bind to it in our parent component template to pass data from parent to child (app-customers-list in this case):

Part #18: Data Binding — Working with Pipes

Wow! We’ve done quite well so far!

There are a few things which might look a bit odd — “john” is lowercase and we have no “$” symbol to display currency in which we have our orders.

This is really the way we have our data, so we could just go and update it directly, or we can use a built-in Angular feature called Pipes to update it for us!

Some of the simplest pipes look like this:

{ uppercase } // renders JOHN { cust.name } // renders John

But sometimes you might want to have your own custom pipe and Dan shows us how to build a custom capitalize pipe (note that Angular includes one called titlecase — but we’re learning here!) and how to wire it up to use in our application.

Part #19: Data Binding — Adding Filtering

In this cast, Dan walks us through adding functionality to our filter-textbox.component from Part #11

We learn more about Angular Output and EventEmitter properties, create our filter event handler and bind it to our filter textbox:

And there we go, we can now filter on our customers’ names!

Part #20: Services and Http — Services Overview

In this chapter, we look at Angular Services. One of Angular’s strong points is that it’s a complete framework that provides built-in support for managing state and objects through services. We saw services in the diagram earlier. Since we don’t want components to know how to do too much, we’ll rely on services to communicate with the server, perform client-side validation or calculations, etc.

Components should focus on presenting data and handling user events. When additional functionality needs to be performed they should delegate to services to provide for a more maintainable application and better code reuse.

That’s exactly what Service does — some reusable functionality for the app which should not be of any component’s concern.

Luckily, Dan get us covered with a handy slide to keep in mind.

Part #21: Services and Http — Creating and Providing a Service

From a chapter earlier we have seen an import of Injectible which is a decorator that allows for something called Dependency Injection or DI for short (another powerful feature built-into Angular).

We’ll use DI to access an HttpClient service which we will use to communicate with a RESTful service. We will be adding HttpClient to a constructor of our data.service and @Injectible() decorator will make DI possible.

Part #22: Services and Http — Calling the Server with HttpClient

In this cast, Dan introduces Observables from RxJS — reactive extensions for JavaScript, which is not a part of Angular but is included in all Angular projects by default.

We will be using Observables to deal with asynchronous code. In a nutshell, it allows us to start an operation and then subscribe to data that is returned. Once the data comes back from the server, the subscription ends and we can unsubscribe.

Dan discusses the necessary code to call the server and then subscribe to the response using RxJS piping and operators.

Here’s an example of how we can get Orders:

Part #23: Services and Http — Injecting a Service into a Component

Now that we have a way to get the data, we need to inject the service into one of our components. We can now change this.people in customers.component from being hardcoded to call a service and get data that way.

We need to bring our data.service to app.module and then in customers.component we can:

import { DataService } from '../core/data.service';

Now we can inject our DataService straight into our component’s constructor:

constructor(private dataService: DataService) {}

Part #24: Services and Http — Subscribing to an Observable

Now we can use our injected dataService, call getCustomers() and subscribe to our Observable to get the data.

Which is pretty straightforward:

ngOnInit() { this.title = 'Customers'; this.dataService.getCustomers() .subscribe((customers: ICustomer[]) => this.people = customers);

Now we have one last service to look at — SorterService

Part #25: Services and Http — Using a SorterService

Currently, if we click on our column headers nothing would happen.

Dan handily provided a prewritten service for us, which we can use, so in this chapter, we will practice bringing in service into our components, in this case, customers-list.component.

As with other services we need to import it:

import { SorterService } from '../../core/sorter.service';

Then we inject SorterService into our constructor:

constructor(private sorterService: SorterService) {}

Dependency injection makes it extremely easy to access reusable code such as the sorter or data services.

Lastly, we use it in our sort() function:

sort(prop: string) { this.sorterService.sort(this.filteredCustomers, prop); }

Part #26: Routing — Routing Overview

This chapter will introduce Routing, which is an essential part of modern applications. As you’re building an Angular app, you want to show different components as the user interacts with it. In our case, when a user clicks on a Customer, we might want to show them Orders. Routing is one way to very neatly achieve this.

Routes are used to hook a specific URL to a component and in the next few chapters, we will be focusing on the top part of our Angular diagram.

A super great part of routing is that if a user bookmarks a specific URL, it will bring them back to a specific component and there is no need for complex show/hide logic.

Part #27: Routing — Creating a Routing Module with Routes

We begin with a familiar module-container routine and create a app-routing.module.

A main focus of the app-routing.module is to define the routes in an array:

const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: '/customers'}, { path: '**', redirectTo: '/customers' } ];

Three key properties of routes are:

  • path — where your user goes, so path: '' would be the root of your app. path: '**' is a wild card match. It is usually placed last and it’s there to cover cases for any route that is not specified in routes
  • pathMatch — how exactly should the route match for a specific component to be displayed
  • redirectTo — when a path is matched, this is where we send the user. In our case, we send them to /customers.

Part #28: Routing — Using Router Outlet

In order to use Routing in Angular in our app.component template we replace with . Ultimately, this is just a way to say: ‘Hey, this is where a component will go when we hit our route’.

When we hit a route, then a component associated with that route will magically appear in the place of .

Part #29: Routing — Adding a Customers Routing Module and Routes

In this chapter, Dan brings all the things together and we connect a /customer route to customers.component.

First, we create acustomers-routing.module and point our route from part #28 to customers.component like so:

const routes: Routes = [ { path: 'customers', component: CustomersComponent } ];

And now when we type “customers” in the Scrimba browser address bar we get our customers.component.

Part #30: Routing — Adding an Orders Component with Routes

In this clip, we’re going to quickly review how we’ve done routing to display customers, and now it’s time for routing to display their orders.

There’s a little catch though. When we click on a customer we need to display order data related to that customer. So we need to pass some dynamic data into our routing.

We can achieve this by passing a route parameter in our orders-routing.module like so:

const routes: Routes = [ { path: 'orders/:id', component: OrdersComponent} ];

Note the /:id syntax. In routing the : symbol indicates that the value after it will be dynamically replaced and id is just a variable, so it can be anything like :country or :book.

Part #31: Routing — Accessing Route Parameters

In the previous screencast we saw how to create orders/:id route and now orders.component needs to somehow grab that id and display customer related orders. To do that we need to access the id route parameter.

One way of doing it would be:

let id = this.route.paramMap.get('id');

The benefit of this way is that we can subscribe to paramMap and get notified when any of the data in id changes. But we only need it once.

We can use snapshot for that:

let id = this.route.snapshot.paramMap.get('id')

snapshot just takes a kind of an instant picture of your URL and gives it to you, which perfect as that’s what we need in this situation.

But now we have a problem. Our id is a string, but to get an order from our DataService it needs to be a number. We can convert it with parseInt(), but Dan teaches us a neat + trick:

let id = +this.route.snapshot.paramMap.get('id')

Now we can call DataService to get the order and render it to orders.component.

Part #32: Routing — Linking to Routes with the routerLink Directive

The last thing we want to do is to add a link on a customer’s name, so we can click it to see their orders.

In part #28 we’ve added and now we just need to tell our app that we want to display orders.component when we navigate to /orders/:id.

We can do it by adding a link to our customer’s name in customers-list.component.html in a row where we’re mapping all the data to be displayed. We already have our customer object there, so we can just pass id to our route.

 { capitalize }

Now we can see orders!

But hey, how do we get back? We could click ‘Back’ button on the browser, but it’s much nicer to have an app link for that, now that we know routing. Let’s add it to customers-list.component.html at the very bottom.

View All Customers

Part #33: Course Summary

Very well done, we have our app now!

We can wrap up and have a quick recap of things done. Don’t forget to watch the actual screencast of the course, as Dan is a great teacher so you will have lots of fun following the process alongside him!

Thank you, Dan!

If you’re interested in keeping up on front-end and back-end technologies make sure to follow Dan on Twitter!

Happy coding!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.