What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edureka
2 likes1,159 views
The document outlines the evolution of web development and introduces AngularJS as a client-side framework created by Google. It discusses the structure and components of Angular 2, including its architecture, key building blocks like modules, components, and services, and features such as data binding and dependency injection. Additionally, the document explains the significance of single page applications and provides an overview of how to create an Angular 2 program.
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edureka
- 2. www.edureka.co/angular-js Agenda ❖ Evolution of Web Development ❖ What is AngularJS ? ❖ Angular 2 and It’s Architecture ❖ Components of Angular 2 ❖ Your First Angular 2 program
- 3. www.edureka.co/angular-js Challenges of Web Development
- 4. www.edureka.co/angular-js Evolution of Web Development • Client-side scripting is executed on the client’s browser instead of the web-server • It alleviates some of the burden on your web server when running a web application. • It can be used for page navigation, data validation and formatting. >Client-side processing Less Server overhead Request> Response
- 5. www.edureka.co/angular-js Evolution of Web Development • JQuery is a specific library of JavaScript code. • It is a DOM manipulation library that makes it easier to use JavaScript on your website. • jQuery wraps the complex code into simple methods whether it required to make AJAX calls or manipulate the DOM. >
- 6. www.edureka.co/angular-js Evolution of Web Development • JQuery has no real structure, the developer has full freedom to build projects as they see fit. • But the lack of structure can lead to confusion on larger projects with no clear design direction or code maintainability. For these situations, a framework like AngularJS can be a big help.
- 8. www.edureka.co/angular-js AngularJS Introduction • AngularJS was developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech LLC. • It is a open source JavaScript client-side framework maintained by Google and a group of developers and enterprises
- 9. www.edureka.co/angular-js What is AngularJS? • Client side JavaScript framework to develop a dynamic web application • Help developers build SPAs in accordance with best practices for web development • Data binding and dependency injection eliminate much of the code you would otherwise have to write • Extends HTML attributes with Directives, and binds data to HTML with Expressions
- 10. www.edureka.co/angular-js AngularJS - Manipulating DOM • Traditionally, the view modifies the DOM to present data and manipulates the DOM (or invokes jQuery) to add behaviour • AngularJS puts all the DOM manipulation code into directives, thus easily separating that code out from the view and making it available as standalone reusable units View DOM manipulation View DOM manipulation Directives
- 12. www.edureka.co/angular-js Single Page Application A Single Page Application is a web application that requires only a single page load in a web browser. • Your browser fully renders the DOM a single time. • After this, background JavaScript performs any server interactions and modifies the view as needed. Navigation Bar CoursesSide Bar { } { } { }
- 14. www.edureka.co/angular-js Angular 2 Mobile development Desktop development is much easier when mobile performance issues are handled first Modularity Much core functionality has moved to modules, producing a lighter, faster core
- 15. www.edureka.co/angular-js Angular 2 Using TypeScript Class-based Object Oriented Programming, Static Typing, Generics, Lambdas ECMAScript 6 Iterators, For/Of loops, Python-style generators, Reflection
- 17. www.edureka.co/angular-js Architecture Template < > Injectors Directives { } Components { } Module Components { } Module Service { } Module Fn ƛ Module Value 3.14 Services { } Property Binding Event Binding Metadata Metadata
- 18. www.edureka.co/angular-js Main Building Blocks Of Angular 2 Components Modules Templates Metadata Services Data Binding Directives Dependency Injection
- 19. www.edureka.co/angular-js Building Blocks - Components Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 • Encapsulates the template, data and the behaviour of a view { } { } { } { } { } { } Root Component
- 20. www.edureka.co/angular-js Building Blocks - Components Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8
- 21. www.edureka.co/angular-js Building Blocks - Components Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 Navigation Bar Side Bar { } { } Course1 Course3 Course4 Course2 { } { } { } { }
- 22. www.edureka.co/angular-js Building Blocks - Components Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 Edureka Nav bar Course Side BarCourses
- 23. www.edureka.co/angular-js Building Blocks - Modules Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 • A cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities • Every Angular app has at least one Angular module class, the root module (AppModule) • An Angular module, whether a root or feature, is a class with an @NgModule decorator Module: Templates < > Directives { } Components { } Services { }
- 24. www.edureka.co/angular-js Building Blocks - Templates Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 Root Component { } Root Template < > Child B Component { } Child B Template < > Child A Component { } Child A Template < > • You define a component's view with its companion template • A template is a form of HTML that tells Angular how to render the component • Although this template uses typical HTML elements but it also uses Angular's template syntax
- 25. www.edureka.co/angular-js Building Blocks - Metadata Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 • Metadata tells Angular how to process a class • In TypeScript, you attach metadata by using a decorator • The template, metadata, and component together describe a view Components { } Template < > Metadata
- 26. www.edureka.co/angular-js Building Blocks - Services Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 • Service is a plain class that encapsulates any non logic not related to view • Examples include - logging service, data service, tax calculator etc. • Service accomplishes tasks that fetch data from the server, validate user input, or log directly to the console { } Data Access Logging Business Logic Configuration COMPONENTS SERVICES {
- 27. www.edureka.co/angular-js Building Blocks – Data Binding Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 • Responsible for pushing data values into the HTML controls and turning user responses into actions and value updates • The three forms of binding: • Interpolation • Property binding • Event binding NOTE : • In two-way binding, a data property value flows to the view from the component as with property binding • The user's changes also flow back to the component, resetting the property to the latest value, as with event binding Components { } Template < > Property Binding Event BindingMetadata
- 28. www.edureka.co/angular-js Building Blocks – Directives Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection 8 • Modify DOM elements and modify their Behaviours • Built-in directives helps in - • Extend or control DOM • Adding classes • And much more … • You can also write your own directives
- 29. www.edureka.co/angular-js Building Blocks – Dependency Injection Templates Metadata Services Data binding Components1 3 4 5 6 Directives7 Modules2 Dependency Injection8 • A way to supply a new instance of a class with the fully-formed dependencies it requires like services • Provide new components with the services they need • An injector can create a new service instance from a provider Service Instances Class
- 30. www.edureka.co/angular-js Your First Angular 2 program
- 31. www.edureka.co/angular-js Put on your Angular Glass