What is AngularJS?
AngularJS (Angular.js) is open-source JavaScript MVC framework, maintained by Google. Using AngularJS you can use HTML as your template language and extend HTML’s syntax, in short it eliminates much of the code you currently write through data binding and it all happens in JavaScript within the browser so, it’s very fast now days. So you can say, AngularJS supports browser based applications with MVC capability.Why AngularJS?
HTML
can be used for declaring static document but when we want to use dynamic
document declaration it fails, so AngularJS is useful for declaring dynamic
document which is very expressive, readable, and quick to develop.
Below
points can demonstrate usage of AngularJS.
Change
Detection:
AngularJS
offers two way data binding without affecting model. Usingwatchers, listeners,
snapshot strategy it will look for code changes once your code executes and
manipulates the model.
MVC:
AngularJS
is divided into components like model, view, controller and services. This is
familiar to anyone working on projects using separated presentation patterns.
AngularJS also includes directives, filters and other abstractions that provide
balance between complexity and separation.
More
on directives:http://docs.angularjs.org/guide/directive
More on filters:http://docs.angularjs.org/guide/filter
Pattern
variety:
Apart
from regular patterns like model view controller and dependency injection,
AngularJS provides many other familiar patterns.
To
summarize why to use AngularJS, following features says it all.
Features of AngularJS:
- Two way data binding ( Model as well as View )
- MVC pattern
- Template
- Custom-directive (reusable components, custom mark-up)
- REST-friendly (While Compunction with Server Provide shttp and $resource services )
- Deep Linking (Set up a link for any dynamic page)
- Form Validation
- Localization
- Dependency injection
- Full testing environment (both unit, E2E)
AngularJS Blocks:
- Model: The data or the state represented by the web application or to be specific, the state of the concerned web page.
- View: The visual representation and projection of model. Its responsibility is to present the information in model in a user appreciable format.
- Controller: The brain dictating the application behavior. Its responsibility is to link the right model with the right view.
Implementing AngularJS:
- Copy the AngularJS script to root directory. You can use http://angularjs.org/link to get AngularJS latest build for development.
- Include
AngularJS Script and CSS files in the head tag of your HTML page.
---------------------------------------------------------------------------------------------------
<linkhref="angular-1.0.8/docs/css/bootstrap.min.css"rel="stylesheet"type="text/css"/>
<scriptsrc="angular-1.0.8/angular.js"type="text/javascript"></script>
--------------------------------------------------------------------------------------------------- - Define
Root Scope in two different ways.
---------------------------------------------------------------------------------------------------<formid="masterPage"ng-app>Your Content goes here</form>Or<htmllang="en"ng-app>
---------------------------------------------------------------------------------------------------
Examples:
1. Basic
Example
---------------------------------------------------------------------------------------------------
<!doctypehtml
<htmllang="en"ng-app>
<head>
<metacharset="utf-8">
<title>My First Angular Js Application</title>
<linkhref="angular-1.0.8/docs/css/bootstrap.min.css"rel="stylesheet"type="text/css"/>
<scriptsrc="angular-1.0.8/angular.js"type="text/javascript"></script>
</head>
<body>
<div>
<label>
Name:</label>
<inputtype="text"ng-model="yourName"placeholder="Enter a
name here">
<hr>
<h1>
Hello {{yourName}}</h1>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------Output:
2. Validation
of form:
---------------------------------------------------------------------------------------------------
<!doctypehtml>
<htmlng-app>
<head>
<linkhref="angular-1.0.8/docs/css/bootstrap.min.css"rel="stylesheet"type="text/css"/>
<scriptsrc="angular-1.0.8/angular.min.js"type="text/javascript"></script>
<scriptsrc="FormController.js"type="text/javascript"></script>
<styletype="text/css">
.css-forminput.ng-invalid.ng-dirty
{
background-color: #FA787E;
}
.css-forminput.ng-valid.ng-dirty
{
background-color: #78FA89;
}
</style>
</head>
<body>
<divng-controller="Controller">
<formname="form"class="css-form"novalidate>
<table>
<tr>
<td>
Name:
</td>
<tdcolspan="2">
<inputtype="text"ng-model="user.name"name="uName"required/>
</td>
</tr>
<tr>
<td>
E-mail:
</td>
<tdcolspan="2">
<inputtype="email"ng-model="user.email"name="uEmail"required/>
</td>
</tr>
<tr>
<tdcolspan="3">
<divng-show="form.uEmail.$dirty &&
form.uEmail.$invalid"style="color: Red">
Invalid: <spanng-show="form.uEmail.$error.required">Tell
us your email.</span>
<spanng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</td>
</tr>
<tr>
<td>
Gender:
</td>
<tdcolspan="2">
<inputtype="radio"ng-model="user.gender"value="male"/>male
<inputtype="radio"ng-model="user.gender"value="female"/>female
</td>
</tr>
<tr>
<tdcolspan="3">
<inputtype="checkbox"ng-model="user.agree"name="userAgree"required/>
I agree:
<inputng-show="user.agree"type="text"ng-model="user.agreeSign"required/>
</td>
</tr>
<tr>
<tdcolspan="3">
<divng-show="!user.agree || !user.agreeSign">
Please
agree and sign.</div>
</td>
</tr>
<tr>
<tdcolspan="3">
<buttonng-click="reset()"ng-disabled="isUnchanged(user)">
RESET</button>
<buttonng-click="update(user)"ng-disabled="form.$invalid
|| isUnchanged(user)">
SAVE</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
Output:
Links and downloads:
AngularJS
API Docs:AngularJS reference materials
http://docs.angularjs.org/api/
About Author:
Sujit Kumbhar is technology lead in Systems Plus Pvt. Ltd. and keen to resolve challenges using his technical skills. He actively contributes to technology and can be contacted at: sujit.ku@spluspl.com
About Author:
Sujit Kumbhar is technology lead in Systems Plus Pvt. Ltd. and keen to resolve challenges using his technical skills. He actively contributes to technology and can be contacted at: sujit.ku@spluspl.com
Really nice blog post.provided a helpful information.I hope that you will post more updates like this AngularJS5 Online Course
ReplyDeleteThis comment has been removed by the author.
ReplyDelete