Upgrade to Pro — share decks privately, control downloads, hide ads and more …


Johnny Estilles
October 22, 2016


Johnny Estilles

October 22, 2016


  1. Intro to AngularJS 1.x Johnny Estilles / Freelancer.com

  2. None
  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 [email protected] 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