AngularJS: Overview & Key Features
2 likes1,571 views
The document provides an overview of AngularJS, a JavaScript framework for building single-page applications (SPAs) developed by Google. It discusses key features such as client-side MVC, modules, dependency injection, two-way data binding, services, filters, and routing, along with guides for further learning. Relevant web resources, documentation, and community support channels are also mentioned to assist users.
More Related Content
What's hot (20)
Similar to AngularJS: Overview & Key Features (20)
Recently uploaded (20)
AngularJS: Overview & Key Features
- 1. Overview & Key Features MOHAMMAD ASMAR NETWAYS – SOFTWARE ENGINEER
- 2. Agenda A. Introduction B. AngularJS Core Features C. Guides & Help 1. Client Side MVC 2. Modules 3. Dependency Injection 4. Scopes 5. Controllers 6. Expressions 7. Two-Way Data Binding 8. Directives 9. Services 10. Filters 11. Validators 12. Routing
- 3. A. Introduction 1. What is angular? 2. Why angular?
- 4. 1.1. What is angular ? AngularJS is a JavaScript framework to build single page applications (SPA) and web apps that run on a web browser using html. Created by Misko Hevery and published in 2009 Open Source, supported by Google. Released under MIT License Website: https://angularJS.org
- 6. 1.2. Why angular? Facilitate building single-page applications Page never reloads No server-side page rendering Based on the Model View Controller Concept Provide solutions for: Routing – handling updates to the URL hash fragment Templating – dynamically creating and updating HTML based on templates and models Data binding – synchronize the model and user interface Separation of concepts and standalone modules testing Efficiency of new features Well documented and easy to learn
- 7. B. Angular Core Features Key Features of ANGULARJS
- 8. 1. Client-Side MVC View ControllerModel 1. Event or User Action or View Load 2. Maps to particular Model after fetching the data 3. Implement the Business Logic on response data and Bind it to View Controller : • Business Logic • Application Scope & Functionality Model: • Notify view changes • Data in general View : • Renders the Model data • Send User actions/events to controller • UI
- 9. 2. Modules You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc. Split one JS file into several files, use several apps separately on one page. Angular itself is split into modules. (see http://ngmodules.org). The file angular.js is a module with core functionality.
- 10. 2.1 Usage The angular.module is a global place for creating, registering and retrieving Angular modules. Attached to the DOM with ng-app directive.
- 11. 3. Dependency Injection Injected Dependencies Inline Array Annotation Dependency Injection (DI) is a software design pattern. Instantiates and caches used components
- 12. 4. Scopes Scope is an object that refers to the application model. It is an execution context for expressions. Scopes can watch expressions and propagate events. Shares variables between view and controller
- 14. 5. Controllers Controllers create new child scopes Initialize the scope with data that view needs to display May contain: Scope variables Scope functions Should contain only business logic Set up the initial state of $scope object Add behavior to the $scope object Attached to the DOM via the ng-controller directive
- 15. 5.1. Usage Defining Controller: Using Controller in app: Normal method Advanced method (with Routing)
- 16. 6. Expressions ❖ Double curly braces syntax or interpolation bindings: ➢ Contains basically JavaScript ➢ Accesses scope variables and scope functions Expressions may also output functions and pass parameters: <h1>1 plus 2 equals <em>{{add(1,2)}}</em></h1>
- 17. 6.1 usage Examples: {{a+b}} {{alert('Does this work?')}} {{'Just outputs this string'}} {{user.name}}
- 18. 7. Two-Way Data Binding
- 19. 7.1. Example Binding way: model > view Binding way: view > model
- 20. 8. Directives ❖ Everything in your DOM may be a directive: ➢ Elements (<ng-include></ng-include) ➢ Classes (class="ng-include: data;") ➢ Attribute (<b ng-include="data">) ➢ Comments (<!-- directive: ng-include data -->) ❖ Directives attach custom behavior to those elements or transform them
- 21. 8.1. AngularJS provided directives ❖ AngularJS provides plenty of its own directives: ngClass ngClick ngInclude ngModel ngShow ngApp ngBind ngChange ngChecked ngRepeat
- 22. 8.2. Different syntax available Directive ngModel: <input ng-model="foo"> <input data-ng:model="foo"> <input data-ng-model="foo"> <input ng:model="foo"> <input ng_model="foo"> <input x-ng-model="foo"> Might be necessary for html/xhtml validation reasons As per angular guides > Prefer using the dash-delimited format If you want to use an HTML validating tool, you can instead use the data-prefixed version
- 23. 8.3. Usage Using angular directives
- 24. 8.3. Usage Creating a custom directive with .directive() function
- 25. 8.3. Usage Using custom directive in the view
- 26. 9. Services Substitutable objects that are wired together using dependency injection (DI). Reusable component & shared data Angular offers several useful services They are prepended with $ Do not use $ in your own services
- 27. 9.1. Useful services provided by Angular $http - For ajax requests $interval and $timeout - Repeats and delays $rootScope - Very top scope of application $location - URL and its parts of current site $window - Wrapper of global window. Useful for tests.
- 28. 9.2. Usage (with Dependency Injection)
- 29. 10. Filters Filters are used for formatting data displayed to the user Functions which modify expressions But does not touch the original data Using filters: {{name | filter1 | filter2: option}}
- 30. 10.1. AngularJS provided filters AngularJS provides few of its own filters: currency date filter json limitTo lowercase number orderBy uppercase
- 31. 10.2. Usage {{price | currency:'€'}} // €1,234.56 {{name | uppercase}} // ARMIN {{created | date:'dd.MM.yyyy'}} // 20.06.2014 Options of filters may be filled by scope variable: {{created | date:format}}
- 32. 10.3. Writing your own fiters
- 33. 11. Validators Forms and/or fields get validated By HTML5 validation notation (eg. type="email") Independent from browser validation, Angular: Checks values on its own Adds indicating classes to fields and forms (eg. ng-invalid) Adds $invalid property to scope of form You may write your own validators using directives
- 34. 11.1. Examples
- 35. 12. Routing Enables deep-linking for single-page applications. Depends on angular’s ngRoute module. Configure rules into $routeProvider
- 36. 12.1. usage
- 37. C. Guides & Help Guide: https://docs.angularjs.org/guide API: https://docs.angularjs.org/api Many articles, videos and examples on: YouTube: https://www.youtube.com/user/angularjs PluralSight: http://app.pluralsight.com/courses/angularjs-get-started Stackoverflow: http://stackoverflow.com/questions/tagged/angularjs?sort=votes CodeSchool: https://www.codeschool.com/courses/shaping-up-with-angular-js
- 38. Thanks for your ttention!