1). Introduction of New Angular 2/4/6 & features

By -
What is Angular?

The first version that was released is Angular1, which is also called AngularJS. AngularJS was based on the model view controller.

Angular2 comes with lots of changes in ground level and framework which having component & model,Classes. Angular 4 released in March 2017, recently Angular 6 was released on May 4, 2018.

Angular developed & maintain by Google Developer.

you can start from Angular.io. 

Angular 2/4 improved on that functionality and made it faster, more scalable and more modern.
Many people were happy with the functionality that Angular 1.x afforded them. There are so many framework are their & all having their own favors.

Why we choose Angular 2/4/6 over to other JS frameworks?

Basketball!23
Angular is a more Structured framework that allows programmers to focus on simply building 

JavaScript classes. Views and controllers are replaced with components in Angular, Also refined directives. The Angular codebase is more modern, more capable and easier for new programmers to learn than Angular 1.x.

Modularity
In Angular much core functionality has moved to modules. Angular recommends the use of Microsoft's TypeScript language, which introduces the following features:
  • Class-based Object Oriented Programming
  • Static Typing
  • Generics
TypeScript
Angular was written in TypeScript, A superset of JavaScript that implements many new ES2016+ features. Angular 4 is updated to a recent version of TypeScript, which is 2.2. This helps improve the speed and gives better type checking in the project. By focusing on making the framework easier for computers to process, Angular allows for a much richer development ecosystem.

Performance and Mobile
Angular is complete rewrite. Desktop computers will also see dramatic improvements in performance and responsiveness.Angular  was designed for mobile from the ground up.Touch interfaces, limited screen real estate and mobile hardware have all been considered in Angular .the Ionic team is working on an Angular version of their product, providing another way to leverage native device features with Angular.

Animation Package
Animation in Angular 4 is available as a separate package and needs to be imported from @angular/animations. In Angular2, it was available with @angular/core. It is still kept the same for its backward compatibility aspect.

Template
Angular 4 uses <ng-template> as the tag instead of <template>; the latter was used in Angular2.

ngIf
Angular2 supported only the if condition. However, Angular 4 supports the if else condition as well. Let us see how it works using the ng-template.

Pipe Title Case
Angular 4 has added a new pipe title case, which changes the first letter of each word into uppercase.

Http Search Parameters
Search parameters to the http get api is simplified. We do not need to call URLSearchParams for the same as was being done in Angular2.

Router life cycle improved
New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStart, GuardsCheckEnd, 


Compilation 
Asynchronous template compilation.

Iterative callbacks provided by RxJS. RxJS limits state visibility and debugging, but these can be solved with reactive add-ons like ngReact or ngrx.

Project Architecture and features of Angular 2/4
Component, Model, Templating , Shadow DOM, Form Builder, Change Detection, Routing, Observables, TypeScript, Animation Package,
Http Search Parameters,Smaller and Faster Apps.

Angular 6 release with few awesome features

ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6.



Comments

  1. PriyaFebruary 10, 2020 at 10:42 PM

    This is really wonderful information, it really helpful for learners. Hope share more content in this blog
    Angular JS Online training
    Angular JS training in Hyderabad

    ReplyDelete

Post a Comment

Popular posts from this blog

Angular 4 interview questions and answers for experience

By -
Angular.io is official good resource to lean Angular. And For Angular 2-4 you can used this one of best i have see  here https://www.tutorialspoint.com/angularjs/ is a good platform for learning the basics of AngularJS. You can download the pdf file for every tutorials that are available in it. What is AngularJS 2/4? - Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop -created by google development team. What is the difference between Angular 1(AngularJS) and Angular 2/4? -Angular 2/4 is complete re-created of Angular 1.In other word,it was completely rewritten from the ground-up. -Angular 1(AngularJS) is controller and $scope based and Angular 2/4 is based on an architecture of component hiera...
Read more

8). Vue.js Methods and Event Handling

By -
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. Example 1:- JS fiddle <div id="vue-instance">       Enter your name: <input type="text" v-model="name">      <button v-on:click="sayHello">Hey there!</button> </div> var vm = new Vue({        el: '#vue-instance',        data: {             name: ''        },   methods: {            sayHello: function(){             alert('Hey there, ' + this.name);           }        } }); Example 2:-  Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable: <button v-on:click="warn('Form can...
Read more

12). Vue JS - Slots

By -
<slot> basically use for element to serve as distribution outlets for content. To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot. Slots basically used for creating Generic components (button, Card, Modal), layout (App, Header, Footer), Recursive component (Tree, Menu).   For Example JS Fiddler Here We have create one component app-child. And we add slot tag and fixed content which always display. But slot content is dynamically what we give it will display. <div id="app">   <h2>We can use slots to populate content</h2>   <app-child>     <h3>This is slot number one</h3>   </app-child>   <app-child>     <h3>This is slot number two</h3>     <small>I can put more info in, too!</small> ...
Read more