Introduction to Angular 2
•Download as PPTX, PDF•
2 likes•1,631 views
I presented it at my company to give them a brief introduction of Angular 2, which were published officially recently. TypeScript is using in Angular 2 by default to extend a lot of benefits on writing best code.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to Angular 2
Similar to Introduction to Angular 2 (20)
Recently uploaded
Recently uploaded (20)
Introduction to Angular 2
- 2. Agenda • Single Page Application (SPA) • What and Why Angular? • Angular 2. • Its concept • Github Demo App • Q&A 11/1/2016 Zyllem@Angular 2
- 3. Single Page Application? 11/1/2016 Zyllem@Angular 2
- 4. Traditional Application JS begin parsing and executing to initialize date time picker, modal, etc. 11/1/2016 Zyllem@Angular 2
- 5. Single Page Application AngularJS start parsing, downloading template, stylesheet, etc. and doing compiler on the browser 11/1/2016 Zyllem@Angular 2
- 7. What is Angular? • Angular is JavaScript framework. • Building client side application. • Using HTML,CSS and a programing language such as JavaScript. 11/1/2016 Zyllem@Angular 2
- 9. Why Angular 2? 11/1/2016 Zyllem@Angular 2 • Performance. • Component Based-UI. No more concept of controllers • Goodbye $scope • Modern – using new features – classes, object with support of ES6 / TypeScript
- 10. 11/1/2016 Zyllem@Angular 2 Angular 1 Controller
- 11. 11/1/2016 Zyllem@Angular 2 Angular 2 Component
- 12. Component 11/1/2016 Zyllem@Angular 2 • View layout • Created with HTML • Includes binding and directive • Code supporting the view • Created with TypeScript • Includes • Property - data • Method - logic • Extra data • Defines with decorator
- 13. Angular 2 Concepts 11/1/2016 Zyllem@Angular 2
- 14. Component 11/1/2016 Zyllem@Angular 2 LeftCmp CenterCmp MapCmp TopCmp
- 15. Boostrapping/Loading Application 11/1/2016 Zyllem@Angular 2 Index.html Systemjs.config.js main.ts app.module.ts app.component.ts
- 16. Available Language 11/1/2016 Zyllem@Angular 2 • ES5(EcmaScript 5) – Run in the browser. • ES6(EcmaScript 2015) – Lots of new features (classes, let, arrow) • TypeScript – Superset of JavaScript, Strong typing, IDE • Dart.
- 17. TypeScript 11/1/2016 Zyllem@Angular 2 • Open source language. • Superset of JavaScript. • Transpiles to plain JavaScript. • Strongly typed. • .ts Extension. • Class-Based object orientation.
Editor's Notes
- Since the dawn of the Web, the browsing experience has worked like this: a web browser would request a particular page (say, “http://www.zyllem.com/”), causing a server somewhere on the Internet – this case Azure to generate an HTML page and send it back. This has worked well because browsers weren’t very powerful and HTML pages represented documents that were mostly static and self-contained. JavaScript, created to allow web pages to be more dynamic, didn’t enable much more than image slideshows and date picker widgets. After years of advances in personal computing, creative technologists have pushed the web to its limits, and web browsers have evolved to keep up. Now, the Web has matured into a fully-featured application platform, and fast JavaScript runtimes and HTML5 standards have enabled developers to create the rich apps that before were only possible on native platforms.
- It wasn’t long before developers started to build out entire applications in the browser using JavaScript, taking advantage of these new capabilities. Apps like Gmail, the classic example of the single-page app, could respond immediately to user interactions, no longer needing to make a round-trip to the server just to render a new page. The bulk of the application logic (views, templates, controllers, models, internationalization, etc.) lives in the client, and it talks to an API for data. The server could be written in any language, such as Ruby, Python, or Java, and it mostly handles serving up an initial barebones page of HTML. Once the JavaScript files are downloaded by the browser, they are evaluated and the client-side app is initialized, fetching data from the API and rendering the rest of the HTML page. This is great for the user because once the app is initially loaded, it can support quick navigation between pages without refreshing the page, and if done right, can even work offline. This is great for the developer because the idealized single-page app has a clear separation of concerns between the client and the server, promoting a nice development workflow and preventing the need to share too much logic between the two, which are often written in different languages.
- Before we can use the external class, we need to tell the module loader where to find it. We do It with import statement. Same purpose with using in C# that allow us to use exported members from external modules. Or import from 3rd Decorator is the function that adds metadata into a class. Prefix with @ Declare immediately right above the class. Similar to attribute of other programming languages Use @Component to identify class as the Angular component [Authorize] public class MainController(){ }
- A component controls a patch of screen called a view/template. Example App root with Navigation List of Delivery Delivery detail
- Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules. While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. An Angular module, whether a root or feature, is a class with an @NgModule decorator. There are no standard way to group modules, but the recommendations are: Features as a module Shared utilities as a module Customer: CustomerListComponent, CustomerDetailComponent, CreateCustomerComponent, CustomerService Product: ProductListComponent, ProductDetailComponent, CreateProductComponent, ProductService
- We have the index.html file set up to host the application by select the selector from the root component as the directive. Compile application in the browser dynamically and launch it be platformBrowserDynamic BrowserModule is the module needed for every web application run on browser