This presentation contains important information introducing Angular 2& above to the Web Developers who have either used AngularJS 1 or starting afresh with JS App Development.

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

17. Angular2 17
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
yehtechnologies@gmail.com
17