Angular js for Beginnners
Download as PPTX, PDF•1 like•196 views
AngularJS is a JavaScript MVC framework that allows developers to create dynamic web applications. It uses HTML as the template language and allows two-way data binding between models and views. Some key features include directives, modules, controllers, services and filters. AngularJS applications can be unit tested and services can be injected for dependency injection. Routing in AngularJS allows single page applications without reloading the entire page.
![• angular.module(‘myApp', []);
Creating a module with no dependencies
• angular.module(‘myApp', ['myapp.ui', 'yourapp.diagram']);
Creating a module with 2 other dependent modules
• angular.module(‘myApp');
• looks an existing module to make it available to use, add, or modify in the
current file.
Module name we
define
Array of dependent
modules
Modules](https://image.slidesharecdn.com/angularjs-170509095048/85/Angular-js-for-Beginnners-12-320.jpg)
![Routing: how to code
• Import angular.js and angular-route.js
• Use dependancy model to ngRoute
var myvar = angular.module('org',['ngRoute']);
• Config the route provider
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function or array,
controllerAs: string,
resolve: object<key, function>
});](https://image.slidesharecdn.com/angularjs-170509095048/85/Angular-js-for-Beginnners-52-320.jpg)
Angular js for Beginnners
- 2. What is AngularJS • JavaScript MVC framework for the Web • pure JavaScript and HTML • Unit Testable • For Web and Mobile • Less code • Can integrate 3rd party libraries such as jQueryUI/BootStrap
- 3. MVC • The model is the driving force of the application. This is generally the data behind the application, usually fetched from the server. Any UI with data that the user sees is derived from the model, or a subset of the model. • The view is the UI that the user sees and interacts with. It is dynamic, and generated based on the current model of the application • The controller is the business logic and presentation layer, which performs actions such as fetching data, and makes decisions such as how to present the model, which parts of it to display, etc.
- 5. Task – 1 • Write a Angular Application which prints the value of below expressions: • 5 *5 + 2*2 • 10/5*2-100
- 6. AngularJS Directives • Markers on DOM elements (such as elements, attributes, css, and more). • Used to create custom HTML tags that serve as new, custom widgets. • AngularJS has built-in directives (ngBind, ngModel...)
- 7. directive ng-app • first and most important directive • Tells the section of HTML that AngularJS controls • Need to put in any tag, preferable at <html> or <body> • Anything outside of the tag would not be processed
- 9. directive ng-model • used with input fields, user to enter any data and get access to the value in JavaScript. • In ng-model="n1", AngularJS stores the value that the user types into in a variable called "n1"
- 10. directive ng-bind • Binds with the Angular JS variable • ng-bind in <span> <span ng-bind="n1" is similar to {{n1}}
- 11. Modules • Modules in AngularJS are similar to packages in java • Container for the different parts of your app – controllers, services, filters, directives, etc. • Can define its own controllers, services, factories, and directives which are accessed throughout the module. • Can depend on other modules as dependencies and made available to all the code defined in this module.
- 12. • angular.module(‘myApp', []); Creating a module with no dependencies • angular.module(‘myApp', ['myapp.ui', 'yourapp.diagram']); Creating a module with 2 other dependent modules • angular.module(‘myApp'); • looks an existing module to make it available to use, add, or modify in the current file. Module name we define Array of dependent modules Modules
- 13. Controller • Fetch data from the server for UI • Are regular JavaScript Objects. • ng-controller directive defines the application controller.
- 14. Parent module Child modules Defined 2 Controllers Using parent module only
- 15. Task – 2 • Write an Angular Application which prints current date and time on the screen
- 16. controllerAs • Can be used in AngularJS 1.2 and later • Allows to define the variables on the controller instance using the this keyword instead of $scope • Directly can be referred through the controller from the HTML
- 17. controllerAs $scope.name = 'some value' changed to this.name = 'some value'; ng-controller="EmpController" changed to ng-controller="EmpController as emp" {{ name }} changed to {{ emp.name }}
- 19. directive ng-repeat • Similar to for each loop • Allows to iterate over an array • Allows to iterate over keys and values of an object • Syntax: ng-repeat="eachVar in arrayVar"
- 21. Calculator
- 22. Task – 3 • Write an Angular Application as • Create a list which stores value of 5 students (id, name, marks) in a school • In HTML, print the name and marks of all the students.
- 23. Calculator
- 24. Calculator
- 25. Forms • ng-submit • ng-disabled = "myForm.$invalid" • required
- 26. form
- 27. JS
- 28. Task – 4 • Write an Angular Application • Add few controls with different validation • Add a submit button in the form. • Submit button should be enabled only when all the validations are passed.
- 29. Error Handling • Form validation • required • ng-required • ng-minlength • ng-maxlength • ng-pattern • type="email" • type="number" • type="date" • type="url"
- 30. Dependency Injection • Any service known to AngularJS can be injected into any other service, directive, or controller by stating it as a dependency. • AngularJS will automatically create the entire chain before injecting.
- 32. Services • Service that is a reusable API or substitutable objects, which can be shared across our applications. • A service in AngularJS can be implemented as a • factory • service • provider
- 33. Service types • Build-in • Custom
- 34. Common built-In Services • $window • $log • $http • $location • $timeout • $interval Points to remember: • AngularJS prefixes all the services that are provided by the AngularJS library with the $ sign. • when you create your own services, do not prefix them with a $ sign. It will just end up confusing you and your team at some point in time
- 35. Injecting service Order of Injection
- 36. Creating Our Own Service
- 37. Creating your own service
- 38. Data with $http • Similar to request to the server from AJAX applications (using XMLHttpRequests) • Makes request • reads response • checks the error codes • processes the server response • Traditional • var xmlhttp = new XMLHttpRequest(); • xmlhttp.open("GET", "http://myserver/api", true);
- 39. Few test cases: Input: 1, output: 1 Input:10, output: A Input:15, output: F Task – 5 • Write a Angular Application • Add a service, this will take a decimal number as input and print the hexadecimal value of that number.
- 40. $http with REST APIs • GET • HEAD • POST • DELETE • PUT • JSONP
- 41. GET request
- 42. Task – 6 • Write a Angular Application • Which consumes restful web-service with GET, POST, DELETE (you can write a web-service or see some examples with node.js to create demo restful web- service)
- 43. Unit Testing
- 44. Filters • Process data and format values to present • Applied on expressions in HTML • Applied directly on data in our controllers and services • Examples: • Format timestamp to readable date string • Add currency symbol on a number
- 46. Task – 7 • Write a Angular Application • Use in-built filters and produce the below output (you can write a web-service or see some examples with node.js to create demo restful web- service)
- 47. Task – 8 • Write a Angular Application and use below built-in filters • orderBy • filter • json • limitTo
- 48. Custom Filters
- 49. Task – 8 • Write a custom filter which accepts a string value and prints every alternate character in lower case preceding to a upper case character. Test cases: Input: AngularJS output:AnGuLaRjS
- 51. Routing with URL - myurl.html#/home • You need Routing if • we call hashbang URLs, not the standard URL • You are developing a single page application • You have multiple views for a single page (e.g. Home Page, About Us, Contact Us etc.) • For each request in a single page, you need to load one of the view as presentation logic but you don’t want to refresh the page. • You don’t need to load the whole page but only the contents of the view • You need speed response by loading contents faster
- 52. Routing: how to code • Import angular.js and angular-route.js • Use dependancy model to ngRoute var myvar = angular.module('org',['ngRoute']); • Config the route provider $routeProvider.when(url, { template: string, templateUrl: string, controller: string, function or array, controllerAs: string, resolve: object<key, function> });
- 54. Request in routing : ‘#’ factor • Request in a common URLs: # in URLs
- 55. Task – 9 Make 3 Angular applications (3 views) • Home.html • About.html • Contact.html In index.html, you need to define 3 links for home, about and contact. On clicking the links it needs to route to respective views without reloading the page. (Note: You may need to deploy as an application in a server to make it work.)
- 56. Things to do: • I didn’t cover the unit testing parts in AngularJS along with mocking up in this presentation for each of the components. I request you to go through the steps for unit testing in internet. If I get time I would add unit testing in a separate presentation. Thank you.
- 58. Source Code at: • https://github.com/santoshkar/Angular.git