Introduction to SPA
Angular JS
Mustafa M. Gamal
mustafa@moveitgate.com
AngularJs: First Glance
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
...
App Bootstrap
• The injector that will be used for dependency
injection within this app is created.
• The injector will th...
MVC
<html lang="en" ng-app>
<head>
....
<script
src="lib/angular/angular.js"></script>
<script
src="js/controllers.js"></s...
MVC
ViewModel
Controller
Actions
$scope.model
$scope.model
MVC
Filters
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng...
Filters
Order By
HTML
...
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option
value="name">Alphabetica...
AJAX Request
• $http service used to make
an HTTP request to web
server to fetch data
app/phones/phones.json
• Understand ...
Promise pattern
function asyncGreet(name) {
var deferred = $q.defer();
setTimeout(function () {
scope.$apply(function () {...
$http function
$http({ method: 'GET', url: '/someUrl' }).
success(function (data, status, headers, config) {
// this callb...
$http configurations
• method – {string} – HTTP method (e.g. 'GET', 'POST', etc)
• url – {string} – Absolute or relative U...
Dependency Injection - 1
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.jsoqn').success(function(data) {...
Dependency Injection - 2
var PhoneListCtrl = ['$scope', '$http',
function ($scope, $http)
{
$http.get('phones/phones.json'...
Template
<ul class="phones">
<li ng-repeat="phone in phones | filter:query |
orderBy:orderProp" class="thumbnail">
<a href...
Multiple Views, Routing and Layout
Template
• A common template for all views in application
• Partial template included b...
Defining module
angular.module('phonecat', []).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when(...
Controller and Routing
function PhoneDetailCtrl($scope,
$routeParams) {
$scope.phoneId =
$routeParams.phoneId;
}
//url: ht...
Views and Tmplates
Intex.html
<html lang="en" ng-app="phonecat">
<head>
...
<script src="lib/angular/angular.js"></script>...
Details view
<img ng-src="{{phone.images[0]}}"
class="phone">
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
<ul cla...
Module Template Filters
Without filters With filter
app/js/app.js
angular.module
('phonecat',
['phonecatFilters']).
app/js/filters.js
angular.module
('phonecatFilters',
[]).f...
Template - Filters
<span>Connectivity</span>
<dl>
<dt>Network Support</dt>
<dd>{{phone.connectivity.cell}}</dd>
<dt>WiFi</...
Views events and Controller actions
function
PhoneDetailCtrl($scope,
$routeParams, $http) {
...
$scope.setImage =
function...
Upcoming SlideShare
Loading in...5
×

Introduction to Angular js

893

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
893
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Introduction to Angular js

  1. 1. Introduction to SPA Angular JS Mustafa M. Gamal mustafa@moveitgate.com
  2. 2. AngularJs: First Glance <!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <script src="lib/angular/angular.js"></script> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> </body> </html> Tell Angular if the entire html page or only a portion of it should be treated as the Angular application. • Templating – a binding, denoted by double-curlies {{ }} • binding will result in efficient continuous updates whenever the result of the expression evaluation changes. <script> angular.element(document).ready(function() { angular.bootstrap(document);}); </script>
  3. 3. App Bootstrap • The injector that will be used for dependency injection within this app is created. • The injector will then create the root scope that will become the context for the model of our application. • Angular will then "compile" the DOM starting at the ngApp root element, processing any directives and bindings found along the way.
  4. 4. MVC <html lang="en" ng-app> <head> .... <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> </html> app/js/controllers.js function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi- Fi", "snippet": "The Next, Next Generation tablet."}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."} ]; }
  5. 5. MVC ViewModel Controller Actions $scope.model $scope.model
  6. 6. MVC
  7. 7. Filters <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> Search: <input ng-model="query"> </div> <div class="span10"> <!--Body content--> <ul class="phones"> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div>
  8. 8. Filters
  9. 9. Order By HTML ... Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> ... <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> Controller function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S.", "age": 0}, {"name": "Motorola XOOM™ with Wi- Fi", "snippet": "The Next, Next Generation tablet.", "age": 1}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet.", "age": 2} ]; $scope.orderProp = 'age'; }
  10. 10. AJAX Request • $http service used to make an HTTP request to web server to fetch data app/phones/phones.json • Understand Json format • returns a promise object with a success method function PhoneListCtrl($scope, $http) { $http .get('phones/phones.json'). success(function(data) { $scope.phones = data; }) .error(function(){ alert("Error loading data"); }); $scope.orderProp = 'age'; }
  11. 11. Promise pattern function asyncGreet(name) { var deferred = $q.defer(); setTimeout(function () { scope.$apply(function () { if (okToGreet(name)) { deferred.resolve('Hello, ' + name + '!'); } else { deferred.reject('Greeting ' + name + ' is not allowed.'); } }); }, 1000); return deferred.promise; } var promise = asyncGreet('Robin Hood'); promise.then(function (greeting) { alert('Success: ' + greeting); }, function (reason) { alert('Failed: ' + reason); });
  12. 12. $http function $http({ method: 'GET', url: '/someUrl' }). success(function (data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function (data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
  13. 13. $http configurations • method – {string} – HTTP method (e.g. 'GET', 'POST', etc) • url – {string} – Absolute or relative URL of the resource that is being requested. • Params: Map of strings or objects => turned to ? key1=value1&key2=value2 after the url. If the value is not a string, it will be JSONified. • data – {string|Object} – Data to be sent as the request message data. • headers – {Object} – Map of strings representing HTTP headers to send to the server. • cache – {boolean|Cache} – If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $ cacheFactory, this cache will be used for caching. • timeout – {number} – timeout in milliseconds.
  14. 14. Dependency Injection - 1 function PhoneListCtrl($scope, $http) { $http.get('phones/phones.jsoqn').success(function(data) { $scope.phones = data; }) .error(function(){ alert("Error loading data"); }); $scope.orderProp = 'age'; } PhoneListCtrl.$inject = ['$scope', '$http'];
  15. 15. Dependency Injection - 2 var PhoneListCtrl = ['$scope', '$http', function ($scope, $http) { $http.get('phones/phones.json').success(function (data) { $scope.phones = data; }) .error(function(){ alert("Error loading data"); }); $scope.orderProp = 'age'; }];
  16. 16. Template <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>
  17. 17. Multiple Views, Routing and Layout Template • A common template for all views in application • Partial template included based on current rout • $routeProvider provides $route service. which wires together controllers, view templates, and the current URL location in the browser. • This will lets us utilize the browser's history
  18. 18. Defining module angular.module('phonecat', []). 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' }); }]); Rout Injected configuration <html ng-app="phonecat">
  19. 19. Controller and Routing function PhoneDetailCtrl($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId; } //url: http://localhost:8080/phones/5 Pattern in previous slide .when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl })
  20. 20. Views and Tmplates Intex.html <html lang="en" ng-app="phonecat"> <head> ... <script src="lib/angular/angular.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body>   <div ng-view></div>   </body> </html> Templates • app/partials/phone- list.html • app/partials/phone- detail.html
  21. 21. Details view <img ng-src="{{phone.images[0]}}" class="phone"> <h1>{{phone.name}}</h1> <p>{{phone.description}}</p> <ul class="phone-thumbs"> <li ng-repeat="img in phone.images"> <img ng-src="{{img}}"> </li> </ul> ... controller function PhoneDetailCtrl($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function (data) { $scope.phone = data; }); }
  22. 22. Module Template Filters Without filters With filter
  23. 23. app/js/app.js angular.module ('phonecat', ['phonecatFilters']). app/js/filters.js angular.module ('phonecatFilters', []).filter('checkmark', function() { return function(input) { return input ? 'u2713' : 'u2718'; }; });
  24. 24. Template - Filters <span>Connectivity</span> <dl> <dt>Network Support</dt> <dd>{{phone.connectivity.cell}}</dd> <dt>WiFi</dt> <dd>{{phone.connectivity.wifi}}</dd> <dt>Bluetooth</dt> <dd>{{phone.connectivity.bluetooth}}</dd> <dt>Infrared</dt> <dd> {{phone.connectivity.infrared | checkmark}} </dd> <dt>GPS</dt> <dd> {{phone.connectivity.gps | checkmark}} </dd> </dl> • Filtere: • {{ expression | filter }}
  25. 25. Views events and Controller actions function PhoneDetailCtrl($scope, $routeParams, $http) { ... $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; } } <img ng- src="{{mainImageUrl}}" class="phone"> ... <ul class="phone-thumbs"> <li ng-repeat="img in phone.images"> <img ng-src="{{img}}" ng-click="setImage(img)"> </li> </ul>
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×