SlideShare a Scribd company logo
1 of 43
Download to read offline
ANGULARJS
INTRODUCTIONby @DanielPerez ClaudeTech
LEAVES
STATIC WEBSITE BUILD TOOL
Dependsonly onNodeJS.
Uses:
Yeoman
Grunt
Bower
Jade(or EJS)
Stylus(or lessor plainCSS)
Coffee(or plainJS)
Installwith:
$npminstall-gleaves
$leavessetup
Checkout for moreinfo.thedocs
PROJECT CREATION
$leavesnewangular-blog
$cdangular-blog
$leavesinstalljqueryangularangular-resourcebootstrapangular-ui-routermarkdown
Renameassets/js/app.coffeetoassets/js/app.js,
eraseassets/css/main.stylcontent andedit views/layout.jade.
//views/layout.jade
html
head
....
link(rel="stylesheet"href="components/bootstrap/dist/css/bootstrap.min.css")
link(rel="stylesheet"href="components/bootstrap/dist/css/bootstrap-theme.min.css")
script(src="components/jquery/dist/jquery.min.js")
script(src="components/angular/angular.min.js")
script(src="components/angular-resource/angular-resource.min.js")
script(src="components/angular-ui-router/release/angular-ui-router.min.js")
script(src="components/bootstrap/dist/js/bootstrap.min.js")
script(src="js/app.js")
body
blockcontent
START HACKING
Whenyouaredonewithbasic setup,run
$leaves
andstart hacking.
FOR SCEPTICAL PEOPLE
If youdonot want touseleaves,check about basic Angular setup.my blog post
TRY ANGULARJS
Initializeapplication
//views/layout.jade
html
head
...
body(ng-app="")
blockcontent
Try two-way databinding:
Output variablevaluewith: {{variable}}.
Changevariablevaluewith: ng-model="variable"
//views/index.jade
extends./layout.jade
blockcontent
input(ng-model="variable")
span{{variable}}
TRY ANGULARJS
Initializevariable:
//views/index.jade
extends./layout.jade
blockcontent
div(ng-init="variable='plaintext'")
span{{variable}}
Youcanuseany element,not just divandspan.
TRY ANGULARJS
Usecontroller toinitializevariable.
//views/index.jade
div(ng-controller="TestCtrl")
span{{variable}}
Definecontroller inJS file.
$scopeisinjectedby Angular oninstanciation.
//assets/js/app.js
functionTestCtrl($scope){
$scope.variable="myvariabletext";
}
Angular uses toinstanciatecontrollers,services,etc.DI
TRY ANGULARJS
React toevents:
//views/index.jade
div(ng-controller="TestCtrl")
span{{variable}}
button(ng-click="action()")
//assets/js/app.js
functionTestCtrl($scope){
$scope.variable="myvariabletext";
$scope.action=function(){
$scope.variable="Ijustclicked!";
};
}
CREATE BLOG
Createblog withfollowing functionalities:
List posts
List postsby category
Showpost
Createnewpost
WewillusepreparedAPI toworkwith.
Authentication/authorizationwillbefor next time.
Sampleisavailableat .angular-blog-sample.herokuapp.com
Fullsourcecodeisavailableat
.
github.com/claudetech-meetups/angular-blog-
sample
AVAILABLE API
TheavailableAPI callsare
GET /posts
GET /posts/:id
POST /posts
GET /categories
POST /categories
API isavailableat: http://angular-tutorial-api.herokuapp.com/
CREATE BASIC LAYOUT
Addheader toviews/layout.jade
html
head
....
body(ng-app="")
.container
nav.navbar.navbar-default
.container-fluid
.navbar-header
a.navbar-brand(href="#")Blog
.row
.col-xs-8
blockcontent
.col-xs-4
.block.categories
h3Categories
ul.list-unstyled
li:a.small(href="#")Plentyofcategories
.block.admin
h3Admin
ul.list-unstyled
li:a.small(href="#")Addpost
CREATE BASIC LAYOUT
Createempty views/posts/index.jadeandedit views/index.jade.
//views/index.jade
extends./layout.jade
blockcontent
include./posts/index
BUILD POST LIST
Createcontroller inJS file:
functionPostIndexCtrl($scope){
$scope.post={
id:1,
title:"Posttitle",
content:"Postcontent",
createdAt:newDate()
};
}
Wrappost list inacontroller andusedummy data
.posts(ng-controller="PostIndexCtrl")
.post.row
.row
.col-xs-12
h2{{post.title}}
small.date{{post.createdAt}}
.row.content
.col-xs-12{{post.content}}
.row
.col-xs-12
a.small(href="#")Seemore
andcreatethecontroller.
SOME ISSUES
{{variable}}appearsonpageload
Dateformat isstrange
Nolinebreakincontent
Content may bevery long
SOME SOLUTIONS
Useng-bindinsteadof {{}}
Usedatefilter
Wewillseehowtorender markdownincontent later on
UselimitTofilter
.posts(ng-controller="PostIndexCtrl")
.post.row
.row
.col-xs-12
h2(ng-bind="post.title")
small.date(ng-bind="post.createAt|date:'y/M/d'")
.row.content
.col-xs-12(ng-bind="post.content|limitTo:100")
.row
.col-xs-12
a.small(href="#")Seemore
MAKE IT A LIST
Adddummy datainthecontroller.
functionPostIndexCtrl($scope){
$scope.posts=[{
id:1,
title:"Posttitle",
content:"Postcontent",
createdAt:newDate()
},{
id:2,
title:"Posttitle2",
content:"Postcontent2",
createdAt:newDate()
}];
}
Useng-repeat
.posts(ng-controller="PostIndexCtrl")
.post.row(ng-repeat="postinposts")
...
SHOW SINGLE POST
Createviews/posts_show.jade,wewillextendlayout.jadefor now.
extends./layout.jade
blockcontent
.post.row(ng-controller="PostShowCtrl")
.row
.col-xs-12
h2{{post.title}}
small.date{{post.createdAt|date:'y/M/d'}}
.row.content
.col-xs-12{{post.content}}
createPostShowCtrlfunction.
//assets/js/app.js
....
functionPostShowCtrl($scope){
$scope.post={
id:1,
title:"Posttitle",
content:"Postcontent",
createdAt:newDate()
};
}
Youcantry toaccessyour page: localhost:9000/posts_show.html
SOME ISSUES
Better modularizecontrollers
Wedon't want another page
Wewant content inmarkdown
MODULARIZATION
Let'sstart by splitting files.
//assets/js/controllers/posts/index.js
functionPostIndexCtrl($scope){
.....
}
//assets/js/controllers/posts/show.js
functionPostShowCtrl($scope){
.....
}
//views/layout.jade
html
head
....
script(src="js/app.js")
script(src="js/controllers/posts/index.js")
script(src="js/controllers/posts/show.js")
body(ng-app="")
...
ANGULAR MODULES
Angular hasnativemodules.DeclareBlogAppmodulewithnodepencies.
//assets/js/app.js
angular.module('BlogApp',[]);
Declarecontrollersaspart of themodule.
//assets/js/controllers/posts/index.js
angular.module('BlogApp').controller('PostIndexCtrl',[
'$scope',function($scope){
...
}
]);
Samegoesfor PostShowCtrl.
ROUTING
Routeinorder tobeabletohave
/#/->allposts
/#/posts/:id->post withid=:id
/#/posts/new->newpost
First,add depency tothemodule.ui.router
//assets/js/app.js
angular.module('BlogApp',[
'ui.router'
]);
SETUP VIEW
First,addtheviewwheretodisplay thecontent of theroute.
//views/index.jade
extends./layout.jade
blockcontent
div(ui-view)
SETUP ROUTER
Configuretoredirect to/whennoroutefound,andconfiguretheroutes.
//assets/js/app.js
...
angular.module('BlogApp').config([
'$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
url:'/',
templateUrl:'posts/index.html'
})
.state('show',{
url:'/posts/:id',
templateUrl:'posts/show.html'
});
}
]);
Then,removetheextendsandblockcontentfrom
views/posts_show.jade: wedon't needthewholelayout.For consistency,
moveviews/post_show.jadetoviews/posts/show.jade.
Youcannowaccessyour route: localhost:9000/#/posts/1
SETUP ROUTER
Controllersshouldbedefinedinroutes.
//assets/js/app.js
.state('index',{
url:'/',
templateUrl:'posts/index.html',
controller:'PostIndexCtrl'
})
.state('show',{
url:'/posts/:id',
templateUrl:'posts/show.html',
controller:'PostShowCtrl'
});
andremovedfromviews/posts/index.jadeand
views/posts/show.jade.
//views/posts/show.jade
.post.row//nong-controlleranymore
...
ADD LINKS
usesui-sreftomakelinkinsteadof normalhrefor ng-href
attributes.
ui-router
//views/posts/index.jade
...
a.small(ui-sref="show({id:post.id})")Seemore
USE API
AddngResourcemoduleasadependency.
//assets/js/app.js
angular.module('BlogApp',[
'ui.router',
'ngResource'
]);
...
Try it
//assets/js/controllers/posts/index.js
angular.module('BlogApp').controller('PostIndexCtrl',[
'$scope','$resource',function($scope,$resource){
//noneedfordummydataanymore
varPost=$resource('http://angular-tutorial-api.herokuapp.com/posts/:id');
Post.query(function(posts){
console.log(posts[0]);
$scope.posts=posts;
});
}
]);
RESOURCE FACTORY
Wewant tobeabletousePostresourceanywhere.
Let'smakeit afactory.
//assets/js/resources/post.js
angular.module('BlogApp').factory('Post',[
'$resource',function($resource){
return$resource('http://angular-tutorial-api.herokuapp.com/posts/:id');
}
]);
andincludeit inviews/layout.jade
html
head
...
script(src="js/resources/post.js")
USE RESOURCE FACTORY
//assets/js/controllers/index.js
angular.module('BlogApp').controller('PostIndexCtrl',[
'$scope','Post',function($scope,Post){
Post.query(function(posts){
$scope.posts=posts;
});
}
]);
FETCH SINGLE POST
Use$stateParamstoget id,andget post fromserver.
//assets/js/controllers/posts/show.js
angular.module('BlogApp').controller('PostShowCtrl',[
'$scope','$stateParams','Post',function($scope,$stateParams,Post){
Post.get({id:$stateParams.id},function(post){
$scope.post=post;
});
}
]);
CREATE CATEGORY FACTORY
//assets/js/resources/category.js
angular.module('BlogApp').factory('Category',[
'$resource',function($resource){
return$resource('http://angular-tutorial-api.herokuapp.com/categories/:id');
}
]);
andaddit tolayout.jade
NEW POST CONTROLLER
CreatenewJS file,andafreshpost tobind.
//assets/js/controllers/posts/new.js
angular.module('BlogApp').controller('PostNewCtrl',[
'$scope','Post',function($scope,Post){
$scope.post=newPost();
}
]);
andincludeit inviews/layout.jade
script(src="js/controllers/posts/new.js")
CREATE NEW POST TEMPLATE
Bindthemodelcreatedinthecontroller.
//views/posts/new.jade
h2Createnewpost
form
.form-group
label(for="title")Title
input#title.form-control(type="text"placeholder="Title"ng-model="post.title")
.form-group
label(for="content")Content
textarea#content.form-control(rows="10"ng-model="post.content")
.form-group
select.form-control(ng-model="post.category_id")
input.btn.btn-default(type="submit"value="Create")
ADD A NEW ROUTE
Careful,order matters!
$stateProvider
.state('index',{
.....
})
.state('new',{
url:'/posts/new',
templateUrl:'posts/new.html',
controller:'PostNewCtrl'
})
.state('show',{
.....
});
Andset link
//views/layout.jade
...
.block.admin
h3Admin
ul.list-unstyled
li:a.small(ui-sref="new")Addpost
RESOLVE CATEGORIES
Better havecategoriesbeforeloading template.Usecustommadepromiseand
resolveAPI result.
//assets/js/app.js
...
.state('new',{
url:'/posts/new',
templateUrl:'posts/new.html',
controller:'PostNewCtrl',
resolve:{
categories:['$q','Category',function($q,Category){
vardeferred=$q.defer();
Category.query(function(categories){
deferred.resolve(categories);
});
returndeferred.promise;
}]
}
})
.state('show',{
....
RESOLVE CATEGORIES
Usethecategoriesresolvedinthecontroller.
//assets/js/controllers/posts/new.js
angular.module('BlogApp').controller('PostNewCtrl',[
'$scope','Post','categories',function($scope,Post,categories){
$scope.post=newPost();
$scope.categories=categories;
}
]);
USE NG-OPTIONS
Dynamically showcategoriesinselectusing ng-options.
form
...
select.form-control(
ng-model="post.category_id"
ng-options="c.idasc.nameforcincategories"
)
CREATE POST
React tosubmit event
//views/posts/new.jade
form(ng-submit="createPost()")
Addhandler for submit event.
//js/controllers/posts/new.js
angular.module('BlogApp').controller('PostNewCtrl',[
'$scope','Post','$state','categories',function($scope,Post,$state,categories){
...
$scope.createPost=function(){
$scope.post.$save(function(post){
$state.go('index',{id:post.id});
});
};
...
FORMAT MARKDOWN
Wearegoing tocreateafilter toformat markdown.
//assets/js/filters/markdown.js
angular.module('BlogApp').filter('markdown',[
'$sce',function($sce){
returnfunction(input){
if(!input){
return'';
}
return$sce.trustAsHtml(markdown.toHTML(input));
};
}
]);
inputisthevaluetoconvert tomarkdown.Wereturnempty string if
undefined.
ThemarkdownisformattedinHTML,weneedtotrust theinput totellAngular
it issafe.
DISPLAY FORMATTED
MARKDOWN
Weuseng-bind-htmltodisplay HTML andnot escapedvalues.
//views/posts/show.jade
.post.row
....
.row.content
.col-xs-12(ng-bind-html="post.content|markdown")
CREATE CATEGORIES
CONTROLLER
Asfor posts,query toget allthecategories.
//assets/js/controllers/categories/index.js
angular.module('BlogApp').controller('CategoryIndexCtrl',[
'$scope','Category',function($scope,Category){
Category.query(function(categories){
$scope.categories=categories;
});
}
]);
SHOW CATEGORIES
Createpartial
//views/categories/index.jade
.block.categories(ng-controller="CategoryIndexCtrl")
h3Categories
ul.list-unstyled
li(ng-repeat="categoryincategories")
a.small(ui-sref="index({category:category.id})"ng-bind="category.name")
Changelayout tousepartial.
//views/layout.jade
....
.col-xs-4
include./categories/index
.block.admin
h3Admin
ul.list-unstyled
li:a.small(ui-sref="new")Addpost
UPDATE ROUTES
Updateindex routestotakecategoryquery parameter.
//assets/js/app.js
...
$stateProvider
.state('index',{
url:'/?category',
templateUrl:'posts/index.html',
controller:'PostIndexCtrl'
})
Thisisneededtopasscategorytoui-srefandtoreadit from
$stateParams.
FILTER QUERY
Checkif thereisacategory definedandadapt query.
//assets/js/controllers/posts/index.js
angular.module('BlogApp').controller('PostIndexCtrl',[
'$scope','$stateParams','Post',function($scope,$stateParams,Post){
varsearch=$stateParams.category?{category_id:$stateParams.category}:{};
Post.query(search,function(posts){
$scope.posts=posts;
});
}
]);

More Related Content

What's hot

Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJSWei Ru
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS InternalEyal Vardi
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법Jeado Ko
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Intro to Angular.JS Directives
Intro to Angular.JS DirectivesIntro to Angular.JS Directives
Intro to Angular.JS DirectivesChristian Lilley
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.tothepointIT
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJSFITC
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0Takuya Tejima
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceParashuram N
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverSpike Brehm
 

What's hot (20)

Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Intro to Angular.JS Directives
Intro to Angular.JS DirectivesIntro to Angular.JS Directives
Intro to Angular.JS Directives
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
AngularJs
AngularJsAngularJs
AngularJs
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
Introducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and serverIntroducing Rendr: Run your Backbone.js apps on the client and server
Introducing Rendr: Run your Backbone.js apps on the client and server
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 

Similar to Angular JS blog tutorial

Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019Makoto Mori
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Joao Lucas Santana
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)jeresig
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it allCriciúma Dev
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSGunnar Hillert
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSNicolas PENNEC
 
Using RequireJS with CakePHP
Using RequireJS with CakePHPUsing RequireJS with CakePHP
Using RequireJS with CakePHPStephen Young
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebJames Rakich
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 

Similar to Angular JS blog tutorial (20)

Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
Webpack packing it all
Webpack packing it allWebpack packing it all
Webpack packing it all
 
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJS
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Using RequireJS with CakePHP
Using RequireJS with CakePHPUsing RequireJS with CakePHP
Using RequireJS with CakePHP
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Biwug
BiwugBiwug
Biwug
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 

Recently uploaded

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Recently uploaded (20)

Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

Angular JS blog tutorial