Angular JS Basics

Mrs.V.Mareeswari Assistant Professsor(Sr) School of InformationTechnology and Engineering VIT,Vellore Cabin No:SJT 210-A30 Module 3

Web Applications  Web applications-  Web Application Frameworks  MVC framework  Angular JS  Single Page Applications  ResponsiveWeb Design V.Mareeswari / AP(Sr) / SITE /VIT2

Web Applications  A web application is a Client-Server computer program that utilizes web browsers and web technology to perform tasks over the Internet. V.Mareeswari / AP(Sr) / SITE /VIT3

How web application works?  User triggers a request to the web server over the Internet, either through a web browser or the application’s user interface.  Web server forwards this request to the appropriate web application server.  Web application server performs the requested task – such as querying the database or processing the data – then generates the results of the requested data.  Web application server sends results to the web server with the requested information or processed data.  Web server responds back to the client with the requested information that then appears on the user’s display V.Mareeswari / AP(Sr) / SITE /VIT4

EXAMPLE OF A WEB APPLICATION Web applications include online forms, online retail sales, online auctions, wikis, instant messaging services, shopping carts, word processors, spreadsheets, video and photo editing, file conversion, file scanning, and email programs such as Gmail, Yahoo and AOL. Popular applications include Google Apps and Microsoft 365. Google Apps for Work has Gmail, Google Docs, Google Sheets, Google Slides, online storage and more. Other functionalities include online sharing of documents and calendars. This lets all team members access the same version of a document simultaneously. V.Mareeswari / AP(Sr) / SITE /VIT5

Benefits of Web Application  Web applications run on multiple platforms regardless of OS or device as long as the browser is compatible.  All users access the same version, eliminating any compatibility issues.  They are not installed on the hard drive, thus eliminating space limitations.  They reduce software piracy in subscription-based web applications (i.e. SaaS).  They reduce costs for both the business and end user as there is less support and maintenance required by the business and lower requirements for the end user’s computer V.Mareeswari / AP(Sr) / SITE /VIT6

Web Application Frameworks  A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs.  Web frameworks provide a standard way to build and deploy web applications. Web frameworks aim to automate the overhead associated with common activities performed in web development.  For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites. V.Mareeswari / AP(Sr) / SITE /VIT7

Types of framework architectures  Model–view–controller (MVC) Many frameworks follow the MVC architectural pattern to separate the data model with business rules from the user interface. This is generally considered a good practice as it modularizes code, promotes code reuse, and allows multiple interfaces to be applied. In web applications, this permits different views to be presented, such as web pages for humans, and web service interfaces for remote applications.  Push-based vs. pull-based  Most MVC frameworks follow a push-based architecture also called "action-based". These frameworks use actions that do the required processing, and then "push" the data to the view layer to render the results. Django, Ruby on Rails, Symfony, Spring MVC, Stripes, Diamond, CodeIgniter are good examples of this architecture.  An alternative to this is pull-based architecture, sometimes also called "component-based". These frameworks start with the view layer, which can then "pull" results from multiple controllers as needed. In this architecture, multiple controllers can be involved with a single view. Lift, Tapestry, JBoss Seam, JavaServer Faces, (µ)Micro, andWicket are examples of pull-based architectures.  Play, Struts, RIFE, and ZK have support for both push- and pull-based application controller calls.  Three-tier organization  In three-tier organization, applications are structured around three physical tiers: client, application, and database. The database is normally an RDBMS. The application contains the business logic, running on a server and communicates with the client using HTTP. The client on web applications is a web browser that runs HTML generated by the application layer. The term should not be confused with MVC, where, unlike in three-tier architecture, it is considered a good practice to keep business logic away from the controller, the "middle layer". V.Mareeswari / AP(Sr) / SITE /VIT8

Model-View-Controller (MVC)  The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller.  MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects. V.Mareeswari / AP(Sr) / SITE /VIT9

 Model Model component corresponds to all the data-related logic that the user works with. This can represent either the data that is being transferred between the View and Controller components or any other business logic-related data. For example, a Customer object will retrieve the customer information from the database, manipulate it and update it data back to the database or use it to render data.  View The View component is used for all the UI logic of the application. For example, the Customer view will include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.  Controller Controllers act as an interface between Model and View components to process all the business logic and incoming requests, manipulate data using the Model component and interact with the Views to render the final output. For example, the Customer controller will handle all the interactions and inputs from the Customer View and update the database using the Customer Model. The same controller will be used to view the Customer data.V.Mareeswari / AP(Sr) / SITE /VIT10

