what is angularjs ?

A Gentle IntroductionPawan Kumar Shukla

Achal Jainwww.aanprt.com

ANGULARJS

• Basic Fundamental of Web TechnologyArchitecture of WebClient Side Scripting Language andServer Side Scripting Language

• Java ScriptWhy JavaScriptModern Web Technology

AGENDA

AGENDA• Angularjs

What is AngularjsWhy AngularjsHow it better than othersAdvantagesDisadvantagesWhere we use it?How it is used?

How to develop applications using the AngularJS framework.

FUNDAMENTALS OF

WEB TECHNOLOGY

• The Web, or World Wide Web, is basically a system of Internet servers that support specially formatted documents. The documents are formatted in a markup language called HTML (Hypertext Markup Language) that supports links to other documents, as well as graphics, audio, and video files.

• This means you can jump from one document to another simply by clicking on hot spots.

• There are several applications called Web browsers that make it easy to access the World Wide Web; Two of the most popular being Firefox and Microsoft's Internet Explorer.

WHAT IS WEB?

• The Internet is essentially a global network of computing resources. You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.

• Some common definitions given in the past include :

• A network of networks based on the TCP/IP communications protocol.

• A community of people who use and develop those networks.

WHAT IS INTERNET?

• Some of the basic services available to Internet users are −• Email − A fast, easy, and inexpensive way to communicate with

other Internet users around the world.• Telnet − Allows a user to log into a remote computer as though it

were a local system.• FTP − Allows a user to transfer virtually every kind of file that can be

stored on a computer from one Internet-connected computer to another.

• UseNet news − A distributed bulletin board that offers a combination news and discussion service on thousands of topics.

• World Wide Web (WWW) − A hypertext interface to Internet information resources.

INTERNET-BASED SERVICES

• WWW stands for World Wide Web. A technical definition of the World Wide Web is − All the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).

• A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the World Wide Web Consortium (W3C): The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge.

• In simple terms, The World Wide Web is a way of exchanging information between computers on the Internet, tying them together into a vast collection of interactive multimedia resources.

WHAT IS WWW?

• HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to transfer hypertext documents that makes the World Wide Web possible.

• A standard web address such as Yahoo.com is called a URL and here the prefix http indicates its protocol

WHAT IS HTTP?

• URL stands for Uniform Resource Locator, and is used to specify addresses on the World Wide Web. A URL is the fundamental network identification for any resource connected to the web (e.g., hypertext pages, images, and sound files).

• A URL will have the following format −• protocol://hostname/other_information• The protocol specifies how information is transferred from a link.

The protocol used for web resources is HyperText Transfer Protocol (HTTP). Other protocols compatible with most web browsers include FTP.

WHAT IS URL?

• Currently you are on our website aanprt.com which is a collection of various pages written in HTML markup language. This is a location on the web where people can information.

• Each page available on the website is called a web page and first page of any website is called home page for that site.

WHAT IS WEBSITE?

• Every Website sits on a computer known as a Web server. This server is always connected to the internet. Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 256 separated by periods. For example, 68.178.157.132 or 68.122.35.127.

• When you register a Web address, also known as a domain name, such as aanprt.com you have to specify the IP address of the Web server that will host the site.

WHAT IS WEB SERVER?

• Web Browsers are software installed on your PC. To access the Web you need a web browsers, such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.

• Currently you must be using any sort of Web browser while you are navigating through my site aanprt.com. On the Web, when you navigate through pages of information this is commonly known as browsing or surfing.

WHAT IS WEB BROWSER?

• A scripting or script language is a programming language that supports scripts, programs written for a special run-time environment that automate the execution of tasks that could alternatively be executed one-by-one by a human operator.

• Types of scripting language:– Client side scripting.– Server side scripting.

WHAT IS SCRIPTING LANGUAGE?

• The client-side environment used to run scripts is usually a browser. The processing takes place on the end users computer. The source code is transferred from the web server to the users computer over the internet and run directly in the browser.

• The server-side environment that runs a scripting language is a web server. A user's request is fulfilled by running a script directly on the web server to generate dynamic HTML pages. This HTML is then sent to the client browser. It is usually used to provide interactive web sites that interface to databases or other data stores on the server.

• Different from client-side scripting where scripts are run by the viewing web browser, usually in JavaScript. The primary advantage to server-side scripting is the ability to highly customize the response based on the user's requirements.

DIFFERENCE B/W CLIENT & SERVER SIDE SCRIPTING

• Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JAVASCRIPT

<!DOCTYPE html><html><head><script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body></html>

• Angular JS is probably one of the most popular modern day web frameworks available today. This framework is used for developing mostly Single Page applications. This framework has been developed by a group of developers from Google itself.

• AngularJS looks like a JavaScript framework, but it's more than that. It's based on a Model-View-Controller framework. It's a framework with a purpose.

WHAT IS ANGULARJS ?

