Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Understanding AngularJS Fundamentals
Similaire à Understanding AngularJS Fundamentals (20)
Understanding AngularJS Fundamentals
- 2. What you should understand HTML CSS JavaScript BDD – Behavior driven development TDD – Test Driven Development Abbreviations such as; XML - Extensible Markup Language JSON - JavaScript Object Notation DOM - Document Object Model AJAX - Asynchronous JavaScript and XML
- 3. Why use AngularJS It’s a Framework Language that; Helps organize your JavaScript code Makes your code reusable and maintainable Creates a fast and responsive websites and applications Makes your code easy to test It works very well with JQuery Only use JQuery when you know Angular doesn’t have the solution
- 5. Two Way Data Binding
- 6. Directives Similar to built in JavaScript functions Directives are declared in the opening tags of your HTML code Angular has a large list of directives - examples include; ng-app - initializes an AngularJS application ng-init - initializes application data ng-model - binds the value of HTML controls (input, select, textarea) to application data ng-repeat - clones HTML elements once for each item in a collection Is possible to create own custom directives
- 7. Modules An AngularJS module defines an application A module is a container for the different parts of an application All application components should belong to a module Modules should be declared in a .JS file
- 8. Controllers AngularJS controllers control the functionality and data of AngularJS applications AngularJS controllers are regular JavaScript Objects e.g. app.controller(‘myController’, function(){ this.property=1; }); The ng-controller directive defines the controller e.g. <body ng-app=”testApp”> <div ng-controller=”myController as (alias)”> </div> </body>
- 9. Expressions Are declared with double curly braces {{ Expression }} They display and compute different types of data Links our model data to our view Expressions can do many different things; - Compute mathematical equations {{ 4+5-6 }} - Compute variable equations {{ price * units }} - Displays variable data bound by ng-model {{ variable }} - Displays element values from an array {{ array[3] }} - Displays data from an object {{ person.firstName }}
- 10. Validation We deal with 4 main Directives for validation in Angular; Ng-pristine - User has not interacted with the field yet Ng-dirty - User has interacted with the field Ng-valid - The field content is valid Ng-invalid - The field content is invalid Combinations of these directives, give us the ability to validate within a scope
- 11. Validation .. Insert ‘novalidate’ at the end of opening form tag Insert ‘required’ at the end of opening tags where information is needed A few helpful directives when dealing with forms; Ng-show - Will show scope if true Ng-hide - Will hide scope if true Ng-disabled - Will disable parts of form if true Ng-submitted - Is set if the form was submitted
- 12. Filters Angular has 5 different built in filters; currency - Format a number to a currency format filter - Select a subset of items from an array Lowercase - Format a string to lower case orderBy - Orders an array by an expression uppercase - Format a string to upper case The vertical bar symbol ‘|’ is what tells Angular that we’re applying a filter.
- 13. Filters .. We can also create our own custom filter app.filter(‘testFilter’, function(){ return function(input){ }; });
- 14. Ng-Include Used only for very basic snippets of code and JavaScript When you use a snippet of code repeatedly, we can cut and paste it into a new .HTML file To make an AJAX request for the code in this new .HTML file, we use the directive ng-include. <div ng-include = “ ’ (name_of_page).html ’ ” > </div> Now the code within that .HTML file will be used in that div scope
- 15. Custom Directives Should be created when dealing with complex JavaScript Declared within a function linked to a module just like a controller or filter app.directive(‘directiveTitle’, function(){ return{ Restrict: ‘E’, templateUrl: ‘(name_of_page).html’, controller: function(){ (Add here any JavaScript from controller) }, controllerAs: ‘(alias_used_in_code_in_new_.html_file)’ }; }); We call this directive as follows <directive-title> </directive-title>
- 16. AngularJS Functions The AngularJS Global API is a set of global JavaScript functions for performing common tasks like: Comparing objects Iterating objects Converting data Here is a list of some API functions; angular.lowercase() - Converts a string to lowercase angular.uppercase() - Converts a string to uppercase angular.isString() - Returns true if the reference is a string angular.isNumber() - Returns true if the reference is a number
- 17. Dependency Injection var app = angular.module(‘myModule’, [ ]); Empty array of dependencies It’s a software design pattern Components are given 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
- 18. Dependency Injection - Services When Angular loads it creates an injector, when a service is declared, it is registered with the injector The Injector takes in the service(s) and passes them into a component as an argument(s) this is called Dependency Injection app.controller('myCtrl', [‘$http’, function($scope, $http){}]); Declare our service Pass service as parameter to controller An array of dependencies must be created when using any Angular service, for all angular components
- 19. What is a Service It provides us method to keep data across the lifetime of the angular app It provides us method to communicate data across the controllers in a consistent way Is a singleton object and it gets instantiated only once per application It is used to organize and share data and functions across the application You can also create you own custom service with the use of either; .factory .service
- 20. Custom Service - Service A simple example using .service is below; Var module = angular.module(‘myApp’, []); module.service(‘userService’, function(){ this.users = [‘John’, ‘James’, ‘Jake’]; this.addUser = function(user) { } }); It implements two lines of code in the background var this = {} return this Is known and treated as a constructor function
- 21. Custom Service - Factory A simple example using .factory is below; Var module = angular.module(‘myApp’, []); module.factory(‘userService’, function(){ Var peeps = {}; peeps.users = [‘John’, ‘James’, ‘Jake’]; peeps.addUser = function(user) { } return peeps; }); We create an empty object and return that object in a .factory service We use a factory service instead of a service service, when we want to return a function instead of an object.
- 22. Services - Summary Angular services will always start with a $ sign e.g. $http Angular supplies many useful services like; $http $route $window $location It’s our job to read through the Angular API to Understand what built in services they have supplied
- 23. Summary Two-way Data Binding Helps create fast and responsive websites Modules define our application Controllers control our application Dependency Injection Injector Dependency Array Services organize and share data and functions across the application Singleton design pattern