V.Mareeswari / AP(Sr) / SITE /VIT11

Top Web Development Frameworks -2018 S.No Name Description 1 AngularJS  JavaScript framework ,develop your front-end based apps  Google,Angular 4 , MVC architectural pattern  Netflix, Freelancer.com,GoodFIlms 2 Ruby on Rails  server-side web development framework is built using Ruby  Basecamp,Ask.fm, GitHub, 500px 3 Yii  Yii is an open-source web application development framework that is built in PHP5. Tass, Craftcms, HumHub 4 Meteor JS  written in Node.js ,creating simple websites for personal use  developing for iOS, web,Android or desktop 5 Express JS  developed in Node.js,develop web applications andAPIs as fast and easy  Express is the best choice for those people whose goal it is to develop simple web services andAPIs rather than web portals or high-loaded calculating backends.V.Mareeswari / AP(Sr) / SITE /VIT12

6 Zend  based on PHP  building more secure, modern, reliable, web services and applications. 7 Django  written in Python  ModelViewTemplate (MVC) architecture 8 Laravel  PHP development frameworks  develop the web and mobile applications for small websites and big businesses  MVC support 9 React.js  JavaScript library maintained by Facebook  near future called, React Fibre 10 Node.js  Node.js is not just a framework, it is a complete environment.  lightweight and efficient against real-time applications with a large amount of data running on distributed devices V.Mareeswari / AP(Sr) / SITE /VIT13

11 Symfony  PHP framework  largest open source platforms such as PHPBB, Piwik, and Drupal. 12 ASP.NET  open-source and has close to 15% market share. 13 CakePHP  written in PHP  model-controller-view and association data mapping 14 Vue.js  open-source JavaScript library for developing user interfaces  released in 2013 and now it has 59600 stars on Github  Angular itself has 56300 stars on Github V.Mareeswari / AP(Sr) / SITE /VIT14

Angular JS  AngularJS is an open source Model-View-Controller framework which is similar to the JavaScript framework.  It can be added to an HTML page with a <script> tag.  AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.  AngularJS is open source, completely free, and used by thousands of developers around the world.  It is used in Single Page Application (SPA) projects.  It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google.  AngularJs 1.7.2 is the stable version in June 2018, but AngularJs 2.0 is the latest version which is actually a beta version.Angular 5.  It is licensed under the Apache license version 2.0.V.Mareeswari / AP(Sr) / SITE /VIT15

AngularJS Features V.Mareeswari / AP(Sr) / SITE /VIT16  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.  Unit Testing ready – The designers at Google not only developed Angular but also developed a testing framework called "Karma" which helps in designing unit tests forAngularJS applications.

Disadvantages of AngularJS V.Mareeswari / AP(Sr) / SITE /VIT17 Though AngularJS comes with lots of plus points but same time we should consider the following points −  Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.  Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

The AngularJS Components V.Mareeswari / AP(Sr) / SITE /VIT18  The AngularJS framework can be divided into following three major parts −  ng-app − This directive defines and links an AngularJS application to HTML.  ng-model − This directive binds the values of AngularJS application data to HTML input controls.  ng-bind − This directive binds the AngularJS Application data to HTML tags. Download for offline web development:  https://code.angularjs.org/1.7.4/angular.min.js

V.Mareeswari / AP(Sr) / SITE /VIT19 <html><head> Basic 3.html <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js "></script> </head> <body><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> </body> </html>  ng-app directive indicates the start of AngularJS application.  ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.  ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.

<html ng-app><head> Basic.html <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/ang ular.min.js"></script> </head><body><div><label>Name:</label> <input type = "text" ng-model = "NameText" placeholder = "Enter a name here"> <hr /><h1>Hello {{NameText}}!</h1> </div></body></html> AngularJS expressions can be written inside double braces:{{ expression }} or ng-bind="expression" V.Mareeswari / AP(Sr) / SITE /VIT21

V.Mareeswari / AP(Sr) / SITE /VIT22 Simultaneously what text typed in text box will be displayed after Hello

AngularJS Directives V.Mareeswari / AP(Sr) / SITE /VIT23  AngularJS directives are HTML attributes with an ng prefix.  The ng-init directive initializes AngularJS application variables. <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m in.js"></script> <body> <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div></body></html>

