2. 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
3. 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
4. MVC – Model View Controller
View
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
5. Directives -special ng attributes
ng-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
6. 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.
7. 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>
8. AngularJS Expressions
AngularJS 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>
10. 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>
13. 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.
14. 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
16. 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
17. Please, please, please !!!
A hammer is an excellent tool,
but it’s not used for everything !!!