{"id":369,"date":"2023-09-17T08:33:55","date_gmt":"2023-09-17T08:33:55","guid":{"rendered":"https:\/\/devopsopen.com\/?p=369"},"modified":"2023-09-22T20:28:58","modified_gmt":"2023-09-22T20:28:58","slug":"angular","status":"publish","type":"post","link":"https:\/\/devopsopen.com\/index.php\/2023\/09\/17\/angular\/","title":{"rendered":"Angular"},"content":{"rendered":"<h2>Universal Benefits<\/h2>\n<ul>\n<li>Standards compliance\n<ul>\n<li>Latest ECMAScript<\/li>\n<li>Modules<\/li>\n<li>Internationalization and accessibility<\/li>\n<\/ul>\n<\/li>\n<li>Performance<\/li>\n<li>Open source<\/li>\n<li>TypeScript<\/li>\n<li>Backed by Google<\/li>\n<li>Uniformity (devs can develop quicker anc cheaper)<\/li>\n<li>Entreprise-First<\/li>\n<li>Popularity<\/li>\n<li>Documentation<\/li>\n<\/ul>\n<h2>Subjective Benefits<\/h2>\n<ul>\n<li>Framework (Router, HTTP, forms, RxJS, etc)<\/li>\n<li>Opinionated - fewer decision<\/li>\n<li>RxJS<\/li>\n<li>Separation of templates and logic (seperation of concern)<\/li>\n<\/ul>\n<h2>Features<\/h2>\n<ul>\n<li>Progressive Web Apps<\/li>\n<li>Forms template based and reactive<\/li>\n<li>RxJS<\/li>\n<li>Fully featured router<\/li>\n<li>Animations<\/li>\n<li>Strictly typed forms<\/li>\n<li>CLI update<\/li>\n<\/ul>\n<h2>Advanced Features of angular<\/h2>\n<ul>\n<li>Server-Side Rendering<\/li>\n<li>Mobile<\/li>\n<li>Angular Language Service<\/li>\n<li>ngUpgrade<\/li>\n<\/ul>\n<h1>Architecture<\/h1>\n<ul>\n<li><strong>Componenents<\/strong><br \/>\nAngular component apply separation of concern pattern.<br \/>\nDisplay : contains HTML and CSS<\/li>\n<\/ul>\n<pre><code>    &lt;div&gt;\n    &lt;h1&gt;Hello&lt;\/h1&gt;\n    &lt;add-new-user&gt;&lt;\/add-new-user&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<p>Logic pattern : contains logic to diplays data into a class<\/p>\n<pre><code>    @Component({\n      selector: &#039;add-new-user&#039;,\n    })\n    export class addNewUserComponent{\n    ...\n    }\n<\/code><\/pre>\n<ul>\n<li><strong>Template<\/strong><\/li>\n<\/ul>\n<p>Each component has a template. separate template or inline template<br \/>\nseparate template designed with templateUrl :<\/p>\n<pre><code>    @Component({\n      selector: &#039;add-new-user&#039;,\n      templateUrl: &#039;.\/add-new-user.component.html&#039;\n    })\n    export class addNewUserComponent{\n    ...\n    }\n<\/code><\/pre>\n<p>Inline template designed with key word 'template' :<\/p>\n<pre><code>    @Component({\n      selector: &#039;add-new-user&#039;,\n      template: &#039;&lt;div&gt;....&lt;\/div&gt;&#039;\n    })\n    export class addNewUserComponent{\n    ...\n    }<\/code><\/pre>\n<p>in a template we can add simple variables like {{fulname}}, or complex  functions like &lt;button (click)=&quot;deleteUser(user)&quot;&gt;<\/button><\/p>\n<ul>\n<li><strong>Services<\/strong><\/li>\n<\/ul>\n<p>Services's aim is to get backend informations. are also injectable using key word Injectable<\/p>\n<pre><code>    @Injectable({\n    ...\n    })\n    export class ArticleService{\n    ...\n    }<\/code><\/pre>\n<ul>\n<li><strong>Dependency Injection<\/strong><\/li>\n<\/ul>\n<p>How component call the code in a service.<br \/>\nFor example : addNewStoryComponent is a componenent. We inject ArticleService in the componenent via constructor<\/p>\n<pre><code>    export class addNewStoryComponent {\n      constructor(private articleSvc: ArticleService){}\n    }<\/code><\/pre>\n<ul>\n<li><strong>Directives<\/strong><br \/>\nHow to met elements draggable or appear and hover... ==&gt; with directives<\/li>\n<\/ul>\n<p>Directives-HTML:<\/p>\n<pre><code>    &lt;div hover-trigger&gt;\n    Hover Over Me to See\n    &lt;\/div&gt;\n    &lt;div appear-on-hover&gt;\n    Some Content\n    &lt;\/div&gt;<\/code><\/pre>\n<ul>\n<li><strong>Pipes<\/strong><br \/>\nPipes used for formating the displays :<\/li>\n<\/ul>\n<pre><code>    &lt;div&gt;\n    {{title | upercase}}\n    &lt;\/div&gt;\n<\/code><\/pre>\n<p>pure pipes : only evaluated when input changes<br \/>\nimpure pipes : evaluated on every change detection cycle<\/p>\n<ul>\n<li>\n<p><strong>Modules<\/strong><br \/>\nmodules are grouping of pieces : componenets, services, pipes. Modules are now optional<br \/>\nuse modules :<\/p>\n<ul>\n<li>Feature areas<\/li>\n<li>lazy loading<\/li>\n<li>Dificulties<\/li>\n<li>Routing<\/li>\n<li>Importing and exporting<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>One Way Data Flow<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/devopsopen.com\/wp-content\/uploads\/2023\/09\/onewayflow.png\" alt=\"\" \/><\/p>\n<\/li>\n<li>\n<p><strong>Zone in angular<\/strong><br \/>\nZone.js is a library give a context of execution to Angular application and detect  change's stat then apply changes.<br \/>\nbenefits of Zone.js :<\/p>\n<ul>\n<li>Reactivity of changes<\/li>\n<li>track asynchronous tasks and executing code in a specific moments<\/li>\n<li>manage errors and loging when erros become<\/li>\n<li>Debugging errors<br \/>\nExample :<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code>    import { Component } from &#039;@angular\/core&#039;;\n    import { NgZone } from &#039;@angular\/core&#039;;\n\n    @Component({\n      selector: &#039;app-root&#039;,\n      template: `\n        &lt;h1&gt;{{ title }}&lt;\/h1&gt;\n        &lt;button (click)=&quot;changeTitle()&quot;&gt;Change title&lt;\/button&gt;\n      `\n    })\n    export class AppComponent {\n      title = &#039;My App&#039;;\n\n      constructor(private ngZone: NgZone) {}\n\n      changeTitle() {\n        this.ngZone.run(() =&gt; {\n          this.title = &#039;Title changed&#039;;\n        });\n      }\n    }\n<\/code><\/pre>\n<p>for details : <a href=\"https:\/\/angular.fr\/lifecycle\/zonejs.html\" title=\"zoneJs details\">zoneJs details<\/a><\/p>\n<ul>\n<li>\n<p><strong>Rendering Targets<\/strong><br \/>\nRendering needs : render web application, mobile, ....<\/p>\n<ul>\n<li>Browser-platform<\/li>\n<li>Browser-plaform-dynamic<\/li>\n<li>Rendering Targets<\/li>\n<li>Browser\/DOM<\/li>\n<li>Server-side<\/li>\n<li>Native Mobile Apps<\/li>\n<li>Native Desktop Apps<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Server-Side Rendering<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>Modes : <\/p>\n<ul>\n<li>Full pre-render<\/li>\n<li>Dynamic pre-render<\/li>\n<li>Client-side switch\n<ul>\n<li>Download app<\/li>\n<li>Hidden div<\/li>\n<li>Boots<\/li>\n<li>Replays events<\/li>\n<li>Swap display<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p><strong>Mobile and Native Frameworks<\/strong><br \/>\nFor Mobile use Ionic or NativeScroipt<br \/>\nand Desktop we can use Electron<\/p>\n<\/li>\n<li>\n<p><strong>Tersting Tools<\/strong><br \/>\nKarm<br \/>\nProtacotr<br \/>\nAlternatives <\/p>\n<ul>\n<li>Jest<\/li>\n<li>Cypress<\/li>\n<li>Playwright<br \/>\nAngular testing utilities<\/li>\n<li>TestBed<\/li>\n<li>Async and fakeAsync<\/li>\n<li>MockBackend<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>AOT Compiler<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>RxJS<\/strong><\/p>\n<ul>\n<li>Promises vs observables<\/li>\n<li>Self-subscribe or not<\/li>\n<li>Forgetting to subscribe<\/li>\n<li>Accidently making multiple http requests<\/li>\n<li>Shared observables<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Good practics<\/strong><\/p>\n<ul>\n<li>Learn and use the CLI<\/li>\n<li>Learn and use TypeScript<\/li>\n<li>Learn and use NgRx<\/li>\n<li>Learn Webpack<\/li>\n<li>Follow the style guide<\/li>\n<li>Do not access the DOM<\/li>\n<li>Use lazy loading<\/li>\n<li>Understand what you're sending to the browser<\/li>\n<li>Use immutable or observable data where appropriate<\/li>\n<li>Write unit and end-2-end tests<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Angular 14 news<\/strong><\/p>\n<ul>\n<li>Standlone component*<\/li>\n<li>Typed Forms<\/li>\n<li>Titles in routes<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Upgrades and roadmap<\/h2>\n<p><a href=\"https:\/\/angular.io\/guide\/versions\" title=\"Upgrades &amp; Roadmap\">Upgrades &amp; Roadmap<\/a><\/p>\n<p>for update you can use the official website angular to indicate changes: <a href=\"https:\/\/update.angular.io\">https:\/\/update.angular.io<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Universal Benefits Standards compliance Latest ECMAScript Modules Internationalization and accessibility Performance Open source TypeScript Backed by Google Uniformity (devs can develop quicker anc cheaper) Entreprise-First Popularity Documentation Subjective Benefits Framework (Router, HTTP, forms, RxJS, etc) Opinionated &#8211; fewer decision RxJS Separation of templates and logic (seperation of concern) Features Progressive Web Apps Forms template based and reactive RxJS Fully featured router Animations Strictly typed forms CLI update Advanced Features of angular Server-Side Rendering Mobile Angular Language Service ngUpgrade Architecture Componenents Angular component apply separation of concern pattern. Display : contains HTML and CSS &lt;div&gt; &lt;h1&gt;Hello&lt;\/h1&gt; &lt;add-new-user&gt;&lt;\/add-new-user&gt; &lt;\/div&gt; Logic pattern :\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":""},"categories":[9],"tags":[],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/devopsopen.com\/index.php\/author\/admin_bak\/"},"uagb_comment_info":5,"uagb_excerpt":"Universal Benefits Standards compliance Latest ECMAScript Modules Internationalization and accessibility Performance Open source TypeScript Backed by Google Uniformity (devs can develop quicker anc cheaper) Entreprise-First Popularity Documentation Subjective Benefits Framework (Router, HTTP, forms, RxJS, etc) Opinionated - fewer decision RxJS Separation of templates and logic (seperation of concern) Features Progressive Web Apps Forms template based&hellip;","_links":{"self":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts\/369"}],"collection":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/comments?post=369"}],"version-history":[{"count":18,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts\/369\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/posts\/369\/revisions\/391"}],"wp:attachment":[{"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/media?parent=369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/categories?post=369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devopsopen.com\/index.php\/wp-json\/wp\/v2\/tags?post=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}