{"id":876,"date":"2016-04-21T18:16:13","date_gmt":"2016-04-21T12:46:13","guid":{"rendered":"http:\/\/www.prasadk.com\/my-press\/?p=876"},"modified":"2016-04-21T18:16:13","modified_gmt":"2016-04-21T12:46:13","slug":"lets-learn-angular-2","status":"publish","type":"post","link":"https:\/\/www.prasadk.com\/my-press\/lets-learn-angular-2\/","title":{"rendered":"Angular 2 &#8211; Let&#8217;s learn together!"},"content":{"rendered":"<blockquote>\n<p style=\"text-align: left;\"><strong>\u00a0<\/strong><\/p>\n<h2>Angular2 Overview<\/h2>\n<\/blockquote>\n<p><strong>Angular2 Introduction<\/strong><\/p>\n<p>Angular2&#8217;s major advantage &#8211; One of the most confusing things for a UI developer who is from a JAVA background would be all about type in JavaScript. We know that, JS is not a strictly typed language. To avoid those kinds of confusions, Angular 2 is here with TypeScript.<\/p>\n<p>TypeScript can be considered as a superset of JavaScript, it\u2019s a typed JavaScript J To know more about TypeScript, please refer &#8211; <a href=\"http:\/\/www.typescriptlang.org\/\">http:\/\/www.typescriptlang.org\/<\/a>. We will not cover more on this here as we concentrate on AJS and will throw light on TS whenever required in between!<\/p>\n<p><strong>\u00a0Architecture Overview:<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-878\" src=\"http:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/AJS2architecture-300x168.jpg\" alt=\"AJS2architecture\" width=\"300\" height=\"168\" srcset=\"https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/AJS2architecture-300x168.jpg 300w, https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/AJS2architecture-768x431.jpg 768w, https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/AJS2architecture-690x388.jpg 690w, https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/AJS2architecture.jpg 819w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Good news is \u2013 we have class, encapsulation, import, export and everything now! \ud83d\ude42<\/p>\n<p>Let\u2019s review the overall architectural components in AJS2 one by one. TypeScript is actually a modular programming language. So, it\u2019s always the best practice to keep our Angular2 apps modular. So, we can consider that Angular is a collection of multiple modules. We can import and export one another as in Java. AJS has its own library modules in its core component\/library.<\/p>\n<p>Next, coming to major building blocks of AJS2 architecture, the following are very important components\/building blocks\/features:<\/p>\n<ul>\n<li>Component<\/li>\n<li>Template<\/li>\n<li>Directive<\/li>\n<li>Metadata \/ Decorators<\/li>\n<li>Services<\/li>\n<\/ul>\n<p>Also, as in earlier versions of Angular, we have Dependency Injection and Data Binding concepts too<\/p>\n<p><strong>Component:<\/strong> Angular Components are nothing but, the basic building block, where all our application business logic resides. It\u2019s similar to the controllers we had in our AJS 1.x. It can be considered as a function or a kind of class as in Java. It has properties and methods and also, scope that we had in AJS 1.x is combined here in component.<\/p>\n<p><strong>Template: <\/strong>Angular templates are nothing but our application views. It\u2019s more like a regular HTML which renders the DOM as per the instructions it receives from component or the directive.<\/p>\n<p>Observe closely that, we have {{myName}}, which later evaluates to the actual name value that\u2019s bound to the property myName during run time. So, we have {{\u2026}} symbol to render the values.<\/p>\n<p>Similarly, we also can have \u2013 event binding or can attach event handlers in our template using the syntax as below in the examples.<\/p>\n<p>Earlier, to achieve the same goal, we had ng-click, ng-\u201cevent\u201d specific handlers. Now, we have to attach handlers to the events by assigning them with a pair of parenthesis.<\/p>\n<p>We can have two-way data binding using \u201cngModel\u201d, where it\u2019s a combination of handling events along with binding the properties as below, this can also be considered as one of the attribute directives.<\/p>\n<p><strong>Directives: <\/strong>We have two types of directives in Angular2, the structural and the attribute. Structural directives alter the DOM, whereas the attribute directives alter the behavior of an existing element on DOM, may be based on certain events as we have seen above in ngModel.<\/p>\n<p>Note: We do not have ng-repeat. We use ngFor, ngIf etc with an asterisk symbol for structural directives. A component is also a directive, where it does have a template bound to it. We use something called as decorators &#8211; @ to write custom directives whenever necessary.<\/p>\n<p><strong>Metadata: <\/strong>Metadata tells angular how to utilize and compile the component. It briefs what to do with that particular component. In the example we can see that \u2018selector\u2019 and \u2018template\u2019 are the two metadata fields, which tells angular to compile \u201cmy-app\u201d to this class and insert the DOM with the template given. Selector actually represents the simple CSS selector for the component, like a class selector of CSS \ud83d\ude42<\/p>\n<p><strong>Service: <\/strong>Service can be anything like a web service or a function that provides the necessary information or input that our app needs. It can have getters and setters!<\/p>\n<p><strong>Related example snippets:<\/strong><\/p>\n<div id=\"attachment_889\" style=\"width: 686px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-889\" loading=\"lazy\" class=\"wp-image-889 size-full\" src=\"http:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/examples.jpg\" alt=\"examples\" width=\"676\" height=\"471\" srcset=\"https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/examples.jpg 676w, https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/examples-300x209.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><p id=\"caption-attachment-889\" class=\"wp-caption-text\"><img loading=\"lazy\" class=\"wp-image-890 size-full\" src=\"http:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/Examples2.jpg\" alt=\"Examples2\" width=\"676\" height=\"471\" srcset=\"https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/Examples2.jpg 676w, https:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2016\/04\/Examples2-300x209.jpg 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/p><\/div>\n<p>This is all about the high-level overview of AJS 2. Will dive deeper in the next series \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 Angular2 Overview Angular2 Introduction Angular2&#8217;s major advantage &#8211; One of the most confusing things for a UI developer who is from a JAVA background [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[7,11,6],"tags":[54,55],"_links":{"self":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/876"}],"collection":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/comments?post=876"}],"version-history":[{"count":13,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/876\/revisions"}],"predecessor-version":[{"id":893,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/876\/revisions\/893"}],"wp:attachment":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/media?parent=876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/categories?post=876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/tags?post=876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}