{"id":930,"date":"2024-05-08T09:25:21","date_gmt":"2024-05-08T07:25:21","guid":{"rendered":"https:\/\/programmier-workshops.de\/blog\/?p=930"},"modified":"2024-05-12T09:54:26","modified_gmt":"2024-05-12T07:54:26","slug":"lesson-understanding-angular","status":"publish","type":"post","link":"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/","title":{"rendered":"Lesson: Understanding Angular"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Introduction_to_Angular_Framework\" >Introduction to Angular Framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Key_Components_and_Techniques_in_Angular\" >Key Components and Techniques in Angular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Examples_with_Source_Code\" >Examples with Source Code<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Example_1_Angular_Component\" >Example 1: Angular Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Example_2_Angular_Service_and_Dependency_Injection\" >Example 2: Angular Service and Dependency Injection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Example_3_Angular_Routing\" >Example 3: Angular Routing<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-angular\/#Learning\" >Learning<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction_to_Angular_Framework\"><\/span>Introduction to Angular Framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Angular is a robust platform and framework for building single-page client applications using HTML and TypeScript. Developed and maintained by Google, it was first released in 2010 as AngularJS, with Angular 2+ being a complete rewrite released in 2016. Angular integrates a range of tools and best practices to solve development challenges, allowing developers to build efficient and scalable web applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Components_and_Techniques_in_Angular\"><\/span>Key Components and Techniques in Angular<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Angular is known for its comprehensive approach to application development, offering a rich set of features. Here\u2019s a quick overview of the basic components and techniques used in Angular:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Modules<\/strong>: Angular organizes code into modules, which help manage pieces of the application in a cohesive way. The root module, typically called <code>AppModule<\/code>, bootstraps the application.<\/li>\n\n\n\n<li><strong>Components<\/strong>: These are fundamental building blocks in any Angular application. A component controls a patch of screen called a view and is defined by a TypeScript class with HTML templates and optional styles.<\/li>\n\n\n\n<li><strong>Templates<\/strong>: Written in HTML, templates form the view for Angular components. They use Angular directives to enrich the application&#8217;s HTML.<\/li>\n\n\n\n<li><strong>Directives<\/strong>: These are instructions for the Angular rendering engine. They can change the appearance or behavior of DOM elements. Common examples include <code>ngModel<\/code>, <code>ngFor<\/code>, and <code>ngIf<\/code>.<\/li>\n\n\n\n<li><strong>Services and Dependency Injection<\/strong>: Angular uses dependency injection (DI) to provide new components with the services they require. Services are classes that are defined with a clear purpose and functionality, separate from views.<\/li>\n\n\n\n<li><strong>Routing<\/strong>: Angular&#8217;s Router enables navigation from one view to the next as users perform application tasks. It is based on browser URL changes.<\/li>\n\n\n\n<li><strong>Data Binding<\/strong>: This allows for automatic synchronization of data between the model and the view components. Angular supports two-way binding, event binding, and property binding.<\/li>\n\n\n\n<li><strong>Pipes<\/strong>: These are simple functions used in template expressions to accept an input value and return a transformed value. Common pipes include <code>date<\/code> and <code>currency<\/code>.<\/li>\n\n\n\n<li><strong>Observables and RxJS<\/strong>: Angular makes use of observables as an interface to handle a variety of common asynchronous operations. <code>RxJS<\/code> provides utilities for working with observables.<\/li>\n\n\n\n<li><strong>Forms<\/strong>: Angular provides two approaches for managing forms: template-driven and reactive forms, each with their own advantages.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Examples_with_Source_Code\"><\/span>Examples with Source Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let&#8217;s look at some basic examples to understand these concepts better.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_1_Angular_Component\"><\/span><strong>Example 1: Angular Component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-welcome',\n  template: `&lt;h1>Hello, {{name}}&lt;\/h1>`\n})\nexport class WelcomeComponent {\n  name: string = 'Angular';\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_2_Angular_Service_and_Dependency_Injection\"><\/span><strong>Example 2: Angular Service and Dependency Injection<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { Injectable } from '@angular\/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ExampleService {\n  getData() {\n    return 'Angular Service Data';\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_3_Angular_Routing\"><\/span><strong>Example 3: Angular Routing<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { WelcomeComponent } from '.\/welcome.component';\n\nconst routes: Routes = [\n  { path: 'welcome', component: WelcomeComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule {}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Learning\"><\/span>Learning<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/angular.io\/guide\/example-apps-list\">https:\/\/angular.io\/guide\/example-apps-list<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/busypeoples.github.io\/post\/thinking-in-components-angular-js\">https:\/\/busypeoples.github.io\/post\/thinking-in-components-angular-js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to Angular Framework Angular is a robust platform and framework for building single-page client applications using HTML and TypeScript. Developed and maintained by Google, it was first released in 2010 as AngularJS, with Angular 2+ being a complete rewrite released in 2016. Angular integrates&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,9,3,33],"tags":[],"class_list":["post-930","post","type-post","status-publish","format-standard","hentry","category-coding4beginner","category-css","category-kurs","category-kurs-lesson"],"_links":{"self":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/comments?post=930"}],"version-history":[{"count":2,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/930\/revisions"}],"predecessor-version":[{"id":934,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/930\/revisions\/934"}],"wp:attachment":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/media?parent=930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/categories?post=930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/tags?post=930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}