Intro_to_AngularJS_1.x.pdf

Transcript

1. Intro to AngularJS 1.x Johnny Estilles / Freelancer.com
3. Audience This tutorial is designed for software professionals who want to learn the basics of AngularJS and its programming concepts in simple and easy steps. It describes the components of AngularJS with suitable examples.
4. Prerequisites • a basic understanding of JavaScript and any text editor • an understanding of other web technologies such as HTML, CSS, AJAX, etc.
5. http://codepen.io/collection/AMrkaB/
6. https://angularjs.org/ HTML enhanced for web apps!
7. What is AngularJS? AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.
8. Objectives • General Concepts • Your first AngularJS App • Basic Directives • Expressions • Controllers • Filters • Other Directives • Scopes • Services • Dependency Injection • Custom Services • Custom Directives
9. General Concepts
10. Features • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA). • AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way. • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser. • AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
11. Concepts
12. MVC Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts: • Model − the lowest level of the pattern responsible for maintaining data. • View − responsible for displaying all or a portion of the data to the user. • Controller − software code that controls the interactions between the Model and View.
13. MVC
14. Installing AngularJS Node Package Manager npm install angular@1.5.8 Bower Package Manager bower install angular#1.5.8 CDN https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js
15. Your First AngularJS App
16. Your First AngularJS App <h1>Sample Application</h1> <div ng-app = ""> <p> Enter your Name: <input type = "text" ng-model = "name"> </p> <p> Hello <span ng-bind = "name"></span>! </p> </div>
17. Basic Directives
18. Directives • AngularJS directives are used to extend HTML. • These are special attributes starting with ng- prefix.
19. Directives: ng-app <div ng-app = ""> ... </div>
20. Directives: ng-model <div ng-app = ""> ... <p> Enter your Name: <input type = "text" ng-model = "name"> </p> </div>
21. Expressions
22. Expressions Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression }}. Expressions behaves in same way as ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used.
23. <p>Total: ₱{{cost * quantity}}</p> <p>Hello {{firstname + " " + lastname}}!</p> <p>Student No: {{student.number}}</p> <p>Grade - Math: {{grades[3]}}</p> Expressions Examples
24. Controllers
25. Controllers AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller can accepts $scope as a parameter, which refers to the application/module that controller is to control.
26. <div ng-controller="studentController"> ... </div> Controllers
27. Filters
28. Filters Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. Following is the list of commonly used filters. 1. uppercase - converts a text to upper case text 2. lowercase - converts a text to lower case text 3. currency - formats text in a currency format 4. filter - filter the array to a subset of it based on provided criteria 5. orderby - orders the array based on provided criteria.
29. Name in Upper Case: {{name | uppercase}} Name in Lower Case: {{name | lowercase}} fees: {{student.fees | currency}} Filters
30. Other Directives
31. Other Directives Following directives can be used to bind application data to attributes of HTML DOM Elements. 1. ng-disabled - disables a given control 2. ng-show - shows a given control 3. ng-hide - hides a given control 4. ng-click - represents a AngularJS click event.
32. <button ng-disabled="disable"> Click Me! </button> <button ng-show="show">Click Me!</button> <button ng-hide="hide">Click Me!</button> <button ng-click="counter = counter + 1"> Click Me! </button> Other Directives
33. Scopes
34. Scopes Scope is a special javascript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.
35. var app = angular.module("app", []); app.controller("ctrl", function($scope) { $scope.message = "In Controller"; $scope.type = "Anything"; }); Scopes
36. Services
37. Services AngularJS supports the concepts of "Separation of Concerns" using services architecture. Services are javascript functions and are responsible to do a specific tasks only. This makes them an individual entity which is maintainable and testable. Controllers, filters can call them as on requirement basis. Services are normally injected using dependency injection mechanism of AngularJS.
38. Service: $http AngularJS provides the $http service to fetch data from a server via an AJAX request. AJAX stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files.
39. function studentController($scope, $http) { var url = "http://test.com/resource"; $http .get(url) .success(function(response) { $scope.students = response; }); } Service: $http
40. Dependency Injection
41. Dependency Injection A software design pattern in which components are given their dependencies instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in making components reusable, maintainable and testable.
42. Dependency Injection AngularJS provides a supreme Dependency Injection mechanism. It provides the following core components which can be injected as dependencies: 1. Value 2. Constant 3. Factory 4. Service 5. Provider
43. var app = angular.module("app", []); app.value("default", 5); ... app.controller('controller', function($scope, default) { $scope.number = default; ... }); Dependency Injection
44. Custom Services
45. Services AngularJS provides many inbuilt services for example, $http, $route, $window, $location etc. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol. There are three ways to create a service: 1. Factory 2. Service 3. Provider
46. var app = angular.module("app", []); app.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); Services
47. Custom Directives
48. Custom Directives Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.
49. Custom Directives AngularJS provides support to create custom directives for following type of elements. 1. Element directives − Directive activates when a matching element is encountered. 2. Attribute − Directive activates when a matching attribute is encountered. 3. CSS − Directive activates when a matching css style is encountered. 4. Comment − Directive activates when a matching comment is encountered.
50. <student name = "Mahesh"></student> <student name = "Piyush"></student> Custom Directives
51. Completed Objectives • General Concepts • Your first AngularJS App • Basic Directives • Expressions • Controllers • Filters • Other Directives • Scopes • Services • Dependency Injection • Custom Services • Custom Directives
52. Thank You! Johnny Estilles / Freelancer.com