• Angular has the following key features which makes it one of the powerful frameworks in the market.– MVC – The framework is built on the famous concept of MVC (Model-

View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.

– Data Model Binding – You don't need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.

– Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.

WHAT IS ANGULARJS ?

• Open Source• Two-way binding – Angular.js keeps the data and presentation layer in sync.

Now you don't need to write additional JavaScript code to keep the data in your HTML code and your data later in sync. Angular.js will automatically do this for you. You just need to specify which control is bound to which part of your model.

• Routing – Angular can take care of routing which means moving from one view to another. This is the key fundamental of single page applications; wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.

• It extends HTML by providing its own elements called directives. At a high level, directives are markers on a DOM element (such as an attribute, element name, and comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element. These directives help in extending the functionality of existing HTML elements to give more power to your web application.

ANGULARJS ADVANTAGES

• The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your controller. The user events are part of the controller.

• Views are used to represent the presentation layer which is provided to the end users.

• Models are used to represent your data. The data in your model can be as simple as just having primitive declarations

ANGULARJS ARCHITECTURE

HELLO WORLD, ANGULARJS

Output

HELLO WORLD, ANGULARJS

• Controllers will have your core business logic. The primary purpose of controller in Angular.js is to take the data from the View, process the data accordingly and then send that data across to the view which is displayed to the end user.

• It will use the data model, carry out the required processing and then pass the output to the view which in turn is displayed to the end user.

ANGULARJS CONTROLLER

ANGULARJS CONTROLLER

• The controller's primary responsibility is to control the data which gets passed to the view. The scope and the view have two way communication.

• Data in this way passes from the controller to the scope and then the data passes back and forth from the scope to the view.

• The scope is used to expose the model to the view. The model can be modified via methods defined in the scope which could be triggered via events from the view. We can define two way model binding from the scope to the model.

ANGULARJS CONTROLLER

BUILDING A BASIC CONTROLLER

Output

BUILDING A BASIC CONTROLLER

• Normally, one would want to define multiple methods in the controller to separate the business logic.

• For example, suppose if you wanted to have your controller do 2 basic things, one is to perform the addition of 2 numbers and the other is to perform the subtraction. You would then ideally create 2 methods inside of your controller, one to perform the addition and the other to perform the subtraction.

• One can define custom methods within an Angular.JS controller.

CONTROLLER’S METHODS

• The scope is a JavaScript object which basically binds the "controller" and the "view". One can define member variables in the scope within the controller which can then be accessed by the view

• scope object is the main object which is used to pass information from the controller to the view.

MANAGING SCOPE

• Ng-model attribute is used to bind the data in your model to the view presented to the user.

• The ng-model attribute is used for,– Binding controls such as input, text area and select in the view into the

model.– Provide a validation behavior - for example a validation can be added to

a textbox that only numeric characters can be entered into the textbox.– The ng-model attribute maintains the state of the control (By state, we

mean that the control and the data is bound to be always kept in sync. If the value of our data changes , it will automatically change the value in the control and vice versa)

NG-MODEL IN ANGULARJS

APPLYING NG-MODEL TO TEXT AREA

APPLYING NG-MODEL TO INPUT ELEMENTS

APPLYING NG-MODEL TO SELECT ELEMENTS

• Expressions are basically the variables which were defined in the double braces {{ }}. These were used to inject values which were defined inside of the controller.

• AngularJS expressions are those that are written inside double braces {{expression}}.

• A simple example of an expression is {{5 + 6}}.• Angular.JS expressions are used to bind data to HTML the same way as the

ng-bind directive. AngularJS displays the data exactly at the place where the expression is placed.

ANGULARJS EXPRESSIONS

ANGULARJS EXPRESSIONS

ANGULARJS STRINGS

ANGULAR.JS OBJECTS

ANGULARJS ARRAYS

• A filter formats the value of an expression to display to the user.• There are built-in filters such as 'lowercase', 'uppercase' which can retrieve

the output in lowercase and uppercase accordingly. Similarly for numbers, you can use other filters.

• Standard filter in Angularjs– Lowercase – Uppercase – Number

• Custom Filter in Angularjs• Sometimes the built-in filters in Angular cannot meet the needs or

requirements for filtering output. In such a case a custom filter can be created which can pass the output in the required manner.

ANGULARJS FILTER

LOWERCASE IN ANGULARJS

UPPERCASE IN ANGULARJS

NUMBER IN ANGULARJS

CUSTOM FILTER IN ANGULARJS

• Directives is designed to teach HTML new tricks, which basically means that it gives HTML new functionality.

• When angular goes through the HTML code, it will first find the directives in the page and then parse the HTML page accordingly.

• A simple example of a AngularJS directive, which we have seen earlier the "ng-model directive". This directive is used to bind our data model to our view.– ng-app– ng-init– ng-model– ng-repeat

ANGULARJS DIRECTIVE

NG-APP

NG-INIT

NG-MODEL

NG-MODEL

NG-REPEAT

NG-REPEAT

• Modules are one of the most important concepts of Angular JS.• We have used the ng-app directive used to define your main Angular

application. This is one of the key concepts of modules in Angular.JS. • Overall modules in Angular have 2 roles to play;

– The first is to define the application functionality that is applied to the entire HTML page using the ng-app directive.

– The second use of a module is to define functionality, such as services, directives, and filters, in a way that makes it easy to reuse it in different applications.

ANGULARJS MODULE

• Modules are one of the most important concepts of Angular JS.• We have used the ng-app directive used to define your main Angular

application. This is one of the key concepts of modules in Angular.JS.ne of the most important concepts of Angular JS.

• Overall modules in Angular have 2 roles to play;– The first is to define the application functionality that is applied to the

entire HTML page using the ng-app directive.– The second use of a module is to define functionality, such as services,

directives, and filters, in a way that makes it easy to reuse it in different applications.

ANGULARJS MODULE

WHAT IS A ANGULARJS MODULE

• When creating web based applications, sooner or later your application will need to handle DOM events like mouse clicks, moves, keyboard presses, change events etc.

• AngularJS has the ability to add functionality which can be used to handle such events.

• For example, if there is a button on the page and you want to process something when the button is clicked, we can use the ng-click event directive.

ANGULARJS EVENTS: NG-CLICK, NG-SHOW, NG-HIDE

NG-CLICK DIRECTIVE

NG-CLICK DIRECTIVE

NG-SHOW

NG-SHOW

• Nowadays, everyone would have heard about the "Single Page Applications". Many of the well-known websites such as Gmail use the concept of Single Page Applications (SPA's).

• SPA's is the concept wherein when a user requests for a different page, the application will not navigate to that page but instead display the view of the new page within the existing page itself.

• It just gives the feeling to the user that he never left the page in the first place. The same can be achieved in the Angular with the help of Views in conjunction with Routes.

ANGULARJS VIEWS

• A view is basically the content which is shown to the user. Basically what the user wants to see, accordingly that view of the application will be shown to the user.

• The combination of views and Routes helps one in dividing an application in logical views and bind different views to Controllers.

• Dividing the application into different views and using Routing to load different part of application helps in logically dividing the application and making it more manageable.

USAGE OF VIEWS

ANGULARJS VIEWS

Step 1) Include the angular-route file as a script reference.

ANGULARJS VIEWS

Step 2) In this step,• Add href tags which will represent links to "Adding a New Event" and

"Displaying an Event".• Also, add a div tag with the ng-view directive which will represent the

view.This will allow the corresponding view to be injected whenever the user clicks on either the "Add New Event link" or the "Display Event link."

ANGULARJS VIEWS

Step 3) In your script tag for Angular JS, add the following code.

