Angular js for Beginnners

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

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.

Task – 1 • Write a Angular Application which prints the value of below expressions: • 5 *5 + 2*2 • 10/5*2-100

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...)

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

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"

directive ng-bind • Binds with the Angular JS variable • ng-bind in <span> <span ng-bind="n1" is similar to {{n1}}

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.

• 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

Controller • Fetch data from the server for UI • Are regular JavaScript Objects. • ng-controller directive defines the application controller.

Parent module Child modules Defined 2 Controllers Using parent module only

Task – 2 • Write an Angular Application which prints current date and time on the screen

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

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 }}

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"

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.

Forms • ng-submit • ng-disabled = "myForm.$invalid" • required

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.

Error Handling • Form validation • required • ng-required • ng-minlength • ng-maxlength • ng-pattern • type="email" • type="number" • type="date" • type="url"

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.

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

Service types • Build-in • Custom

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

Injecting service Order of Injection

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);

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.

$http with REST APIs • GET • HEAD • POST • DELETE • PUT • JSONP

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)

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

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)

Task – 8 • Write a Angular Application and use below built-in filters • orderBy • filter • json • limitTo

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

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

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> });

Request in routing : ‘#’ factor • Request in a common URLs: # in URLs

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.)

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.

Source Code at: • https://github.com/santoshkar/Angular.git

Angular js for Beginnners

More Related Content

What's hot

Similar to Angular js for Beginnners

More from Santosh Kumar Kar

Recently uploaded

Angular js for Beginnners