Angular JS Introduction

Introduction to

About me Full-stack dev @dhyegofernando

The beginning

http://web.archive.org/web/20050428014715/http://www.youtube.com/ 2005

SPA Single Page Application

“AngularJS: a kind of HTML extension.”

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 way directives 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 ﬁnd components?

http://ngmodules.org/

http://bower.io/

how to use components?

install the component bower 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 module angular.module('app', ['ngMaterial']);

follow the style guide

https://github.com/johnpapa/angular-styleguide

write tests

http://karma-runner.github.io/

http://angular.github.io/protractor/

use generators

http://yeoman.io/

https://github.com/yeoman/generator-angular

putting it all together

https://github.com/dhyegofernando/shopping-list-app Shopping list app

keep learning

https://docs.angularjs.org/api

with videos

https://www.youtube.com/user/angularjs/

https://egghead.io/

with blogs

http://www.johnpapa.net/

http://briantford.com/

http://toddmotto.com/

with books

AngularJS - Up & Running

https://www.ng-book.com/

with tools

http://ng-inspector.org/

https://github.com/angular/angularjs-batarang

and more...

Angular 2

https://angular.io/

https://angular.io/docs/js/latest/quickstart.html

Questions ?

Now it's up to you

Thank you @dhyegofernando

Angular JS Introduction

Angular JS Introduction

More Decks by Dhyego Fernando

Other Decks in Technology

Featured

Transcript