Introduction to AngularJs
Download as PPTX, PDF1 like4,638 views
This document provides an introduction and overview of AngularJS. It discusses what AngularJS is, why it was developed, and its main building blocks including modules, controllers, directives, services and scope. It provides examples and definitions of these concepts and recommends ways to get started with AngularJS development.
Introduction to AngularJs
- 1. Introduction to By Ahmed EL-Harouny 21 August 2014
- 2. Page Agenda › What is AngularJS? › Why? › Getting Started › AngularJS Building Blocks › Controllers › Directives › Services › Scope / Copyright ©2014 2 by Readify Pty Ltd
- 3. Page What is AngularJS? • A JavaScript framework for building client side applications that runs in the browser. • Started by Google but quickly became a popular open source project. • It aims to simplify development, maintaining and testing applications. / Copyright ©2014 3 by Readify Pty Ltd
- 4. Page Why? / Copyright ©2014 4 by Readify Pty Ltd • Dependency Injection • Data Binding • Routing • Templates • MVC or MVVM • Ajax • Animation • And more!
- 5. Page Getting Started Demo (link) / Copyright ©2014 5 by Readify Pty Ltd
- 6. • Modules • Controllers • Directives • Filters • Services • Configs • Routes Page AngularJS Building Blocks / Copyright ©2014 6 by Readify Pty Ltd Services Recipes Constant
- 7. Page Modules - A module is a logical container for the different parts of your app – controllers, services, filters, directives, etc. - A module is not a namespace. / Copyright ©2014 7 by Readify Pty Ltd Name Dependencies
- 8. Page Modules / Copyright ©2014 8 by Readify Pty Ltd
- 9. Page Modules Demo (link) / Copyright ©2014 9 by Readify Pty Ltd
- 10. Page Controllers - A Controller is a JavaScript constructor function that is used to work with scope (view model). - Controllers are attached to DOM using ng-controller directive. / Copyright ©2014 10 by Readify Pty Ltd Name Dependencies Construction Function
- 11. Page Controllers Demo (link) / Copyright ©2014 11 by Readify Pty Ltd
- 12. Page Directives Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behavior to that DOM. Built-In Directives / Copyright ©2014 12 by Readify Pty Ltd
- 13. Page Directives Custom Directives - Custom directive can be used to provide a declarative markup approach and reusability. - There are many ways to declare a directive in markup using (HTML attributes, elements, comments and CSS classes). - Prefixing directive names to prevent confusion with other HTML attributes and elements is a must. / Copyright ©2014 13 by Readify Pty Ltd
- 14. Page Directives Demo (link) / Copyright ©2014 14 by Readify Pty Ltd
- 15. - Services is a way to organize and share code across app. - Services are lazy initialized and singleton. Built-In Services Page Services • $http • $log • $window Custom Services / Copyright ©2014 15 by Readify Pty Ltd
- 16. Page Services Demo (link) / Copyright ©2014 16 by Readify Pty Ltd
- 17. - Scopes are driven by directives. - Any scope belongs exactly to one DOM element. Page Scope / Copyright ©2014 17 by Readify Pty Ltd
- 18. - AngularJS will always create a root scope driven by the ng-app Page Scope directive. ng-app ng-controller ng-controller / Copyright ©2014 18 by Readify Pty Ltd
- 19. Page Tips • Prefix object names. • Install Batarangchrome extension. • Know all ng-* directives. • Read Developer Guide (link). • Use chrome. / Copyright ©2014 19 by Readify Pty Ltd
- 20. Thank you