workshop 12: angularjs parte i
TRANSCRIPT
![Page 1: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/1.jpg)
AngularJS - Part I
Cristina HernándezRoger Vilà
![Page 2: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/2.jpg)
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
![Page 3: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/3.jpg)
“Angularjs is what HTML would have been if it had been designed for building web applications”
https://angularjs.org/
![Page 4: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/4.jpg)
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
![Page 5: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/5.jpg)
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
![Page 6: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/6.jpg)
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
![Page 7: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/7.jpg)
MVVM - Model View View Model
![Page 8: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/8.jpg)
Model
Entire model contained in a single javascript data structure.
var obj = { employeeName: "Mattias", company: "Net Insight AB" }
![Page 9: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/9.jpg)
Controller
Javascript code that populates the view and reacts to changes in it.
function myCtrl( $scope ) { $scope = { employeeName: "Mattias", company: "Net Insight AB" };
$scope.save_info = function() { console.log( $scope.employeeName ); };}
![Page 10: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/10.jpg)
View
"Extended" html. Dynamic and syncronized
<div ng-controller = myCtrl><h2>{{company}}</h2>Employee name:<input ng-model="employeeName"></input><button ng-click="save_info()"
>Submit</button></div>
![Page 11: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/11.jpg)
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>
![Page 12: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/12.jpg)
Client-Side templatescontrollers.js:
function HelloController($scope) {$scope.greeting = { text: 'Hello' };
}
hello.tml:
<html ng-app><head>
<script src="angular.js"></script><script src="controllers.js"></script>
</head><body>
<div ng-controller='HelloController'><p>{{greeting.text}}, World</p>
</div></body>
</html>
Result:
Hello, World
![Page 13: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/13.jpg)
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" />
![Page 14: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/14.jpg)
Two-Way Data Bindinghello.html
<html ng-app><head>
<script src="angular.js"></script><script src="controllers.js"></script>
</head><body>
<div ng-controller='HelloController'><input ng-model='greeting.text'><p>{{greeting.text}}, World</p>
</div></body>
</html>
controllers.js:
function HelloController($scope) {$scope.greeting = { text: 'Hello' };
}
Hello
Hello, World https://docs.angularjs.org/guide/databinding
![Page 15: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/15.jpg)
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
![Page 16: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/16.jpg)
DirectivesDirectives 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/
![Page 17: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/17.jpg)
ng-modelWith 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>
![Page 18: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/18.jpg)
ng-repeat<h3>FIFA Golden Ball:</h3><div ng-app ng-controller="MyCtrl"> <ul> <li ng-repeat="player in players">{{name}}: {{num}}</li> </ul></div>
function MyCtrl($scope) { $scope.players = [
{ name: “Roger”
num: 6},{
name: “Messi”num: 5
},{
name: “Cristiano Ronaldo”num: 3
}];
}
![Page 19: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/19.jpg)
ng-show / ng-hideThe 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>
![Page 20: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/20.jpg)
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$” }}
![Page 21: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/21.jpg)
Built-in Filters
● filter● currency● number● date● json● lowercase● uppercase● limitTo● orderBy
https://docs.angularjs.org/api/ng/filter
![Page 22: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/22.jpg)
Filters
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'}]"></div>
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText |
orderBy:'name'">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
![Page 23: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/23.jpg)
Filters in Javascript
$filter(‘number’)(15,5) {{ 15 | number:5 }}
![Page 24: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/24.jpg)
Modules
- Where we write pieces of our Angular application.- Makes our code more maintainable, testable and
readable.- Where we define dependencies for our app
![Page 25: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/25.jpg)
Modules
var app = angular.module(‘moduleName’, [] );
Dependencies
Creating:
Including the module:
<html ng-app=”moduleName”> ....
</html>
<html><div ng-app=”moduleName”>
…</div>...
</html>
![Page 26: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/26.jpg)
Modulesvar app = angular.module(‘moduleName’, [] ).config(function () { ... }).run(function () { ... });
app.controller(function(){…});
app.service(function(){…});
app.directive(function(){…});
![Page 27: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/27.jpg)
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>
![Page 28: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/28.jpg)
$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”;}
![Page 29: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/29.jpg)
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.
![Page 30: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/30.jpg)
Built-in Services
● $http● $q● $window● $location● ...
![Page 31: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/31.jpg)
Built-in Services - $httpvar 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
});
![Page 32: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/32.jpg)
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>
![Page 33: Workshop 12: AngularJS Parte I](https://reader031.vdocuments.site/reader031/viewer/2022021500/587a16921a28abb4238b546d/html5/thumbnails/33.jpg)
Debugging
Batarang → Google Chrome Extension