Intro to AngularJS (JakartaJS Dec 2013)

Hi, my name is Giovanni

I Work for…

I am a Milanisti Ultras

That’s why technologies that I use mostly use a red
logo

Because it’s blue and cr*ppy green I made the logo
small

Thanks!!

we’ll have fun with…

Before we start, I want to ask a question.

Did anyone here use..

Great! Let’s compare later..

Angular JS is a client-side, JS MVC framework for creating
rich, “single page application” A.K.A SPA

Angular JS is backed by..

Philosophy Business logic should be written imperatively User experience should
be written declaratively

Imperative ?

$(“#change-‐me”).html(“I am changed!”) Hey “change-me” you should turn yourself into
“I am changed” <div id=‘change-‐me’> I will not yield! </div> <div id=‘change-‐me’> I am changed! </div>

Declarative ?

$scope.secretData=‘I am the guardian of a secret data’ I
must follow whatever ‘secretData’ variable has in store <div id=‘change-‐me’> {{secretData}} </div> <div id=‘change-‐me’> I am the guardian of a secret data </div>

$scope.secretData=‘JakartaJS will be held at Dec, 17th’ <div id=‘change-‐me’
ng-‐model=‘secretData’> JakartaJS will be held at Dec, 17th </div>

Features Highlight

Bi-directional data binding

LOL at the smiley face :)))))

Directives custom HTML tags

ng-‐app ng-‐controller ng-‐repeat ng-‐model ng-‐class
ng-‐if ng-‐click ng-‐include

Build your own directives !

.directive('activeLink', ['$location', function(location) { return
{ restrict: 'A', link: function(scope, element, attrs) { ! var path = attrs.ngHref; ! //hack because path does not return including hashbang path = path.substring(1); if (path === '') { path = '/'; } ! scope.location = location; scope.$watch('location.path()', function(newPath) { if (path === newPath) { element.parent().addClass('active'); } else { element.parent().removeClass('active'); } }); } }; }]); "only do DOM manipulation in a directive if and only if absolutely necessary” -a wise man

Scopes context where the model is stored

rootScope scope scope scope scope <html> <head></head>
<body ng-‐app=“jakartajs”> <div ng-‐controller=“first”> </div> <div ng-‐controller=“second”> <tree treeData=“data”> <input ng-‐model=“name”> </div> </body> </html>

Dependency Injection

.directive('activeLink', ['$location', function(location) { return
{ restrict: 'A', link: function(scope, element, attrs) { ! var path = attrs.ngHref; ! //hack because path does not return including hashbang path = path.substring(1); if (path === '') { path = '/'; } ! scope.location = location; scope.$watch('location.path()', function(newPath) { if (path === newPath) { element.parent().addClass('active'); } else { element.parent().removeClass('active'); } }); } }; }]);

Other usual suspects..

Support for RESTful resources

User.get({id: 1}) .$then(function(response) { console.log(response)
}, function(error) { console.log(error) }); User.save({id: 1}, {first_name: “Giovanni”}) .$then(function(response) { console.log(response) }, function(error) { console.log(error) }); query, get, new, create, edit, update, delete 7 default action, can be added if necessary

Routing

.config(['$routeProvider', function ($routeProvider) { $routeProvider
.when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .when('/databinding', { templateUrl: 'views/databinding.html', controller: 'DatabindingCtrl' }) .when('/directive', { templateUrl: 'views/directive.html', controller: 'DirectiveCtrl' }) .otherwise({ redirectTo: '/' }); }]);

Testability

Structuring your angular app

npm install -‐g yo grunt-‐cli bower npm install -‐g
generator-‐angular yo angular *assumming you have installed npm

app/ node_modules/ test/ .bowerrc .editorconfig
.gitattributes .gitignore .jshintrc Gruntfile.js bower.json karma-‐e2e.conf.js karma.conf.js package.json

app/ bower_components/ images/ scripts/
configs/ controllers/ directives/ resources/ services/ app.js styles/ views/ 404.html favicon.ico index.html robots.txt

test/ spec/ configs/
controllers/ main.js directives/ resources/ services/ karma-‐e2e.conf.js karma.conf.js

Things to note / What’s next

“AngularJS oﬃcial documentation is poor” But the fault partly lies
with us, the community. -a wise man

“But, community support is overwhelming!” -random cockatoo

Nah.. I’m just kidding..

We must remove the urge to write code imperatively. !
e.g. jQuery usage should be replaced if possible by databinding and directive.

authentication authorization

Any API Server loosely-coupled

1. Authentication should be done remotely to receive ‘token’ !
2. ‘token’ is sent in every request for authenticating our users ! 3. Authorization must be done both in API and your AngularJS app

http://docs.angularjs.org/guide/concepts ! http://jimhoskins.com/2012/12/17/angularjs-and-apply.html ! http://www.sitepoint.com/kickstart-your-angularjs- development-with-yeoman-grunt-and-bower/ ! http://en.wikipedia.org/wiki/AngularJS References

Thanks!! Okay, that’s all lads.. @giosakti - mightygio.com - starqle.com

Question?

Intro to AngularJS (JakartaJS Dec 2013)

Intro to AngularJS (JakartaJS Dec 2013)

More Decks by Giovanni Sakti

Other Decks in Programming

Featured

Transcript