What is AngularJS?
AngularJS is a front-end open source javascript based framework.
AngularJS is maintained and developed by Google and its community of developers.
Angular JS is written in javascript and its a cross-platform browser supporting tool.
Here the more focus is on HTML web apps with best user experience across different screen sizes (Mobile/Desktop/Projector screens etc).
Why ANGULARJS?
- Defines a number of ways to organize web application at the client side.
- It enhances HTML by including directives, custom tags, attributes, expressions, templates within HTML.
- It also encourages MVC design pattern
- The code can be reused.
- and its best for Single Page Apps (SPA)
Features of ANGULARJS
- Declarative HTML approach
- Easy Data Binding
- Components can be reused
- MVC Design Pattern
- Dependency Injection
- End to end Integration Testing
- Routing
- Templating
- Modules
- Services
- Expressions
- Filters
- Directives
- Form Validation
- $scope, $http, $routeProvider
Directive
- The directives can be placed in element names, attributes, class names, as well as comments.
Directives are a way to teach HTML new tricks.
A directive is just a function which executes when the compiler encounters it in the DOM.
<input ng-model=’name’>
Custom Defined Directives
<span draggable>Drag ME</span>
ng-app
Use this directive to auto-bootstrap an application.
Only one ng-app directive can be used per HTML document
<html ng-app>
Expressions
Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{
expression }}
<body>
1+2={{1+2}}
</body>
Example:
<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js”></script>
<body>
<h1> AngularJS Text Entry change event </h1><hr>
<div ng-app=””>
<p>Name: <input type=”text” ng-model=”name”></p>
<p ng-bind=”name”></p>
<p>SUM of two numbers: {{ 4 + 5 }}</p>
<form name=”myForm”>
Email:
<input type=”email” name=”myAddress” ng-model=”text”>
<span ng-show=”myForm.myAddress.$error.email”>Not a valid e-mail address</span>
</form>
</div>
</body>
</html>
