angularjs
TRANSCRIPT
Syam kumar KK
Sr.Software Engineer |
www.ecreationsindia.com
What Is Angular?
A JavaScript MVW framework (development started in 2009 by a Google employee Misko hevery and released in 2012)
Good for single page applications
AngularJS extends HTML with new attributes.
AngularJS is a structural framework for dynamic web apps
AngularJS was built with the CRUD application in mind
Anjular Js uses Declarative Data-Binding ( Vs imperative data binding )
Anjular Js uses the concept two-way data binding
Why You Should Use
AngularJS MVC done right
A declarative user interface
Data models are POJO
Behavior with directives
Flexibility with filters
Write less code
Unit testing ready : Angular already has a mock HTTP provider to inject fake server responses into controllers
MVC – Model View ControllerView
Renders the Model data
Send user actions to controller
UI
Model
Business logic
Notify view changes
Application functionality
Data in General
Controller
Define application behaviour
Maps user actions to model
Select view for response
Directives -special ng attributesng-app
Determines which part of the page will use AngularJS
If given a value it will load that application module
ng-controller
Determines which Javascript Controller should be used for that part of the page
ng-model
Determines what model the value of an input field will be bound to
Used for two-way binding
ng-directives (basic use directives)
AngularJS extends HTML with ng-directives.
The ng-bind directive binds application data to the HTML view.
The ng-show directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.
The ngClick directive allows you to specify custom behavior when an element is clicked.
AngularJS starts automatically when the web page has loaded
Egg: <div ng-app="">
<p>Name: <input type="text" ng-
model="name"></p>
<p ng-bind="name"></p>
</div>
Egg:<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-
bind="firstName"></span></p>
</div>
AngularJS ExpressionsAngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
Egg: <div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
Egg: <div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
AngularJS Objects
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
AngularJS Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The points are {{ points[2] }}</p>
</div>
AngularJS Controllers The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
<div ng-app="" ng-controller="personController">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}</div><script>function personController($scope) {
$scope.firstName="John",$scope.lastName="Doe"
}</script>
<div ng-app="" ng-controller="namesController">
<ul><li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
<script>
function namesController($scope) {$scope.names = [{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}];
}
</script>
AngularJS Filters
Egg:
<div ng-app="" ng-controller="personController"><p>The name is {{ lastName | uppercase }}</p>
</div>
Egg:
<div ng-app="" ng-controller="costController"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>Total = {{ (quantity * price) | currency }}</p>
</div>
AnjularJs services AngularJS $http is a core service for reading data from web servers.
$http.get(url) is the function to use for reading server data.
<div ng-app="" ng-controller="customersController"><ul>
<li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}
</li></ul></div><script>function customersController($scope,$http) {
$http.get("JSON.php").success(function(response) {$scope.names = response;});
}</script>
* Built-in services always start with $ (e.g. $http).
* Define their own services by registering the service's name and service factory function, with an Angular module.
AnjularJs Scopes scope is an object that refers to the application model.
Scope is the glue between application controller and the view.
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
* $rootScope
Dependency Injection
Dependency Injection is software
design pattern that deals with how code
gets hold of its dependencies.
Advantages of AnjularJS on HTML
compiler
1) No need to read user
input and merging it with
data
2 ) No need to
clobbering user input by
overwriting it
3 ) Its not require
managing the whole
update process
4) innerHTML is not
using
Please, please, please !!!
A hammer is an excellent tool,
but it’s not used for everything !!!
Resources
https://docs.angularjs.org/guide
https://docs.angularjs.org/api
http://www.sitepoint.com/10-reasons-use-angularjs/
http://www.w3schools.com/angular/
Thank you for listening !