Scribd
Upload
14 views

Angular Js

ANGULAR JS

Uploaded by

Angel cañas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Angular Js

ANGULAR JS

Uploaded by

Angel cañas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

AngularJS

What is AngularJS

à Javascript Framework
à MVC
à for Rich Web Application
Development
à by Google
Why AngularJS
“Other frameworks deal with HTML’s shortcomings by
either abstracting away HTML, CSS, and/or JavaScript
or by providing an imperative way for manipulating the
DOM. Neither of these address the root problem that
HTML was not designed for dynamic views”.

●Lightweight ( < 36KB compressed and minified)


●Free
●Separation of concern
●Modularity
●Extensibility & Maintainability
●Reusable Components
What we used previously.

●Allows for DOM Manipulation


●Does not provide structure to your
code
●Does not allow for two way binding
What we used previously.
<p>Select value: {{ theValue }}</p> <p>Select value: <span
<select ng-model="theValue"> id="theValue"></span></p>
<option value="1">1</option> <select id="theSelect">
<option value="2">2</option> <option value="1">1</option>
</select> <option value="2">2</option>
</select>

$(function() {
$('#theSelect').on('change',
function() {
var value = $(this).val();
$('#theValue').text(value);
}
});
Some Features

à Two-way Data Binding – Model as single


source of truth
à Directives – Extend HTML
à MVC
à Dependency Injection
à Testing
à Deep Linking (Map URL to route Definition)
à Server-Side Communication
Simple Example

<html ng-app>
<head>
<script src='angular.min.js'></script>
</head>
<body>
<input ng-model='user.name'>
<div ng-show='user.name'>Hi
{{user.name}}</div>
</body>
</html>
MVC

Model (Data)
View (UI)
Change Notifies

Event Notification
Changes

Controller (Logic)
MVC

Model JS Objects

View DOM

Controller JS Classes
Bootstrapping
Expressions

AngularJS binds data to HTML using Expressions.

<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>

<div ng-app="" ng-init="points=[1,15,19,2,40]">


<p>The third item is <span ng-bind="points[2]"></span></p>
</div>
Directives

AngularJS lets you extend HTML with new attributes called


Directives.

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>


<p ng-bind="firstName"></p>
</div>

https://docs.angularjs.org/api/ng/directive
Directives

<div ng-app="" ng-init="names=[


{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
<li ng-repeat=”x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>
Controllers
AngularJS controllers control the data of AngularJS
applications.
<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-


model="firstName"><br>
Last Name: <input type="text" ng-
model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
Filters
Filter is used to do some transformation of the scoped
Data. Filter is applied using the symbol | (pipe).

Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">


<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>
Server Interaction

$http is an AngularJS service for reading data from remote


servers.
{
"records": [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
}
]}
Server Interaction

$http is an AngularJS service for reading data from remote


servers.

<div ng-app="myApp" ng-controller="customersCtrl">


<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
Modules

A module is a container for the different parts of an


application. All application controllers should belong to a
module.
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
$Scope
“Scope is an object that refers to the application model. It is
an execution context for expressions. Scopes are arranged
in hierarchical structure which mimic the DOM structure of
the application. Scopes can watch expressions and
propagate events.” - From Angular website

à {{firstName + " " + lastName}} is an expression executed


within scope

à Scope can be hierarchal with DOM nesting of directives

à Watches can be used to watch for changes to scope ex:


$scope.$watch("firstName", function(value) {
//update the DOM with the new value
});
$rootScope = {
$scope .emit/.on
Index Controller
$scope = { — Scopes can "message" parent/child
people: [{},{},{}] scopes
DIRECTIVE (RENDERING HTML!)
— $scope.$emit(…)
ng-repeat="person in people"
John Culviner Message upward
Jane Doe,
John Doe — $scope.$broadcast(…)
Message downward
Hey John
Person Controller — Here:
$scope: { changed!
person: {
— When a person changes
firstName: "John",
Refresh! — Notify the "Index" controller to
}
lastName: "Culviner refresh it's list (which has now
} changed)
updatePerson: function()
} {
//save a person
}
}
Putting it on Together

Contents taken from https://docs.angularjs.org/tutorial/step_04


Two way data Binding
$ngRoutes

“Application routes in Angular are declared via the


$routeProvider, which is the provider of the $route service.
This service makes it easy to wire together controllers,
view templates, and the current URL location in the
browser. Using this feature, we can implement deep
linking, which lets us utilize the browser's history (back and
forward navigation) and bookmarks.” - Angularjs.org

var phonecatApp = angular.module(’phonecatApp', [


'ngRoute',
’OtherDepedencies'
]);
$ngRoutes
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
$ngRoutes
….

<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-
src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
….

Full example can be found in https://docs.angularjs.org/tutorial/step_07


Single Page application

http://fastandfluid.com/publicdownloads/
AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
Single Page application

You might also like