angular js introduction
TRANSCRIPT
Introduction to
About meFull-stack dev
@dhyegofernando
The beginning
http://web.archive.org/web/20050428014715/http://www.youtube.com/
2005
SPASingle Page Application
“AngularJS: a kind of HTML extension.”
D D D
Data-binding Dependency Injection Directives
Data-binding
$('#input-name').on('change', function() { $('#greeting-name').text(this.value);});
#input-name
#greeting-name
model
module bootstrap
template expression
<div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName"> <hr> <h1>Hello {{yourName}}!</h1> </div></div>
Dependency Injection
controller bootstrap
<div ng-app="app" ng-controller="GreetingController"> <form ng-submit="greet()"> <input type="text" ng-model="name"> <button type="submit">Greet</button> </form></div>
module application
dependency injection
...service
3rd's module
service
angular.module('app', ['alerter']) .controller('GreetingController', function($scope, Alerter) { $scope.name = 'John Doe'; $scope.greet = function() { Alerter.show('Hello ' + $scope.name); }; });
angular.module('alerter', []) .factory('Alerter', function($window) { return { show: function(string) { $window.alert(string); } }; });
Directives
Tab Component
Non-semantic way
bootstrap
plugin element<div id="tab"> <ul class="tab-head"> <li><a href="#content-1">Title 1</a></li> <li><a href="#content-2">Title 2</a></li> <li><a href="#content-3">Title 3</a></li> </ul> <div id="content-1" class="tab-content"> <p>Content 1 goes here</p> </div> <div id="content-2" class="tab-content"> <p>Content 2 goes here</p> </div> <div id="content-3" class="tab-content"> <p>Content 3 goes here</p> </div></div>
$('#tab').tab();
Semantic waydirectives bootstrap
...
tab components
<tabset> <tab heading="Title 1"> <p>Content 1 goes here</p> </tab> <tab heading="Title 2"> <p>Content 2 goes here</p> </tab> <tab heading="Title 3"> <p>Content 3 goes here</p> </tab></tabset>
angular.module('tab') .directive('tabset', function() { // ... }) .directive('tab', function() { // ... });
Hello {{ world }}
load angular script
bootstrap application
set model
template
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>Hello World</title></head><body> <input type="text" ng-model="name"> <h1>Hello {{ name }}</h1> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script></body></html>
Some golden tips
Don't reinvent the wheel
...use 3rd's components✓ nice documentation
✓ great tests suit
✓ maintained
✓ best practices
where to find components?
how to use components?
install the componentbower install --save angular-material
load the component scripts<link rel="stylesheet" href="angular-material.min.css" rel="stylesheet"><script src="angular-material.min.js"></script>
load the component moduleangular.module('app', ['ngMaterial']);
follow the style guide
write tests
use generators
putting it all together
https://github.com/dhyegofernando/shopping-list-app
Shopping list app
keep learning
with videos
with blogs
with books
AngularJS - Up & Running
with tools
and more...
Angular 2
Questions?
Now it's up to you
Thank you
@dhyegofernando