General Features :
- AngularJS is a JavaScript framework.
- AngularJS is a efficient framework that can create Rich Internet Applications.
- Client side MVC frameWork.
- Applications written in AngularJS are cross-browser compliant.
- SPA (Single Page Application)
- Supported for Web and mobiles.
- AngularJS is open source, completely free.
- AngularJS is a framework to build large scale Apps.
- High performance, and easyto-maintain web applications.
Core Features:
Two way Data-binding: It is the automatic synchronization of data between model and view
Scope : scope is an object that refers to the application model. Every controller has an associated scope object. Scopes provide APIs ($watch) to observe model mutations.
Controller: These are JavaScript functions bound to a particular scope.
Services: AngularJS comes with several built-in services such as $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.
Filters: These select a subset of items from an array and returns a new array.
Directives:
Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel, etc.
- Predefined Directives
Ex: ng-app(route directive), ng-bind, ng-show, ng-hide, ng-repeat, ng-if.
we can also write data-ng-bind, data-ng-show etc..
- Custom Directives
<div directivename ></div> like attribute
<customdirectivename></customdirectivename> linke html tag.
Routing: It is concept of switching views.
Templates: These are the rendered view with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.
MVC: Model View whatever ex: MVVM (Model-View-ViewModel)
Advantages:
1. capability to create Single Page Application in a very clean and maintainable way.
2. It provides data binding capability to HTML.
3. AngularJS code is unit testable.
4. AngularJS provides reusable components .
5. write less and do more. ex:ng-repeat directive
6. AngularJS applications can run on all major browsers and smart phones, including Android and iOS based phones/tablets.
DisAdvantages:
1. If the user of your application disables JavaScript, then nothing would be visible, except the basic page.
2. JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure
Directives:
ng-app : This directive defines and links an AngularJS application to HTML.
ex: ng-app, ng-app = “appname”
ng-model : This directive binds the values of AngularJS application data to HTML input controls.
ex: <input type=”text” ng-model=”modelname” />
ng-model : This directive binds the values of AngularJS application data to HTML input controls.
ex: <input type=”text” ng-model=”modelname” />
ng-bind : This directive binds the AngularJS application data to HTML tags.
ex1: <div data-ng-bind=”modelname”></div>
ex2: <div>{{modelname}}</div>
ex1: <div data-ng-bind=”modelname”></div>
ex2: <div>{{modelname}}</div>
ng-init - This directive initializes application data.
ex:<div data-ng-init=”name=’bujji’”></div>
<div data-ng-bind=”name”></div>
o/p : bujji
MVC: Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts
Model - It is the lowest level of the pattern responsible for maintaining data.
View - View - It is responsible for displaying all or a portion of the data to the user.
Controller : It is a software Code that controls the interactions between the Model and View.
Angularjs Application Development Process:
1. Include the angularjs lib file(load the library).
2. Define Angularjs using data-ng-app
ex: <div data-ng-app=””></div>
3. Define modelname using data-ng-model
ex: Enter Name: <input type=”text” data-ng-model=”myname” />
4. Bind the model name using data-ng-bind
ex: <div data-ng-bind=”myname”></div>
(or)
<div>{{myname}}</div>
First Example:
<!DOCTYPE html>
<html lang="en" data-ng-app="">
<head>
<title>AngularJs Application</title>
</head>
<body>
<div>Enter Name: <input type="text" data-ng-model="myname"></div>
<div>Hello <span data-ng-bind="myname"></span></div>
</body>
</html>
2. Develop Application using controller :
<!DOCTYPE html>
<html lang="en" data-ng-app="">
<head>
<title>AngularJs Application</title>
</head>
<body data-ng-controller=”myCtrl”>
<div><input type=”text” data-ng-model=”myname”/></div>
<div><span data-ng-bind="myname"></span></div>
<button ng-click=”fnClick()”>click here</button>
<script>
function myCtrl($scope){
$scope.myname =’Welcome to Angularjs';
$scope.fnClick=function(){
console.log($scope.myname)
}
}
</script>
</body>
</html>
o/p: Welcome to Angularjs
Note: here we are taking variable from controller and binding in view (html file)
above example we can observe controller to view and view to controller communication.
view ---> controller
controoler ---> view
AngularJS Filters :
Filter: Selects a subset of items from array and returns it as a new array.
Filters can be added to expressions by using the pipe character | followed by a filter.
currency :(Formats a number as a currency)
Usage : {{ currency_expression | currency : symbol : fractionSize}}
Ex: <div ng-init="amount = 1234.56">
<span>{{amount | currency}}</span>
</div>
Result : $1,234.56
Ex: <span id="currency-no-fractions">{{amount | currency:"USD$":1}}</span>
Result : USD$1,234.6
Filter: Selects a subset of items from array and returns it as a new array.
Filters can be added to expressions by using the pipe character | followed by a filter.
currency :(Formats a number as a currency)
Usage : {{ currency_expression | currency : symbol : fractionSize}}
Ex: <div ng-init="amount = 1234.56">
<span>{{amount | currency}}</span>
</div>
Result : $1,234.56
Ex: <span id="currency-no-fractions">{{amount | currency:"USD$":1}}</span>
Result : USD$1,234.6
