JS Introduction
WHAT IS ANGULAR JS? : Angular JS is a JavaScript framework that is used to build browser based Web applications. In particular it is very useful in building single-page Web applications. Single page applications are the latest trend where the Web applications use a single page to load varying content dynamically based on user actions. User gets a feeling similar to using a desktop application.
Angular JS is written in JavaScript with a reduced jQuery library called jQuery lite.
It is completely open source and has the backing of Google and a dedicated community of followers.
Misko Hevery and Adam Abrons are the two developers who developed Angular JS while they were in Google. It was first released in October 2010.
It builds on HTML, JavaScript and CSS which all Web developers know already.
Angular JS extends HTML to give it Model-View-Controller (MVC) capabilities.
Another benefit it offers is that, it enables the developer, to encapsulate a portion of a page as one application, rather than forcing the entire page to be an Angular JS application. This is particularly advantageous if our project already includes another framework or if we want to make a portion of the page dynamic while the rest operates as a static page or is controlled by another JavaScript framework. This is also the idea on which Single Page Applications (SPA) are based.
In a nutshell, the objective of AngularJS is to provide a framework that makes it easy to implement well-designed and well-structured Web pages and applications using a Model-View-Controller (MVC) framework. AngularJS makes Web application and the code very simple to write, test, and maintain.
Why do we Choose Angular JS?
What are the benefits of using Angular JS?
Everything that Angular JS provides, we can also implement ourselves by using JavaScript and Query or by using another MVC JavaScript framework. Even though it is possible to do it, it will need lot of coding to build the structure requiring manifold time and programming. Against this hard work, Angular JS offers us a lot of functionality out of the box.
Some of the reasons which prompt us to choose AngularJS are:
- Angular JS framework makes us implement MVC and makes it easy for us to correctly implement MVC. • The declarative style of AngularJS HTML templates makes the construction of the HTML obvious.
- The model components of Angular JS are nothing but basic JavaScript objects. So it becomes easy to access and handle our data.
- Angular JS allows us to have our custom defined tags in HTML. This makes it possible for us to name the tags in a self-describing manner. This declarative approach extends the functionality of the tags and results in a direct link between the HTML tags and the JavaScript functionality described by them.
- Another advantage of Angular JS is that it provides simple and flexible filters that help us to easily format data as it passes from the model to the view.
- Angular JS applications use less code than traditional JavaScript applications. This is because we focus only on the logic and not all the finer details, such as data binding. They are made available to us by the Angular JS framework.
- Angular JS applications need less Document Object Model (DOM) manipulation than conventional methods. It is easier to design applications based on presenting data than on DOM manipulation.
- Angular JS supplies several built-in services and helps us to implement our own services in a structured and reusable way.
- It is easy to test applications and develop them using a test-driven approach.
MVC Concept
MVC Architecture Pattern
We saw that Angular JS supports MVC architecture in software development. MVC pattern is a way of design and development. It is a general paradigm used in many frameworks used for software development. AngularJS also follows this pattern of development and makes the developer adhere to this structure. In the MVC application development pattern, the different parts of the application are broken into components to do distinct task
The Model holds the data and logic, the View holds the visual layout and presentation, while the Controller coordinates the Model and View.
In summary, remember that MVC is a design pattern that we follow while we develop our applications. It is used in many other frameworks also other than Angular JS.
MVC Pattern Angular JS
1. Model has the application data of the business. It has the data that we want to display to our users or get the user to enter through our application. So model in an AngularJS project is mostly pure data and they are represented using JSON objects. The model is only aware of itself.
2.View is what is visible to the users of our application. They won’t get to see the model or controller of the application they are using. As against this, generally, the view knows the model, as it has to show the data contained in the model and calling actions (methods) on the model as and when needed.
3.Controller is the coding which would act as the link between the model and view. It is the responsibility of the controller to create and populate the model and give it to the view. Controller has the actual business logic and the code that fetches the data. It makes decisions about which part of the model to show to the user and how to handle validation. In other words, it has the core logic of the application.
For easy understanding, you can think of model and view as two persons standing on two sides of a bridge and the controller as the bridge which connects these two persons.
MVC Architecture Benefits in AngularJS
We can start off with a standard HTML-based set of views and then later add a new set of views supporting a totally different format, such as a native mobile front end. According to seasoned developers, MVC-style architecture offers us a huge reduction in the effort required for the overall app development cycle.
We gain this benefit because, through MVC, we apply the principle of ‘Separation of Concerns.’ The view is in no way exclusively tied to the model, so it is far easier to handle it as a distinct component that we can exchange out for another.
MVC helps in the testing phase also. It leads to applications that are much easier to test unit wise and the total application as a whole. The test process is continued as the application grows in complexity.
MVC is a tried and tested way to build robust applications. Once you start to see this in action, as the app development gets on, it will be very obvious to you.
Angular App Lifecycle
Now let us go through the execution cycle of a very simple Angular JS application to get a better understanding.
Once we understand how an Angular js application is built and how it gets executed, many of the implementation details of the framework will make sense. The reason for this is that the startup process provides a picture of how the components of the framework are linked together.
Shows the full code of the Angular JS application. This application can be used to compute the total cost if we provide the quantity of items we purchase and cost of each item.
index.html
< IDOCTYPE html>
<html Lang="en">
<head>
<meta charset-"UTF-8">
<title›Demo for Angular App Lifecycle‹/title>
<script sec-"angular.min.js">
<head>
<body>
‹div ng-app="costApp" ng-controlLer="CostController">
b>Bill:
‹div›
Quantity: ‹input type="number" min="0" ng-model-"qty" required >‹/div›
‹div> Cost: «input type-"number" min="0" ng-model-"cost" required ›
‹ div>
<b>Total:</b>
‹span ›
{{total | currency: 'Rs '}}
‹/ span>
‹button class="btn" ng-click="pay()*>Pay
‹/div>
< script>
var app = angular module('costApp', [ ]);
app. controller('CostController', function ($scope) i
$scope.qty = 0;
$scope.cost = 0;
$scope. total = 0;
Sscope-pay = function(f
this. total = this.qty • this.cost
});
});
</script>
</ body>
</html>Step-1, we make available the AngularJS framework to the app in line-6 of this code.
Step-2, we tell the app, in line-9 that the div’ element is the area where the application is operating and the name of the controller is “Cost Controller“.
Step-3, in line-20, through the script tag, we define the model data and the controller function.
Working of a Simple Angular JS Application
Bill:
Quantity: 0
Cost: 0
Total: Rs 0.00
PAY
Let’s walk through this example and see what’s going on. The code looks like any other HTML code except for the addition the Angular JS framework and some new attributes of Angular JS, such as ng-app, ng-controller, and ng-click.
These are the directives that come with angular framework.
The page gets loaded in the browser Loaded page and when the browser comes across the included angular.min.js file, it gets loaded, and the browser becomes aware of the angular application.
When Angular starts our application, it goes through and processes this code using the compiler. The outcome of this process is the rendered DOM, Which is sometimes referred to as the view.
The directives in Angular JS give special behavior to elements of HTML. Here, in this example we use the ‘ng-app’ directive. This directive initializes our application. The ng-model directive is used for storing or updating the value of the input field into / from a variable.
Another new markup shown here is the double curly braces {{expression | filter }): When the compiler comes across this markup, it will substitute it with the calculated value of the markup. An expression in a template is a code snippet, similar to a JavaScript that allows Angular to read and write variables. In our example, the markup tells Angular to take the data we got from the input elements and multiply them.
This example also contains a filter. A role of a filter is to format the value of an expression for display to the user. In this example, the filter formats a number into an output that looks such as money.
Now let us add some new values to use the application. shows the view after giving new values followed by the clicking of the ‘Pay’ button
Bill:
Quantity: 2
Cost: 200
Total: Rs 400.00
PAY
Summary
What is Angular JS? and its Uses, you learned that:
- Angular JS is a JavaScript framework which we use to build Web applications and dynamic Websites.
- MVC is a software design pattern that we follow while we develop our applications.
- Angular JS helps us to implement well-designed and well-structured Web applications using a Model-View-Controller (MVC) framework.
- Model has the application data.
- View is what is visible to the users of our application.
- Controller acts as the link between the model and view.
- The view is defined in HTML, while the model and controllers are implemented in JavaScript.
- Important components of an Angular JS application are directives, expressions, and filters.
- Angular JS has attained widespread acceptance and many popular Websites and Web applications are based on it.
YOU NEED ANGULAR JS CODE TUTORIALS w3schools