New World of Angular (v2+)
0 likes471 views
The document provides an overview of Angular 2, discussing its evolution, features, and tools compared to previous technologies. It covers the development environment setup, including the use of Angular CLI and Universal for server-side rendering. Additionally, it highlights performance improvements, cross-platform capabilities, and a hands-on example of a simple Angular 2 component.
![Introduction - ngCrud Angular2
Angular 2 Component
15
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template:`<input type='text' placeholder= "Enter first name
" [(ngModel)] = "firstName">
<br>Hello {{firstName}} `
})
class GreetingComponent {
firstName: string;
lastName: string;
}
bootstrap(GreetingComponent);](https://image.slidesharecdn.com/newworldofangular2-170201070157/85/New-World-of-Angular-v2-15-320.jpg)
New World of Angular (v2+)
- 1. Angular2 New World of Angular 2 1 CloudCherry 4th Feb
- 2. Introduction - ngCrud Angular2 Little about Myself 2 Rahat Khanna @mappmechanic Bangalore Front End Dev Blogger Author appsonmob.com airpair.com packtpub.com/blog pluralsight.org
- 3. Introduction - ngCrud Angular2 Agenda 3 1. Discuss about Web, Front End Frameworks and Angular2 2. Latest News around Angular 2 & its Toolset - Universal, Mobile, CLI, Windows Some Cool Demos & Show off for Angular 2 by Awesome Devs
- 4. Introduction - ngCrud Angular2 Evolution of Web 4 1993 - 1997: Static HTML Websites, GIFs, Minimal Javascript and DHTML 1995 - 2002: Dynamic Web Pages, Server Side Programming - CGI, Perl, PHP, JSP, Java 2002-2007: CMS Systems like Wordpress, Drupal, Joomla etc - HTML4, Initial Ajax, Canvas, Web Fonts 2008-2012: RIA Apps, Client Server Apps, CSS3, Animations, Offline, Responsive Design 2012-2014: Cloud Apps - Salesforce, Google Drive, MS Office 360, Paypal 2015-2016: User Experience - Front End MVC, Single Page Apps - Angular, React, Node, Nginx, IOT, Smartwatches
- 5. Introduction - ngCrud Angular2 SPA App Like User Experience More Robust Client Side Logic Navigation History Should be Maintained Support Offline Dynamic Templating & Data Binding Fluid Transitions & Nested Views SPA - History - Angular 1.5 5 AngularJS 1.X Two way Data Binding Directives Templates MVC or MV* Dependency Injection • Lifecycle of Angular 1 app is complex • Scope Inheritance & Access to Parent Scope Directly • Painstaking Digest Cycle and $apply method • Name based dependency injection • Excessive Watchers if your apps Scales to complex scenarios • No inbuilt Nested Routing • ng-if & ng-repeat - the Culprits
- 6. Introduction - ngCrud Angular2 Intro to Angular2 6 Develop Across All Platforms 2.1.0-rc Released Speed & Performance Web Workers, Server Side Rendering, Robust Data Modeling - RxJS, GraphQL, ImmutableJS, Redux Web, Mobile Web, Smartwatches, Native Mobile, Desktop - Electron, Native Script Incredible Tooling Loved by Millions CLI, Simple Declarative Templates, Chrome Dev Extensions, Development Server, Static Code Analyzer Adoption by Tech Giants & Corporates, Awesome Communities like Angular Beers, Angular Connect, Angular Camp, Angular Air, Extensive IDEs Support
- 7. Introduction - ngCrud Angular2 Tech Stack
- 8. Introduction - ngCrud Angular2 Dev Environment Setup 8 Step1: Install NodeJS & NPM for managing dependencies. Step2: Install npm dependencies using package.json or npm install commands - angular2, systemjs, es6-promise, es6-shim, rxjs, zone.js Step3: Configure Typescript configurations using a file tsconfig.json Step4: Load Typescript typings for ES6 in a file named typings.json OLD
- 9. Introduction - ngCrud Angular2 Angular CLI 9 • Easy to Use with simple Commands • NPM Based • Create an App with All Boilerplate • Generate Components, Routes, Services, Pipes etc. • Automatically generate Simple Test Shells & E2E Tests • Run Dev Server
- 10. Introduction - ngCrud Angular2 Angular Universal 10 • NodeJS & Express Integration • ASP.net Support Also Possible • Server Side Initial Rendering • Improves SEO • Fastest Critical/First Render • Better Perceived Performance • Initial Data Loaded with the Page itself Example: http://site-map-success.herokuapp.com/
- 11. Introduction - ngCrud Angular2 Angular Mobile & PWA 11 • Performance of native, discoverability of the Web • Automatic Progressive Web Apps $ ng new hello-mobile --mobile • Cross Platform Support https://github.com/jelbourn/ material2-app.git
- 12. Introduction - ngCrud Angular2 Angular 2 Speed & Performance 12 • Change Detection • Code Splitting • Code-splitting enables users to only load code required to render the view they request. • Code generation - CLI, Server Rendering, Ahead of Time Compilation • Faster Rendering • Fewer Asynchronous Requests • Smaller Angular framework download size • Using Tree Shaking
- 13. Introduction - ngCrud Angular2 Angular 2 Data Libraries 13 Angular 2 - Redux
- 14. Introduction - ngCrud Angular2 Angular 2 Cross Platform 14 Native Script for Angular 2 by Telerik Ionic 2 with Angular 2 React Native with Angular 2 https://github.com/preboot/angular2- universal-windows-app Electron Angular 2
- 15. Introduction - ngCrud Angular2 Angular 2 Component 15 import {bootstrap} from 'angular2/platform/browser'; import {Component} from 'angular2/core'; @Component({ selector: 'app', template:`<input type='text' placeholder= "Enter first name " [(ngModel)] = "firstName"> <br>Hello {{firstName}} ` }) class GreetingComponent { firstName: string; lastName: string; } bootstrap(GreetingComponent);
- 16. Introduction - ngCrud Angular2 Angular 2 Hands-On 16 Most popular use case for any App - CRUD APP - List of Model Objects - Show/Hide Details - Add New Model Object