In this article we let you know about AngularJs Framework. In the world of coders, an angular framework is used to build fast and reliable applications for users. First I will let you know what you learned from this, like about AngularJS, Filters, Modules, Controllers, directives, expressions, and more.
Introduction AngularJs:
You know when it was released? Don’t worry, I’ll let you know. The first version ( 1.0 ) of angular was released in 2012. Google employee “Misko hevery” started work with Angular JS in 2009. Angular JS is a JS (Javascript) Framework written in JS (Javascript). This is maintained by the Google team, who provide you with a suite of tools, APIs, and libraries for your development workflow. Angular JS framework provides you with a solid platform on which to build, a reliable, and fast application that is the most scaleable of your team and size of codebase.
What Prerequisites required for AngularJs:
you need to know about HTML, CSS, JS, and TypeScript for Angular JS. Basically HTML determines the UI.
Extends HTML:
- AngularJs uses “ng-directives” for extending HTML.
- The directives “ng-app” defines an angular application.
- The directive “ng-model” is used to bind HTML control to APP data. Like input, select, and textarea.
- The directive “ng-bind” is used to bind applications for HTML view.
AngularJs Example:
Example Explained:
When the web page is loaded the Angular JS start automatically.
- The directive “ng-app” lets Angular JS know that the “<div>” element is “owner” for Angular JS.
- The directive “ng-model” binds the value of input for app variable name.
- The directives “bg-bind” bind the content like <P> element to app variable name.
Angular Directives and Expressions:
AngularJs directives in HTML attributes with prefix “ng”. The directive “ng-init” initialises the app variable. If you want to make a valid HTML page, use “data-ng”, instead of “ng”. Angular JS set build-in directives which offer to your app .You also set your own directives in angular. There are following directives which prefix ng- For example “nd-app”, “ng-init”, and “ng-model”.
The Expression looks like “{{ expression }}”, written in double braces. Angular expressions must be written in directive like ng-bind=”expression”. It’s similar to a javascript expression. This resolves the expression, and in return you get the result exactly where the expression is written. For example {{ 7 + 7 }} or {{ FName + ” ” + LName }}.
<div ng-app=””>
<p>My first AngularJs expression: {{ 7 + 7 }}</p>
</div>
if the directive “ng-app” is removed, then HTML displays the expression as the same as it is, without any results.
Here is we explain AnguarJS component.
AngularJs APP:
The “AngularJs Modules” define Angular JS APP. The “AngularJs Controller” controls Angular JS APP. The directive “ng-app” defines the app, and the directive “ng-controller” defines the controller.
Examples
Angular Modules:
The module is different parts of an app. This is a container for app controllers. Controllers belong to modules.
Creating a Module
This is created by the “angular.module” Angular JS function.
For example
<div ng-app=”myApp”>…</div>
<script>
var app = angular.module(“myApp”, []);
</script>
The “myapp” refers to HTML to run the app.
AngularJs Filters:
AngularJs filters add to format data in Angular JS. The following filters to transform data: currency, date, filter,json,limitti, lowercase, number, order by, uppercase.
If you want to see from official documentation, click here “Angular Official Documentation“.
Filters adding in expressions
Filters add in expressions using pipe character | , the filter “uppercase” format string to uppercase.
<div ng-app=”myApp” ng-controller=”personCtrl”>
<p>The name is {{ FirstName | uppercase }}</p>
</div>
the filter “lowercase” format string to uppercase.
<div ng-app=”myApp” ng-controller=”personCtrl”>
<p>The name is {{ FirstName | lowercase }}</p>
</div>
The filter “filter” is used for an array. It only matches items from the array. The syntax is ” {{ arrayexpression | filter : expression : comparator }} “.
The “expression” in syntax used for selecting items from an array. This expression can be a type of String, Object, and function. And the “comparator” in syntax is strict for comparison. Like return in true or false.
