What is Angular JS?
AngularJS is probably one of the most common web frameworks that are available today. It is a JavaScript-based front-end web framework. It is used by thousands of developers across the world. Angular JS is licensed under the Apache license version 2.0. It was originally developed by Adam Abrons and Misko Hevery in the year 2009.
This framework is managed by Google & by a community of individuals to deal with most of the challenges faced in developing web page applications. Due to the complete support of Google and ideas from a wide community forum, the angular JS framework is always kept up to date. Similarly, it always incorporates the newest development trends in the market.
AngularJS Features
AngularJS is a framework to build high-performance, large scale, & easy-to-maintain web applications. Let’s discuss the key features which make Angular JS as a powerful framework in the market.
- MVC: The framework includes the famous concept of Model-View-Controller (MVC). It is a design pattern used in day to day web applications. This pattern depends on splitting the business logic layer, the data layer, & presentation layer into three separate sections. The division is done into three different sections so that they could be managed more easily.
- Data Model Binding: You don’t have to write special code to bind data to the HTML controls. This can be done by Angular JS by adding some snippets of code.
- Writing less code: When dealing out with DOM manipulation a lot of JavaScript code was required to be written to get an application designed. But with AngularJS, the lesser amount of code is required.
- AngularJS is an effective framework that can create Rich Internet Applications (RIA).
- Applications written in Angular JS are mainly cross-browser compliant. It automatically manages JavaScript code that is suitable for each browser.
Advantages of AngularJS
Angular JS applications can run on smartphones run on Android or iOS, and also on all major browsers. The advantages are as follows:
- Single Page Application can be created in a very clean and maintainable way.
- It offers data binding capability to HTML. Thus, it provides the user with rich and responsive experience.
- Angular code is unit testable.
- It uses dependency injection and defines the use of separation of concerns.
- It provides reusable components.
- With AngularJS, the developers can attain more functionality with the shortest code.
- In Angular JS, views are mainly pure HTML pages, & controllers which are written in JavaScript do the business processing.
A brief AngularJS cheat sheet
This cheat sheet will help the developers during their front web developer certifications or exams. Let’s begin with AngularJS cheat Sheet.
1. Angular JS Expressions:
AngularJS binds data to HTML with the help of Expressions. You can write Angular JS expressions inside double braces: {{expression}}. AngularJS expressions are similar to JavaScript expressions. They can comprise of literals, operators, and variables.
Example:
{{5 + 5}} or {{first Name + ” ” + lastName}}
2. Angular JS Modules
An Angular JS module is primarily a container for the different parts of an app. A module is created by using the Angular JS function angular.module.
<Script>
var app = angular.module(“myApp”, []);
</Script>
The “myApp” parameter denotes an HTML element in which the application will run.
3. Directives
You can extend HTML with new attributes that are called Directives. It contains a set of built-in directives which offers functionality to the applications. You can define your directives. AngularJS directives are extended HTML attributes with the ng- as a prefix.
- The directive ng-app: Bootstraps the application.
- The directive ng-init: Initializes application data.
- The directive ng-model: Binds the value of HTML controls i.e. input, select, textarea to your application data.
4. AngularJS Data Binding
In AngularJS, data binding is the synchronization among model and view.
Data Model
Angular JS applications usually have a data model. The data model is basically a collection of data that is available for the application.
Example:
var app=angular.module(‘myApp’,[]);
app.controller(‘myCtrl’, function($scope)
{
$scope.firstname = “John”;
$scope.lastname = “Doe”;
});
5. Angular JS Controllers
AngularJS application is controlled by a controller.
AngularJS controllers meant to control the data of AngularJS applications.
Angular JS controllers are regular JavaScript Objects.
The directive ng-controller defines the application controller.
A controller is basically a JavaScript Object which is created by a JavaScript object constructor.
6. Filters:
Filters are used to encompass the behavior of binding expressions & directives.
In general, they are used by developers to format values or to apply certain conditions.
They are implemented every time the value bound in the binding expression is altered.
AngularJS offers filters to convert data, few filters are listed below:
- Currency: Format numbers to a currency format.
- Date: Format dates to a specified format.
- Filter: Select a subset of values from an array.
- JSON: Format a particular object to a JSON string.
- LimitTo: Limits an array/string, into a particular number of elements/characters.
- Number: Format a number to a string.
- OrderBy: Orders an array by an expression.
- Uppercase: Format a string to uppercase.
7. Angular JS Scope
The scope is the binding part among HTML (view) & the JavaScript (controller). A scope is an object with the available methods and properties. The scope exists for both the view & the controller.
<div ng-app=”myApp” ng-controller=”myCtrl”>
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope)
{
$scope.carname = “Volvo”;
});
</script>
8. AngularJS SQL
AngularJS is best to display data from a Database. Ensure that the data is in JSON format.
Example:
<div ng-app=”myApp” ng-controller=”customersCtrl”>
<table>
<tr ng-repeat=”x in names”>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘customersCtrl’, function($scope, $http) {
$http.get(“customers_mysql.php”)
.then(function (response) {$scope.names = response.data.records;});
});
</script>
9. AngularJS Forms
Forms in AngularJS offer validation of input controls and data-binding.
Input Controls: Input controls are primarily the HTML input elements:
- Input elements
- Select elements
- Button elements
- Textarea elements
Data-Binding
Input controls offer data-binding by using directive ng-model.
<input type=”text” ng-model=”firstname”>
10. AngularJS Form Validation
AngularJS offers client-side form validation. It observes the state of the form and input fields (input, textarea, select), & informs the user about the current state. Angular JS also holds information about whether the input has been modified, or not. You can use standard HTML5 attributes to confirm input, or you can create your validation functions.