ANGULARJS VIEWS

• This section of code means that when the user clicks on the href tag "NewEvent" which was defined in the div tag earlier. It will go to the web page add_event.html, and will take the code from there and inject it into the view. Secondly for processing the business logic for this view, go to the "AddEventController".

• This section of code means that when the user clicks on the href tag "DisplayEvent" which was defined in the div tag earlier. It will go to the web page show_event.html, take the code from there and inject it into the view. Secondly for processing the business logic for this view, go to the "ShowDisplayController".

• This section of code means that the default view shown to the user is the DisplayEvent view

ANGULARJS VIEWS

Step 4) Next is to add controllers to process the business logic for both the "DisplayEvent" and "Add New Event" functionality.• We are just simply adding a message variable to each scope object for each

controller. This message will get displayed when the appropriate view is shown to the user.

ANGULARJS VIEWS

Step 5) Create pages called add_event.html and show_event.html. Keep the pages simple as shown below.• In our case the add_event.html page will have a header tag along with the

text "Add New Event" and have an expression to display the message "This is to Add a new Event".

• Similarly, the show_event.html page will also have a header tag to hold the text "Show Event" and also have a message expression to display the message "This is to display an Event."

• The value of the message variable will be injected based on the controller which is attached to the view.

• For each page, we are going to add the message variable, which will be injected from the each respective controller.

ANGULARJS VIEWS

• add_event.html

ANGULARJS VIEWS

• show_event.html

ANGULARJS VIEWS

OUTPUT

OUTPUT

ANGULAR TABLE

ANGULAR TABLE

• AJAX is the short form of Asynchronous JavaScript and XML. AJAX was primarily designed for updating parts of a web page, without reloading the whole page.

• The reason for designing this technology was to reduce the number of round trips which were made between the client and the server and the number of entire page refresh which used to take place whenever a user required certain information.

• AJAX allowed web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This meant that it was possible to update parts of a web page, without reloading the whole page.

• Many modern day web applications actually follow this technique for refreshing the page or getting data from the server.

• Angular provides two different APIs to handle Ajax requests. They are $resource, $http

ANGULARJS HTTP, AJAX

$HTTP GET REQUEST

Output

$HTTP GET REQUEST OUTPUT

$HTTP POST REQUEST OUTPUT

$HTTP POST REQUEST OUTPUT