Angular - The Complete Guide (2024 Edition)
- Περιγραφή
- Πρόγραμμα σπουδών
- Συχνές ερωτήσεις
Ενημέρωση για Σεμινάρια Udemy
Για να παρακολουθήσετε ένα Σεμινάριο που ανήκει στο Udemy ακολουθήστε τον κατάλληλο σύνδεσμο «Μπείτε στο Udemy»,και μέσα από το περιβάλλον του Udemy πληρώνετε το κόστος και το Σεμινάριο είναι στην διάθεση σας με τους όρους και τις προϋποθέσεις που αναφέρονται εκεί.
Οι τιμές πού εμφανίζονται στο Seminarpro ενδέχεται να είναι διαφορετικές από αυτές του Udemy , αυτό συμβαίνει διότι περιστασιακά το Udemy μεταβάλλει τις τιμές ανάλογα με την πολιτική προσφορών που εφαρμόζει. Η τιμή αγοράς είναι αυτή που εμφανίζεται κάθε φορά στο Udemy.
Τα Σεμινάρια που προβάλλονται στο Seminarpro αλλά προέρχονται από το Udemy περιέχουν video με ελληνικούς υπότιτλους. Οι υπόλοιπες δραστηριότητες όπως σημειώσεις ή ερωτήσεις κατανόησης είναι στα Αγγλικά.
Η πληρωμή γίνεται απευθείας στο Udemy και αυτό είναι υπεύθυνο για την έκδοση αντίστοιχων παραστατικών.
Περιγραφή Σεμιναρίου
Η angular είναι ένα framework που βασίζεται στην javascript και δημιουργεί ένα “αντικείμενο” σε όλη την σελίδα που θα υποδείξουμε. Αυτό το αντικείμενο που δημιουργείτε μπορούμε να το αλλάξουμε μέσα από τους controllers να το μορφοποιήσουμε με τα services προσθέτοντας data και γενικότερα να το κάνουμε ότι θέλουμε!!!
Εγγραφείτε στο πιο ολοκληρωμένο μάθημα Angular και μάθετε τα πάντα για αυτό το εκπληκτικό πλαίσιο από την αρχή, σε μεγάλο βάθος!
Αυτό το μάθημα ξεκινά από το μηδέν, δεν χρειάζεται να γνωρίζετε ούτε το Angular 1 ούτε το Angular 2! Από την εγκατάσταση έως την ανάπτυξη, αυτό το μάθημα τα καλύπτει όλα! Θα μάθετε τα πάντα για τα στοιχεία, τις οδηγίες, τις υπηρεσίες, τις φόρμες, την πρόσβαση Http, τον έλεγχο ταυτότητας, τη βελτιστοποίηση μιας γωνιακής εφαρμογής με λειτουργικές μονάδες και τη συλλογή εκτός σύνδεσης και πολλά άλλα – και στο τέλος: Θα μάθετε πώς να αναπτύσσετε μια εφαρμογή!
Γιατί Angular; Το Angular είναι το επόμενο μεγάλο deal. Όντας ο διάδοχος του συντριπτικά επιτυχημένου πλαισίου Angular.js, είναι βέβαιο ότι θα διαμορφώσει το μέλλον της ανάπτυξης του frontend με παρόμοιο τρόπο.
Οι ισχυρές δυνατότητες και οι δυνατότητες του Angular σάς επιτρέπουν να δημιουργείτε πολύπλοκες, προσαρμόσιμες, σύγχρονες, ανταποκρινόμενες και φιλικές προς το χρήστη εφαρμογές web.
Συγκεκριμένα θα μάθετε:
- Ποια αρχιτεκτονική χρησιμοποιεί η Angular
- Πώς να χρησιμοποιήσετε το TypeScript για να γράψετε γωνιακές εφαρμογές
- Όλα για τις οδηγίες και τα στοιχεία, συμπεριλαμβανομένης της δημιουργίας προσαρμοσμένων οδηγιών/εξαρτημάτων
- Πώς λειτουργεί η σύνδεση δεδομένων
- Όλα για τη δρομολόγηση και τον χειρισμό της πλοήγησης
- Τι είναι οι σωλήνες και πώς να τους χρησιμοποιήσετε
- Πώς να στείλετε αιτήματα HTTP (π.χ. σε REST API)
- Τι είναι η ένεση εξάρτησης και πώς να τη χρησιμοποιήσετε
- Πώς να χρησιμοποιήσετε μονάδες στο Angular
- Πώς να βελτιστοποιήσετε τις (μεγαλύτερες) Angular εφαρμογές σας
- Εισαγωγή στη διαχείριση του NgRx και της σύνθετης κατάστασης
- Θα δημιουργήσουμε ένα μεγάλο έργο σε αυτό το μάθημα, ώστε να μπορείτε να εξασκήσετε όλες τις έννοιες
- Και τόσα άλλα!
-
1Course IntroductionVideo lesson
Welcome to this course! Let me introduce myself and explain what the course is about!
-
2What is Angular?Video lesson
First things first! What is Angular? Why would you want to learn it? This lecture helps answering this question.
-
3Join our Online Learning CommunityText lesson
Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!
-
4Angular vs Angular 2 vs Latest Angular VersionVideo lesson
So many Angular versions! What's up with them and which version does this course cover?
-
5CLI Deep Dive & TroubleshootingText lesson
Got issues using the CLI, setting up a project or simply want to learn more about it? Check out this lecture.
-
6Project Setup and First AppVideo lesson
Enough of the talking, let's create our first Angular project and view our first app in the browser.
-
7Editing the First AppVideo lesson
Let's edit our first app!
-
8The Course StructureVideo lesson
How is this course structured? This lecture answers the question and explains what you're going to learn!
-
9How to get the Most out of the CourseVideo lesson
Of course you can simply go through all the lectures, but to get the most out of the course, you should consider the advises given in this lecture.
-
10What is TypeScript?Video lesson
Angular uses TypeScript. What does that mean for you?
-
11Optional: TypeScript Quick IntroductionText lesson
-
12A Basic Project Setup using Bootstrap for StylingVideo lesson
A lot of sections of this course will start with a basic setup - this lecture explains how that basic setup is created with the CLI.
-
13About the Course Code / Code SnapshotsText lesson
Do you get some strange error? Are you stuck? Have a look at the source code of this course.
-
14Module IntroductionVideo lesson
Let me introduce you to the module and explain what you're going to learn.
-
15How an Angular App gets Loaded and StartedVideo lesson
We saw our first App run in the browser but do you really know how it got there? This lecture answers the question.
-
16Components are Important!Video lesson
Angular is all about Components! This lectures takes a closer look and explains what Components really are.
-
17Creating a New ComponentVideo lesson
Thus far, we worked with the AppComponent. Time to change this and create our first own component.
-
18Understanding the Role of AppModule and Component DeclarationVideo lesson
Did you recognize that AppModule file? It's super important - this lecture explains what it's about!
-
19Working with Standalone ComponentsText lesson
-
20Using Custom ComponentsVideo lesson
Now that we learned how to create and register our own components, let's now dive into using them.
-
21Creating Components with the CLI & Nesting ComponentsVideo lesson
We can also use the CLI to create components. This lecture explains how that then works and also how you may nest components.
-
22Working with Component TemplatesVideo lesson
A Component needs to have a Template. It's an absolute must. This lectures dives deeper into templates.
-
23Working with Component StylesVideo lesson
Whilst a Component is required to have a template, Styles are optional. This lectures explains how you may add styling.
-
24Fully Understanding the Component SelectorVideo lesson
The Selector of a Component is important if you want to include it in another template. This lecture explains how that selector actually works and what to watch out for.
-
25Practicing ComponentsText lesson
-
26[OPTIONAL] Assignment SolutionVideo lesson
-
27What is Databinding?Video lesson
Enough about Components for now - let's finally output more dynamic content now. Databinding is super important when it comes to that. This lectures explains what Databinding is.
-
28String InterpolationVideo lesson
One of the simplest forms of Databinding is String Interpolation which allows you to output text in your template. This lecture takes a closer look.
-
29Property BindingVideo lesson
Property Binding is another form of Databinding - also related to outputting content. Learn more about it in this lecture.
-
30Property Binding vs String InterpolationVideo lesson
Since both Property Binding and String Interpolation are related to outputting content, which one should you use? This lecture helps you with that decision!
-
31Event BindingVideo lesson
So far, we only passed data to the template. What if we want to react to (User) Events? Event Binding to the rescue!
-
32Bindable Properties and EventsText lesson
To which Properties and Events can you bind? This article should be helpful.
-
33Passing and Using Data with Event BindingVideo lesson
When we're talking about Events, we have to consider passing data. This lecture explains how that works.
-
34Important: FormsModule is Required for Two-Way-Binding!Text lesson
-
35Two-Way-DatabindingVideo lesson
You can also combine event and property binding - with Two-Way-Databinding. Learn more about it in this lecture.
-
36Combining all Forms of DatabindingVideo lesson
We learned about the different forms of Databinding, let's now combine them!
-
37Practicing DatabindingText lesson
-
38[OPTIONAL] Assignment SolutionVideo lesson
-
39Understanding DirectivesVideo lesson
Directives are another important building block in Angular apps. Learn more about it in this lecture.
-
40Using ngIf to Output Data ConditionallyVideo lesson
ngIf is one of the built-in directives - it's super helpful if you want to output data dynamically.
-
41Enhancing ngIf with an Else ConditionVideo lesson
ngIf is not limited to the usage you learned in the last lecture. Learn how to use it together with an else condition in this lecture.
-
42Angular 17: Alternative "if" SyntaxText lesson
-
43Styling Elements Dynamically with ngStyleVideo lesson
Want to change some styles dynamically? ngStyle is what you're looking for.
-
44Applying CSS Classes Dynamically with ngClassVideo lesson
Kind of related to the dynamic styling - you can also apply CSS classes dynamically with ngClass.
-
45Outputting Lists with ngForVideo lesson
What if you wanted to output lists (e.g. an array)? ngFor is there for you.
-
46Angular 17: Alternative "for" SyntaxText lesson
-
47Practicing DirectivesText lesson
-
48[OPTIONAL] Assignment SolutionVideo lesson
-
49Getting the Index when using ngForVideo lesson
ngFor also allows you to get the Index of the current iteration - this lecture explains how that works.
-
50Project IntroductionVideo lesson
Time to get started with the Course Project.
-
51Planning the AppVideo lesson
How should the Angular app we're building look like? Let's plan which features and components we need.
-
52Creating a New App CorrectlyText lesson
This is an important one - make sure to not skip this lecture!
-
53Setting up the ApplicationVideo lesson
Let's get our hands dirty and set the app up.
-
54Creating the ComponentsVideo lesson
Time to create the components we planned to create. Try doing it on your own first!
-
55Using the ComponentsVideo lesson
With the components created in the last lecture, it's now time to use them so that we can see something.
-
56Adding a Navigation BarVideo lesson
Later in this course, we want to switch pages - setting up a navigation bar sounds like a great idea for that.
-
57Alternative Non-Collapsable Navigation BarText lesson
Our navbar collapses and we don't offer a hamburger menu. Feel free to implement one on your own or change the code as outlined here.
-
58Creating a "Recipe" ModelVideo lesson
We're also going to use some data in this project - time to create a model for that data.
-
59Adding Content to the Recipes ComponentsVideo lesson
With the model and the component created, we can now add some content to our component template.
-
60Outputting a List of Recipes with ngForVideo lesson
In the end, we want to have more than one recipe, so let's prepare our template to output such a list.
-
61Displaying Recipe DetailsVideo lesson
We also want to display some detailed information about selected recipes, so let's add the appropriate code.
-
62Working on the ShoppingListComponentVideo lesson
We worked on the Recipe Components, let's now do the same for the shopping list.
-
63Creating an "Ingredient" ModelVideo lesson
As with the Recipe, we're also going to use some Ingredients in our app - let's add the respective model.
-
64Creating and Outputting the Shopping ListVideo lesson
With the model added, we can work on outputting some ingredients.
-
65Adding a Shopping List Edit SectionVideo lesson
We also want to be able to add new Ingredients to the Shopping List, so let's add the respective feature.
-
66Wrap Up & Next StepsVideo lesson
Part one of the app is finished. We achieved a lot but a lot of features are also still missing - time to move on and learn more about Angular.
-
67Understanding Angular Error MessagesVideo lesson
Things don't always go the way you want them to go. Learn how to read Angular's error messages.
-
68Debugging Code in the Browser Using SourcemapsVideo lesson
It can be incredibly useful to debug your app in the browser - learn more in this lecture.
-
69Module IntroductionVideo lesson
We already learned some things about components but now it's time to dive deeper into them!
-
70Splitting Apps into ComponentsVideo lesson
This lecture explains how you may split an existing app into multiple new components.
-
71Property & Event Binding OverviewVideo lesson
You already learned about property and event binding - but you didn't learn everything about it. Time to do so now.
-
72Binding to Custom PropertiesVideo lesson
You're not limited to binding to built-in properties. Indeed, binding to custom property is a key feature of Angular apps. Time to learn more about it.
-
73Assigning an Alias to Custom PropertiesVideo lesson
Sometimes, you want to use a different property name outside of a component than inside of it. This lecture explains how to do that.
-
74Binding to Custom EventsVideo lesson
As with property binding, you can also bind to custom events.
-
75Assigning an Alias to Custom EventsVideo lesson
You may also assign an alias to your custom events.
-
76Custom Property and Event Binding SummaryVideo lesson
Let me summarize the things you learned about property and event binding.
-
77Understanding View EncapsulationVideo lesson
Angular allows you to apply different styles to different components - this lecture explains how that works.
-
78More on View EncapsulationVideo lesson
Let's dive deeper into View Encapsulation.
-
79Using Local References in TemplatesVideo lesson
Sometimes, you want to get access to some of your HTML elements. Local references allow you to do just that.
-
80@ViewChild() in Angular 8+Text lesson
-
81Getting Access to the Template & DOM with @ViewChildVideo lesson
You got the local references in the templates, but you can also access your elements directly from the TypeScript file - this lecture explains how that works.
-
82Projecting Content into Components with ng-contentVideo lesson
Want to pass structured content (e.g. HTML code) into another component? Learn more about it in this lecture.
-
83Understanding the Component LifecycleVideo lesson
Components follow a certain lifecycle - this lecture dives deeper into this topic.
-
84Seeing Lifecycle Hooks in ActionVideo lesson
Let's see those lifecycle hooks in action.
-
85Lifecycle Hooks and Template AccessVideo lesson
How can we access template elements in different lifecycle hooks? Let's find out ...
-
86@ContentChild() in Angular 8+Text lesson
-
87Getting Access to ng-content with @ContentChildVideo lesson
You may also get access to the content projected into a component - let's also see how that works in lifecycle hooks.
-
88Wrap UpVideo lesson
Let me wrap up this section about Components & Databinding
-
89Practicing Property & Event Binding and View EncapsulationText lesson
-
90[OPTIONAL] Assignment SolutionVideo lesson