MCA_MSC_AngularJS_U1 PT 1.pptx

ANGULAR JS A BRIEF INTRODUCTION Prepared By: Prof. Honey Shivnan  WHAT IS ANGULARJS ❏ AngularJS is a JavaScript framework by Google designed to create dynamic web apps. ❏ AngularJS is a complete solution for developing a front end based application without dependency...

ANGULAR JS A BRIEF INTRODUCTION Prepared By: Prof. Honey Shivnan  WHAT IS ANGULARJS ❏ AngularJS is a JavaScript framework by Google designed to create dynamic web apps. ❏ AngularJS is a complete solution for developing a front end based application without dependency on any other frameworks or plugin. ❏ This feature-rich framework adds a spark to your web application and has a lot to offer.  WHAT IS ANGULARJS ◼ AngularJS is a free and open-source JavaScript framework that helps developers build modern web applications. ◼ It was initially developed in 2009 by Misko Hevery and Adam Abrons is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as Fetch when different content is to be shown. ◼ It extends HTML with new attributes and It is perfect for single-page applications (SPAs). ◼ AngularJS, developed by Google, has been important in web development since its inception in 2009.  WHAT IS ANGULARJS ◼ Importance: AngularJS excels at building SPAs. These are applications that load in the browser once and update content without needing to refresh the entire page, providing a smoother user experience. ◼ It is MVC Javascript Framework by Google for Rich Web Application Development ◼ It is now maintained by Google, and its latest version is 1.2.21. POPULAR WEBSITES USING ANGULARJS HISTORY WHY ANGULARJS “Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views”. BENEFITS OF ANGULARJS: ➔ Structure, Quality and Organization ➔ Lightweight ( < 36KB compressed and minified) ➔ Free ➔ Separation of concern ➔ Modularity ➔ Extensibility & Maintainability ➔ Reusable Components “ HTML? Build UI Declaratively! CSS? Animations! JavaScript? Use it the plain old way!” WHY ANGULARJS Established Framework: AngularJS is a widely used framework with a successful developer community and large learning resources. Single Page Applications (SPAs): AngularJS excels at building SPAs, where content updates occur seamlessly on the same page. If you aim to create dynamic and interactive web applications, AngularJS is your partner. Structure and Maintainability: By attaching to the Model-View- Controller (MVC) architecture, AngularJS promotes clean separation of concerns. This architectural pattern leads to more maintainable and scalable code, especially beneficial for complex applications. Large Development Community: With its extensive history, AngularJS boasts a vast community of developers. Access forums, tutorials, and other resources to deepen your understanding and troubleshoot effectively.  Features of ANGULARJS Following are the crucial features of the Angular JS framework. AngularJS is an open-source, free front-end framework utilized by several web and mobile app development service providers worldwide. AngularJS framework comes under Apache License version 2.0. AngularJS offers software developers different choices to write client-side apps utilizing JavaScript in a clear MVC (Model View Controller) approach. Angular JS framework is a robust JavaScript-based development framework to develop RICH Internet Application (RIA). The applications you write in the AngularJS framework come with cross-browser compliance. AngularJS automatically manages all the JavaScript code ideal for each browser. OTHER JAVASCRIPT MV* FRAMEWORKS ◼ BackboneJS ◼ EmberJS Conceptual Overview of ANGULARJS ◼ Two-way Data Binding – Model as single source of truth ◼ Directives – Extend HTML ◼ MVC ◼ Dependency Injection ◼ Testing ◼ Deep Linking (Map URL to route Definition) ◼ Server-Side Communication  MVC Architecture: Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts − ➔ Model − It is the lowest level of the pattern responsible for maintaining data. ➔ View − It is responsible for displaying all or a portion of the data to the user. ➔ Controller − It is a software Code that controls the interactions between the Model and View.  Key Concepts in AngularJS ➔ AngularJS is a MVC based framework. ➔ MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. ➔ The controller receives all requests for the application and then works with the model to prepare any data needed by the view. ➔ The view then uses the data prepared by the controller to generate a final presentable response. DIAGRAM MVC Model (Data) View (UI) Notifi es Notifi Chang es es Controller (Logic)  MVC Explanation ➔ The Model The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself. ➔ The View A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology. ➔ The Controller The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model. MVC Model JS Objects View DOM Controller JS Classes  DOM Document Object Model DOM, or Document Object Model, is a programming interface that represents structured documents like HTML and XML as a tree of objects. It defines how to access, manipulate, and modify document elements using scripting languages like JavaScript.  DIRECTIVES ◼ Directives are markers on the DOM element which tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element with its children. ◼ Simple AngularJS allows extending HTML with new attributes called Directives. ◼ AngularJS has a set of built-in directives which offers functionality to the applications. It also defines its own directives. ◼ A directive can be defined using some functions which are: Element name, Attribute, Class, and Comment.  DIRECTIVES Some angular directives (The AngularJS directives extend the attribute with the prefix ng-) ◼ The ng-app - Bootstrapping your app and defining its scope. It is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. ◼ The ng-controller - defines which controller will be in charge of your view. It is used to add the controller to the application. It can be used to add methods, functions, and variables that can be called on some event like a click, etc to perform a certain action. ◼ The ng-bind- It is used to bind/replace the text content of a particular element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in the ng-bind Why use Directive in AngularJS? It gives support to creating custom directives for different types of elements. A directive is activated when the same element or matching element is there in front. It is used to give more power to HTML by helping them with the new syntax. Directive classes, like component classes, can implement life- cycle hooks to influence their configuration and behavior. 1.ng app The ng-app directive initializes an AngularJS application. The ng-app directive defines the root element of an AngularJS application. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded. You can invoke a directive by using: Element name Attribute Class Comment Example: var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { template : "Made by a directive!" }; }); 2. The ng-init Directive The ng-init directive defines initial values for an AngularJS application. Normally, you will not use ng-init. You will use a controller or module instead. The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application.  This example describes the ng-init Directive by initializing an array of strings. AngularJS ng-init Directive {{ sort }} {{ sort }} Sorting Techniques ng-init directive OUTPUT Sorting Techniques 3. AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. The various form input types (text, checkbox, radio, number, email, URL, date, datetime-local time, month, week) can be used with the ngModel directive. This directive is supported by , &. HTML forms using the ng-model directive:. We can define ngModel in the following way by writing the below code in the app.component.html file mobile {{ phone.value }}  ng- classes for validation The ngModel directive stores a variable by reference, not value. Usually in binding inputs to models that are objects (e.g. Date) or collections (e.g. arrays). The phone object created has many fields which are used for validation purposes. The following is the list of classes for validation purposes: ng-touched: It shows that field has been touched. ng-untouched: It shows that field has not been touched yet. ng-valid: It specifies that the field content is valid. ng-invalid: It specifies that the field content is not valid. ng-dirty: It illustrates that the field has been modified. ng-pristine: It represents that the field has not been modified yet. b. Binding ngModel with getter and setter: Whenever a function is called with zero arguments then it returns a representation of the model. And when called with a parameter it sets the value. Since ngModel refers to address that is why it does not save the changed value in the object itself rather it saves it in some internal state (variable-name.value). It will be useful if we keep a practice of using getter and setter for models when there is an internal representation as the getter and setter function gets more often called as compared to the rest of the parts of the code. Syntax: ng-model-options="{ getterSetter: true }" https://www.geeksforgeeks.org/angularjs-ng-model-directive/?ref=lbp  Expressions and Data Binding AngularJS Expressions Expressions in AngularJS are used to bind data to the HTML template. The expressions are resolved by AngularJS and the result is returned back to where the expression is written. So we can say that “expression is something (a valid unit of code) that resolved to a value”. AngularJS expressions can be written inside double braces: {{ expression }}. AngularJS expressions can also be written inside a directive: ng-bind="expression". AngularJS will resolve the expression, and return the result exactly where the expression is written. AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables. Example {{ 5 + 5 }} or {{ firstName + " " + lastName }} Note: If you remove the ng-app directive, HTML will display the expression as it is, without solving it. The expressions can be further classified as two types of expressions those are: assign value to a variable and those who themselves hold some values. Types of AngularJS Expressions Number Expressions in AngularJS: If any expression is using the number and the operators like , -, *, % etc. those expressions we will call it as number expressions. {{expression1 + expression2}} {{num1 * num2}} {{a / b}} {{n -m}}  Example: Number Expression of AngularJs var app = angular.module('expressionApp', []) app.controller("expressionController", function ($scope) { $scope.expression1 = 10; $scope.expression2 = 20 }); Number Expression The Result is : {{expression1 + expression2}}  String Expression in AngularJS The string expression in angularjs is a unit of code to perform operations on string values. String Expressions of AngularJs < /script> var app = angular.module('expressionApp', []) app.controller("expressionController", function ($scope) { $scope.expression1 = "Welcome to "; $scope.expression2 = "Tutlane.com" }); String Expression Hello: {{expression1+" "+expression2}}  Object Expressions in AngularJS The object expressions in angularjs basically hold object properties in them and the same way then evaluates at the view where they are used. Create or add a HTML page (say index.html) in your application. After adding index.html page add following sample code of angularjs object expressions in header section of your page. var app = angular.module('expressionApp', []) app.controller("expressionController", function ($scope) { $scope.expression = { key1: 'welcome', key2: 'to', key3: 'tutlane.com' }; }); Write the following code under starting of body tag for object expressions in angularjs like as shown below: Pure JSON object conatins key value pairs as key1 : {{expression.key1}} key2 : {{expression.key2}} key3 : {{expression.key3}} Following is the full example code for object expressions in angularjs Object Expressions in AngularJs var app = angular.module('expressionApp', []) app.controller("expressionController", function ($scope) { $scope.expression = { key1: 'welcome', key2: 'to', key3: 'tutlane.com' }; }); Pure JSON object conatins key value pairs as key1 : {{expression.key1}} key2 : {{expression.key2}} key3 : {{expression.key3}}  AngularJS Array Expressions Array expressions in angularjs are the expression that hold an array and use those array objects while evaluating array expressions in angularjs. Array Expressions of AngularJs var app = angular.module('expressionApp', []) app.controller("expressionController", function ($scope) { $scope.name = "Tutlane Student"; $scope.marks = [70, 75, 80, 95]; }); Array Expression Below is Marks obtained by {{name}} in different subjects are In Hindi he obtained {{marks}} marks In English he obtained {{marks}} marks In Physics he obtained {{marks}} marks In Math he obtained {{marks}} marks Forgiving Behavior Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in Javascript undefined properties generates TypeError or ReferenceError check youtube