V.Mareeswari / AP(Sr) / SITE /VIT24 <!DOCTYPE html> <html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min .js"></script><body> <p>Change the value of the input field:</p> <div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div> <p>AngularJS resolves the expression and returns the result.</p> <p>The background color of the input box will be whatever you write in the input field.</p></body></html>

AngularJS Numbers V.Mareeswari / AP(Sr) / SITE /VIT25 <div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: {{ quantity * cost }}</p> <p>Total in dollar: <span ng-bind="quantity * cost"> </span></p></div> AngularJS Arrays <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is {{ points[2] }}</p></div>

Angular JS Objects V.Mareeswari / AP(Sr) / SITE /VIT26 <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The full name is {{ firstName + " " + lastName }}</p> </div> Angular JS Strings <div ng-app="" ng-init="person={firstName:'V',lastName:'Mareeswari'}"> <p>The name is {{ person.lastName }}</p></div>

AngularJS Expressions vs. JavaScript Expressions V.Mareeswari / AP(Sr) / SITE /VIT27  Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.  Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.  AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.  AngularJS expressions support filters, while JavaScript expressions do not.

ng-repeat V.Mareeswari / AP(Sr) / SITE /VIT28 The ng-repeat directive repeats an HTML element. The ng- repeat directive actually clones HTML elements once for each item in a collection. <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angul ar.min.js"></script><body> <div ng-app="" ng-init="names=['Janani','Hema','Kumar']"> <p>Looping with ng-repeat:</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul></div></body>

V.Mareeswari / AP(Sr) / SITE /VIT29 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/an gular.min.js"></script><body> <div ng-app="" ng-init="names=[ {name:'Marees',country:'India'}, {name:'Hema',country:'America'}, {name:'Kumar',country:'Denmark'}]"> <p>Looping with objects:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }}</li> </ul></div></body></html> Array of Objects

AngularJS Modules V.Mareeswari / AP(Sr) / SITE /VIT30  An AngularJS module defines an application.  The module is a container for the different parts of an application.  The module is a container for the application controllers.  Controllers always belong to a module. Step1 : Creating a Module  <div ng-app="myApp">...</div> <script>var app = angular.module("myApp", []); </script>  The "myApp" parameter refers to an HTML element in which the application will run.  Now you can add controllers, directives, filters, and more, to your AngularJS application. Step2 :Adding a Controller  Add a controller to your application, and refer to the controller with the ng- controller directive:

V.Mareeswari / AP(Sr) / SITE /VIT31 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang ular.min.js"></script><body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Mareeswari"; $scope.lastName = "V"; });</script></body></html>

<!doctype html><html><head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js "></script></head> <body ng-app = "myapp"> <div ng-controller = "HelloController" > <h2>Welcome {{helloTo.title}} to the world ofWeb Technology!</h2> </div><script> angular.module("myapp", []).controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });</script></body></html> V.Mareeswari / AP(Sr) / SITE /VIT32 Include AngularJS Point toAngularJS app View Controller

V.Mareeswari / AP(Sr) / SITE /VIT33  Include AngularJS included the AngularJS JavaScript file in the HTML page so we can use AngularJS  Point to AngularJS app tell what part of the HTML contains the AngularJS app either add it to html element or body element  View ng-controller tells AngularJS what controller to use with this view. helloTo.titletells AngularJS to write the "model" value named helloTo.title to the HTML at this location.  Controller code registers a controller function named HelloController in the angular module named myapp. The $scope parameter passed to the controller function is the model. The controller function adds a helloTo JavaScript object, and in that object it adds a title field.

When the page is loaded in the browser, following things happen: V.Mareeswari / AP(Sr) / SITE /VIT34  HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded, the angular global object is created. Next, JavaScript which registers controller functions is executed.  Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.  Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.

V.Mareeswari / AP(Sr) / SITE /VIT35  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.  The properties of the view can call "functions" on the scope. Moreover events on the view can call "methods" on the scope.

AngularJS Routing  The ngRoute module helps your application to become a Single Page Application.  If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.  The ngRoute module routes your application to different pages without reloading the entire application.  Angularrouting.html & angularrouting2.html V.Mareeswari / AP(Sr) / SITE /VIT36

Ng-view  Your application needs a container to put the content provided by the routing.  This container is the ng-view directive.  There are three different ways to include the ng-view directive in your application:  1. <div ng-view></div>  2. <ng-view></ng-view>  3. <div class="ng-view"></div>  Applications can only have one ng-view directive, and this will be the placeholder for all views provided by the route. V.Mareeswari / AP(Sr) / SITE /VIT37

