{"id":834,"date":"2016-03-07T21:39:09","date_gmt":"2016-03-07T21:39:09","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=834"},"modified":"2016-03-15T18:26:46","modified_gmt":"2016-03-15T18:26:46","slug":"angular-is-a-design-pattern","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern","title":{"rendered":"Angular is a Design Pattern"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png\" alt=\"angular-design-pattern\" class=\"alignnone size-large wp-image-835 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-300x141.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern.png 1400w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/483;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png\" alt=\"angular-design-pattern\" class=\"alignnone size-large wp-image-835\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-300x141.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/p>\n<p>With Angular 2.0 fast approaching and the world of frontend frameworks in a massive transition, there&#8217;s been a lot of concern about the impending costs of moving to the next generation of Angular. Do developers have to learn yet another new framework?<\/p>\n<p>Few teams have spent as much time with Angular 2 as the Ionic team has. We started building Ionic 2 back when Angular 2 was pre-alpha, with the dream of offering a faster, more standards-compliant, and future-proof mobile web framework than Angular 1 could provide.<\/p>\n<p>One of the major realizations we&#8217;ve had from working on Ionic 2 is how similar Angular 2 and Angular 1 are at a high level, and how understanding this will help developers move from Angular 1 to Angular 2 far more easily. In many ways, Angular 2 isn&#8217;t really a new framework at all, just a new implementation of the same one we&#8217;ve come to know and love.<br \/>\n<!--more--><\/p>\n<h3>One framework, multiple implementations<\/h3>\n<p>With Angular 1, Angular 2, and Angular Dart, Angular has gone from a specific ES5 frontend framework, to a conceptual framework or <em>design pattern<\/em> with multiple implementations.<\/p>\n<p>One can build UIs and frontend applications in the Angular style with a choice of at least three major language implementations: ES5, ES6\/TypeScript, and Dart, though ES6\/TypeScript is becoming the de facto Angular standard (i.e. don&#8217;t use Dart!).<\/p>\n<p>If we take a closer look at how Angular apps work in each language, we start to see a ton of similarities. Let&#8217;s check out an example:<\/p>\n<h3>Example<\/h3>\n<p>To output a property from our scope or context, we can do this:<\/p>\n<p>Angular 1:<\/p>\n<pre><code class=\"html\">&lt;span&gt;Today is {{todaysDate | date}}&lt;\/span&gt;\n<\/code><\/pre>\n<p>Angular Dart:<\/p>\n<pre><code class=\"html\">&lt;span&gt;Today is {{todaysDate | date}}&lt;\/span&gt;\n<\/code><\/pre>\n<p>Angular 2:<\/p>\n<pre><code class=\"html\">&lt;span&gt;Today is {{todaysDate | date}}&lt;\/span&gt;\n<\/code><\/pre>\n<p>Notice anything? They&#8217;re exactly the same! Let&#8217;s try a more complicated example with a theoretical list of songs:<\/p>\n<p>In Angular 1 and Angular Dart:<\/p>\n<pre><code class=\"html\">&lt;ion-list&gt;\n  &lt;ion-item ng-repeat=&quot;song in songs&quot; ng-click=&quot;openSong(song)&quot;&gt;\n    {{song.artist}} - {{song.title}}\n    &lt;span ng-if=&quot;song.isFavorite&quot;&gt;&lt;i class=&quot;icon ion-heart&quot;&gt;&lt;\/i&gt;&lt;\/span&gt;\n  &lt;\/ion-item&gt;\n&lt;\/ion-list&gt;\n<\/code><\/pre>\n<p>And Angular 2 (w\/ Ionic 2):<\/p>\n<pre><code class=\"html\">&lt;ion-list&gt;\n  &lt;ion-item *ngFor=&quot;#song of songs&quot; (click)=&quot;openSong(song)&quot;&gt;\n    {{song.artist}} - {{song.title}}\n    &lt;span *ngIf=&quot;song.isFavorite&quot;&gt;&lt;ion-icon name=&quot;heart&quot;&gt;&lt;\/ion-icon&gt;&lt;\/span&gt;\n  &lt;\/ion-item&gt;\n&lt;\/ion-list&gt;\n<\/code><\/pre>\n<p>Okay, we see more differences here, but the changes are well defined: <code>ng-repeat<\/code> is now <code>ngFor<\/code>, with a <code>*<\/code> used to denote this element as a template (that will be stamped out N times). Iteration uses &#8220;of&#8221; instead of &#8220;in&#8221; to grab the values of the list which is more inline with how iteration works in ES6 and TypeScript. We no longer use kebab-casing (i.e. ng-repeat) for attributes since Angular 2 decided to move to a more explicit naming convention (<a href=\"http:\/\/angularjs.blogspot.com\/2016\/02\/angular-2-templates-will-it-parse.html\">more on this<\/a>).<\/p>\n<p>If we apply a standard Angular 1 to Angular 2 syntax transformation, we have code that, conceptually, is identical to Angular 1 and Angular 2. We can look at this code and immediately understand the intention of it, assuming we&#8217;re already familiar with Angular.<\/p>\n<h3>Component Example<\/h3>\n<p>Most Angular users will find templates straight forward in Angular 2. A much bigger change comes with the new component model that replaces the directive\/controller setup from Angular 1.<\/p>\n<p>In Angular 1:<\/p>\n<pre><code class=\"javascript\">.controller(&#039;HomeCtrl&#039;, function($scope) {\n  \/\/ controller for this &quot;page&quot;\n})\n\n.directive(&#039;profileImage&#039;, [function() {\n  \/\/ ... directive here\n}])\n<\/code><\/pre>\n<p>In Angular 2, since everything is a component, we can apply a simple transformation: turn controllers into components and turn ng1 directives into components.<\/p>\n<p>Since Angular 2 lives and breathes TypeScript and ES6, we express &#8220;components&#8221; as classes that can (optionally) have a template attached. The analog to the above Angular 1 code would look like this in Angular 2:<\/p>\n<pre><code class=\"javascript\">import {Component} from &#039;angular2\/core&#039;;\n\n@Component({\n    selector: &#039;home&#039;,\n    template: &#039;&lt;div&gt;home&lt;\/div&gt;&#039;\n})\nexport class HomeComponent { }\n<\/code><\/pre>\n<p>And the Angular 1 directive as an Angular 2 component:<\/p>\n<pre><code class=\"javascript\">@Component({\n    selector: &#039;profile-image&#039;,\n    template: &#039;&lt;div&gt;profile image&lt;\/div&gt;&#039;\n})\nexport class ProfileImageComponent { }\n<\/code><\/pre>\n<h3>Scope?<\/h3>\n<p>In Angular 1, scope was really just the &#8220;context&#8221; available to a region of the UI. For example, our <code>profileImage<\/code> directive might have a reference to the current user as part of its scope, or context, so it could render the user&#8217;s profile image.<\/p>\n<p>This concept is exactly the same in ng2, except we use the natural ES6 concept of class instance data! Angular has gone from a custom context system to a standards-based approach since JavaScript has evolved to make this possible (with a little TypeScript decorator magic to make it cleaner):<\/p>\n<pre><code class=\"javascript\">export class ProfileImageComponent {\n  @Input() user;\n\n  clickFace() {\n    \/\/ this.user is available, much like $scope.user would have been in ng1\n  }\n}\n<\/code><\/pre>\n<p>In Angular 2 we no longer need to have a custom <code>$scope<\/code> system to handle data for components, we get it for free* with ES6 and TypeScript!<\/p>\n<p><em>*oversimplification, but it feels free to the end user!<\/em><\/p>\n<h3>Reducing the barrier to entry<\/h3>\n<p>Us Angular 1 veterans tend to forget how difficult it was to <em>grok<\/em> Angular 1. I know I had to take a month off from a lot of my other work to just understand what all these random terms like <em>transclusion<\/em>, <em>directives<\/em>, <em>linking<\/em>, <em>scope<\/em>, and so on actually <em>meant<\/em>.<\/p>\n<p>A developer new to Angular and starting with Angular 2 will hopefully have way less domain-specific knowledge to learn since they can skip all the esoteric terms from Angular 1 and jump right into ES6\/TypeScript code.<\/p>\n<p>Plus, with no custom module system, Angular 2 code interops with the rest of the ES6 ecosystem, making it dead simple to install and import 3rd party code.<\/p>\n<h3>Angular all the way down<\/h3>\n<p>Once developers make the mental switch from the <em>syntax<\/em> of Angular 1 to Angular 2, we think they&#8217;ll find that <em>they already know Angular 2<\/em>. The concepts are practically identical, and the similarities don&#8217;t stop with templates and components; as users dig into pipes, dependency injection, and services, they&#8217;ll find tons of similar similarities (I like the sound of that).<\/p>\n<p>Since there is so much overlap, we&#8217;ve tried to make Ionic 2 feel similar to Ionic 1, since it&#8217;s still based on Angular, just a new, better implementation of it! So far it seems to be going over really well and I&#8217;m optimistic that Angular 2 is going to be a major hit now that the dust is settling and the Angular 2 APIs are stabilizing.<\/p>\n<p>Angular 2 is really just a better Angular!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With Angular 2.0 fast approaching and the world of frontend frameworks in a massive transition, there&#8217;s been a lot of concern about the impending costs of moving to the next generation of Angular. Do developers have to learn yet another new framework? Few teams have spent as much time with Angular 2 as the Ionic [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,4],"class_list":["post-834","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-top-posts"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular is a Design Pattern - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular is a Design Pattern\" \/>\n<meta property=\"og:description\" content=\"With Angular 2.0 fast approaching and the world of frontend frameworks in a massive transition, there&#8217;s been a lot of concern about the impending costs of moving to the next generation of Angular. Do developers have to learn yet another new framework? Few teams have spent as much time with Angular 2 as the Ionic [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-07T21:39:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-15T18:26:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png\" \/>\n<meta name=\"author\" content=\"Max Lynch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@maxlynch\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Max Lynch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\"},\"author\":{\"name\":\"Max Lynch\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\"},\"headline\":\"Angular is a Design Pattern\",\"datePublished\":\"2016-03-07T21:39:09+00:00\",\"dateModified\":\"2016-03-15T18:26:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\"},\"wordCount\":894,\"commentCount\":26,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png\",\"keywords\":[\"Ionic\",\"Top Posts\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\",\"url\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\",\"name\":\"Angular is a Design Pattern - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png\",\"datePublished\":\"2016-03-07T21:39:09+00:00\",\"dateModified\":\"2016-03-15T18:26:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern.png\",\"width\":1400,\"height\":660},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular is a Design Pattern\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\",\"name\":\"Max Lynch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"caption\":\"Max Lynch\"},\"description\":\"CEO\",\"sameAs\":[\"http:\/\/twitter.com\/maxlynch\",\"https:\/\/x.com\/maxlynch\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/max\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular is a Design Pattern - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern","og_locale":"en_US","og_type":"article","og_title":"Angular is a Design Pattern","og_description":"With Angular 2.0 fast approaching and the world of frontend frameworks in a massive transition, there&#8217;s been a lot of concern about the impending costs of moving to the next generation of Angular. Do developers have to learn yet another new framework? Few teams have spent as much time with Angular 2 as the Ionic [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern","og_site_name":"Ionic Blog","article_published_time":"2016-03-07T21:39:09+00:00","article_modified_time":"2016-03-15T18:26:46+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png"}],"author":"Max Lynch","twitter_card":"summary_large_image","twitter_creator":"@maxlynch","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Max Lynch","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern"},"author":{"name":"Max Lynch","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e"},"headline":"Angular is a Design Pattern","datePublished":"2016-03-07T21:39:09+00:00","dateModified":"2016-03-15T18:26:46+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern"},"wordCount":894,"commentCount":26,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png","keywords":["Ionic","Top Posts"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern","url":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern","name":"Angular is a Design Pattern - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern-1024x483.png","datePublished":"2016-03-07T21:39:09+00:00","dateModified":"2016-03-15T18:26:46+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/angular-is-a-design-pattern"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/angular-design-pattern.png","width":1400,"height":660},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/angular-is-a-design-pattern#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Angular is a Design Pattern"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e","name":"Max Lynch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","caption":"Max Lynch"},"description":"CEO","sameAs":["http:\/\/twitter.com\/maxlynch","https:\/\/x.com\/maxlynch"],"url":"https:\/\/ionic.io\/blog\/author\/max"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/834\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}