2. Index
● What is AngularJS? Why Angular JS?
● History of AngularJS
● Angular JS Patterns
● Introduce to AngularJS Code
● Invoking Angular JS
● DataBinding in AngularJS
● Expressions
● Directives
● Filters
● Modules
● Controllers
● Services
● Forms
● Application example
3. “Angularjs is what HTML would have been if it had
been designed for building web applications”
https://angularjs.org/
4. What is Angular JS?
AngularJS is an open-source web application framework for
client-side MVC and MVVM architectures.
Why Angular JS?
HTML is great for declaring static documents, but it falters
when we try to use it for declaring dynamic views in web-
applications. Angular JS lets you extend HTML vocabulary for
your application
5. History of Angular JS
AngularJS was originally developed in
2009 by Misko Hevery at Brach Tech LLC.
Created at Google as internal project.
AngularJS version 1.0 was released in 2012.
Currently working on 1.4.9
Angular JS 2 (Beta)
https://en.wikipedia.org/wiki/AngularJS
6. MVC - Model View Controller
VIEW
MODEL CONTROLLER
- Renders the Model data
- Sends user actions/events
to controller
- UI
- Defines application
behaviour
- Maps user actions to
Model
- Selects view for response
- Business Logic
- Notifies view changes
- Data in general
User Action or View Load
Maps to particular
Model after fetching
the data
Implements the Business
Logic on response data
and binds it to View
11. Invoking Angular
Any application must do two things to start Angular:
1) Load the angular.js library
2) Tell Angular which part of the DOM it should manage with the ng-app
directive
<script type=”text/javascript” src=”angular.min.js” />
<html>
<div ng-app>
…
</div>
...
</html>
<html ng-app>
....
</html>
13. Data Binding
-
One-way binding:
Binding from scope to HTML. “Mustache” syntax
{{dato}}
Two-way binding:
Binding from scopel to HTML, and binding from HTML to scope
<input type="text" ng-model="miDato" />
15. Expressions
Allow you to insert dynamic values into your HTML
AngularJS expressions can be written inside double braces: {{expression}}
Angular JS expressions can be written inside a directive: ng-bind=”expression”
1) Numerical Operations
{{ 4 + 6}} → 10
2) String Operations
{{“hello” + “ you”}} → hello you
https://docs.angularjs.org/guide/expression
16. Directives
Directives are ways to expand our html. They allow you to add from small pieces of
code or full functionality
Angular comes with a set of these directives built in, like:
● ng-app
● ng-controller
● ng-model
● ng-bind
● ng-repeat
● ng-init
● ng-show/ng-hide
● ng-class
● ng-click
● ng-form
● ng-submit
● ng-if
● ng-href
● ng-src
● custom directives (Next workshop)
https://docs.angularjs.org/api/ng/directive/
17. ng-model
With the ng-model directive you can bind the value of an input field to a
variable created in AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
19. ng-show / ng-hide
The ng-show / hide directive shows or hides the given html based
on the expression provided in the ng show/hide attribute
Click me: <input type="checkbox" ng-model="checked">
<div>
Show:
<div class="animate-show" ng-show="checked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
<div>
Hide:
<div class="animate-show" ng-hide="checked">
<span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
20. Filters
● Angular filters format data for display to the user.
{{ expression [| filter_name[:parameter_value]...] }}
{{ totalCost | currency }}
● Filters can be chained and can take optional
arguments.
{{ totalCost | currency | filter2 | filter3 }}
{{ totalCost | currency:”USD$” }}
24. Modules
- Where we write pieces of our Angular application.
- Makes our code more maintainable, testable and
readable.
- Where we define dependencies for our app
25. Modules
var app = angular.module(‘moduleName’, [] );
Dependencies
Creating:
Including the module:
<html ng-app=”moduleName”>
....
</html>
<html>
<div ng-app=”moduleName”>
…
</div>
...
</html>
27. Controllers
Controllers are where we define our app’s behavior by
defining functions and values.
app.controller('ViewCtrl', ['$scope', '$location', 'recipe',
function($scope, $location, recipe) {
$scope.recipe = recipe;
$scope.edit = function() {
$location.path('/edit/' + recipe.id);
};
}]);
<html>
<div ng-controller=·ViewCtrl”>
…
</div>
...
</html>
28. $scope
Scope is an object that refers to the application
model.
VIEW CONTROLLER$scope
<input type=”text” ng-model=”name” />
function SimpleController($scope) {
$scope.name = “Leo”;
}
29. Services
Services are singletons objects that are instantiated
only once per app.
Services are used to organize and share code
across your app.
Controllers are view-specific, services are app-
specific.
31. Built-in Services - $http
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
} else if (xmlhttp.status == 400) {
// Handle error gracefully
}
};
// Setup connection
xmlhttp.open(“GET”, “http://myserver/api”, true);
// Make the request
xmlhttp.send();
$http.get('api/user', {params: {id: '5'}
}).success(function(data, status,
headers, config) {
// Do something successful.
}).error(function(data, status, headers,
config) {
// Handle the error
});
32. Forms
Forms and controls provide validation services, so that
the user can be notified of invalid input.
This provides a better user experience.
<div ng-form=”loginForm” >
<input type=”text” ng-model=”user.name” name=”uName” required />
<button ng-click=”update(user)” ng-disabled=”loginForm.$invalid”>
SAVE
</button>
</div>