Single Page Application V.Mareeswari / AP(Sr) / SITE /VIT38 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > </script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular- route.js"></script> <body ng-app="myApp"> <p><a href="#/!">Main</a></p> <a href="#!banana">Banana</a> <a href="#!tomato">Tomato</a> <p>Click on the links to change the content.</p> <p>Use the "otherwise" method to define what to display when none of the links are clicked.</p>

V.Mareeswari / AP(Sr) / SITE /VIT39 <div ng-view></div><script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/banana", { template: "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" }) .when("/tomato", { template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" }) .otherwise({ template : "<h1>Nothing</h1><p>Nothing has been selected</p>" });});</script></body></html>

V.Mareeswari / AP(Sr) / SITE /VIT42 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang ular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang ular-route.js"></script> <body ng-app="myApp"> <p><a href="#/!">Main</a></p> <a href="#!Home">Home</a> <a href="#!Blog">Blog</a> <a href="#!About">About</a> <div ng-view></div>

V.Mareeswari / AP(Sr) / SITE /VIT43 <script>var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "SPA1.html" }) .when("/Home", { templateUrl : "SPA1_Home.html" }) .when("/Blog", { templateUrl : "SPA1_Blog.html" }) .when("/About", { templateUrl : "SPA1_About.html" });});</script><p>Click on the links to navigate to "Home page", "Blog page", "About", or back to "main page"</p></body></html>

AngularJS Events V.Mareeswari / AP(Sr) / SITE /VIT44  You can add AngularJS event listeners to your HTML elements by using one or more of these directives:  ng-blur, ng-change, ng-focus  ng-click, ng-dblclick  ng-copy, ng-cut, ng-paste  ng-keydown, ng-keypress, ng-keyup  Mouse Events : Mouse events occur when the cursor moves over an element, in this order: 1.ng-mouseover 2. ng-mouseenter 3. ng-mousemove 4. ng-mouseleave  Or when a mouse button is clicked on an element, in this order: 1. ng-mousedown 2. ng-mouseup 3. ng-click  You can add mouse events on any HTML element.

V.Mareeswari / AP(Sr) / SITE /VIT45 <!DOCTYPE html><html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m in.js"></script><body> <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click Me!</button> <p>{{ count }}</p> </div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; });</script></body></html>

Call function at click for show / hide V.Mareeswari / AP(Sr) / SITE /VIT47 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <body><div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="myFunc()">Click Me!</button> <div ng-show="showMe"> <table border=1 bgcolor="yellow"><caption>Details</caption> <tr><td>Mareeswari</td><td>SITE</td></tr> <tr><td>Tharun</td><td>SCOPE</td></tr></table> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.showMe = false; $scope.myFunc = function() { $scope.showMe = !$scope.showMe; } });</script> <p>Click the button to show/hide the details.</p> </body></html>

Responsive Web Design V.Mareeswari / AP(Sr) / SITE /VIT49  Having a responsive website is very important. One must be able to access it from all devices making it available on all platforms. Thus, you must give the developers enough time to work on the website and not rush into creating a website that won’t work across multiple devices.

Summary V.Mareeswari / AP(Sr) / SITE /VIT50

References  https://youtu.be/0kmdjqgO9IY - good for begineers V.Mareeswari / AP(Sr) / SITE /VIT51

Form Validation V.Mareeswari / AP(Sr) / SITE /VIT52 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min .js"></script> <body ng-app=""> <p>Try writing in the input field:</p> <form name="myForm"> <input name="myInput" ng-model="myInput" required> </form> <p>The input's valid state is:</p> <h1>{{myForm.myInput.$valid}}</h1> </body></html>

V.Mareeswari / AP(Sr) / SITE /VIT54 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body><h2>Validation Example</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>Username:<br><input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span></span></p> <p>Email:<br><input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span></span></p> <p><input type="submit“ ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"></p></form> <script>var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; });</script></body></html>

AngularJS Filters  Filters can be added in AngularJS to format data.  AngularJS provides filters to transform data:  currency Format a number to a currency format.  date Format a date to a specified format.  filter Select a subset of items from an array.  json Format an object to a JSON string.  limitTo Limits an array/string, into a specified number of elements/characters.  lowercase Format a string to lower case.  number Format a number to a string.  orderBy Orders an array by an expression.  uppercase Format a string to upper case. V.Mareeswari / AP(Sr) / SITE /VIT56

AngularJS service  A service is a function, or object, that is available for, and limited to, your AngularJS application.  AngularJS has about 30 built-in services. One of them is the $location service. V.Mareeswari / AP(Sr) / SITE /VIT57

The $http Service  The $http service is one of the most common used services in AngularJS applications.The service makes a request to the server, and lets your application handle the response.  Use the $http service to request data from the server: V.Mareeswari / AP(Sr) / SITE /VIT58

Methods of $http service  There are several shortcut methods:  .get()  .delete()  .get()  .head()  .jsonp()  .patch()  .post()  .put() V.Mareeswari / AP(Sr) / SITE /VIT59

Angular JS Forms  Forms inAngularJS provides data-binding and validation of input controls. Input Controls  Input controls are the HTML input elements:  input elements(formss.html)  select elements(ngswitchselect.html)  button elements  Radiobutton(ngswitch1)  textarea elements  Input controls provides data-binding by using the ng- model directive. V.Mareeswari / AP(Sr) / SITE /VIT60

Form Validation  AngularJS offers client-side form validation.  AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.  AngularJS also holds information about whether they have been touched, or modified, or not.  You can use standard HTML5 attributes to validate input, or you can make your own validation functions. V.Mareeswari / AP(Sr) / SITE /VIT61

Form State and Input State  AngularJS is constantly updating the state of both the form and the input fields.  Input fields have the following states:  $untouchedThe field has not been touched yet  $touchedThe field has been touched  $pristineThe field has not been modified yet  $dirtyThe field has been modified  $invalidThe field content is not valid  $validThe field content is valid  They are all properties of the input field, and are either true or false. V.Mareeswari / AP(Sr) / SITE /VIT62

 Forms have the following states:  $pristine No fields have been modified yet  $dirty One or more have been modified  $invalidThe form content is not valid  $validThe form content is valid  $submittedThe form is submitted  They are all properties of the form, and are either true or false. V.Mareeswari / AP(Sr) / SITE /VIT63

CSS Classes  AngularJS adds CSS classes to forms and input fields depending on their states.  The following classes are added to, or removed from, input fields:  ng-untouched The field has not been touched yet  ng-touched The field has been touched  ng-pristine The field has not been modified yet  ng-dirty The field has been modified  ng-valid The field content is valid  ng-invalid The field content is not valid  Cssclasses.html V.Mareeswari / AP(Sr) / SITE /VIT64

AngularJS Includes  With AngularJS, you can include HTML from an external file using the ng-include directive:  <div ng-include="'myFile.htm'"></div> V.Mareeswari / AP(Sr) / SITE /VIT65

Types of web application frameworks  In the Web 1.0 era, all web apps were mainly built around servers. Such apps still exist and are highly secure, since their entire app logic is stored on the backend.  As web standards began to change, app logic started to shift toward the client, which helped to ensure a smarter interaction between a user and a web app. With the logic on its side, a client can instantly react to user input. What’s more, client-side logic makes apps responsive, so they are easy to navigate on any device.  This way, we now have two groups of web application frameworks: one helps to set up app logic on the server, the other – on the client. To create a powerful web app, you can use both of them simultaneously. V.Mareeswari / AP(Sr) / SITE /VIT66

1. Server-side web application framework  Although frontend has evolved, it’s first and foremost job is to display an interface, and without app logic any UI/UX is irrelevant.That’s why server-side frameworks are important.  Among the most popular MVC-based server-side web frameworks are:  Symfony (PHP)  Django (Python)  Express (Node.js/JavaScript)  Ruby on Rails (Ruby)  ASP.NET (C#)  By using either of these server-side web application frameworks, you let it handle HTTP requests, database control and management, as well as URL mapping.You can also render view data with a server, like in theWeb 1.0 era, but consider using client-side frameworks instead to introduce more user-engaging features and responsiveness. 2. Client-side web application framework  In the previous article on web app architecture, we discussed the Single-PageWeb App concept,where one of the main components of the architecture is a JavaScript client layer.To properly set it up, you need client-side frameworks, such as:  Bootstrap  React.js  Angular.js  Backbone  Semantic-UI.  While with server-side frameworks your choice mainly depends on the language you feel comfortable to develop in, here you should mind specific capabilities of different client-side frameworks. Since they vary in the scope of functionality supported, look for the one that fits the needs of your future web app. V.Mareeswari / AP(Sr) / SITE /VIT67

Angular JS Basics

More Related Content

What's hot

Similar to Angular JS Basics

Recently uploaded

Angular JS Basics