Introduction to AngularJS

Nov 28, 20123 likes2,684 views

AngularJS provides tools to build dynamic web applications using declarative templates and two-way data binding between the application logic and UI. It allows code to be simple, recognizable and look like the original HTML while synchronizing data changes automatically. Key features include reusable components, routing, testing and other tools to build powerful web apps. While the implementation is available now using JavaScript, future browsers may support these features natively.

AngularJS
HTML ENHANCED FOR WEB APPS
- Patrick Aljord / @patcito

What Is AngularJS Trying To Fix?
HTML is great for declarative code for static web page
<>el wrd<p
pHlo ol!/>

Not so for dynamic pages:
< i=getn1>/>
p d"reig"<p
<cit
srp>
vriI =dcmn.tahvn;
a sE ouetatcEet
vraditnr=iI
a dLsee sE
?fnto(,t f){
ucine , n
eatcEet'n +t f)}
.tahvn(o' , n;
:fnto(,t f){
ucine , n
eadvnLsee(,f,fle;;
.dEetitnrt n as)}
aditnrdcmn,'od,fnto({
dLsee(ouet la' ucin)
vrgetn =dcmn.eEeetyd'reig';
a reig ouetgtlmnBI(getn1)
i (sE {
f iI)
getn.neTx ='el Wrd'
reiginret Hlo ol!;
}es {
le
getn.etotn ='el Wrd'
reigtxCnet Hlo ol!;
}
};
)
<srp>
/cit

But...

= Imperative :-(

Declarative FTW!
1. <>el wrd/>
pHlo ol<p

2. <>{reig}/>
p{Getn}<p

Data Binding
1. Define a model
2. Binds it to a template
3. When you modify the model, templates updates automotically
4. When the user intereacts with the UI, templates knows how
to sync the data with the model.

Concrete Example: JQuery Vs AngularJS
<cittp=tx/aacit>
srp ye"etjvsrp"
$fnto ( {
(ucin )
vrnm =$'nm'.a(;
a ae (#ae)vl)
vrgetn =$'getn';
a reig (#reig)

nm.eu(ucin( {
aekypfnto )
getn.et'el ' nm +'';
reigtx(Hlo + ae !)
})
})
<srp>
/cit
<i>
dv
<ae>ae<lbl
lblNm:/ae>
<nu tp=tx"i=nm"
ipt ye"et d"ae>
< i=getn"<p
p d"reig>/>
<dv
/i>

Name: Enter a name here

HELLO

Concrete Example: JQuery Vs AngularJS
<i n-p>
dv gap
<ae>ae<lbl
lblNm:/ae>
<nu tp=tx"n-oe=yuNm"
ipt ye"et gmdl"orae>
<>el {yuNm}!/>
pHlo {orae}<p
<dv
/i>

Name: Enter a name here

HELLO !

SO DATA BINDING ALLOWS CODE THAT IS
1. very simple
2. very recognizable
3. looks like the original HTML hello world
Thanks To...
1. Dirty checking
2. Only checks the current view
3. Only check when change may happen
4. Leverage the JIT
5. But... the DOM is slow

DATA BINDING COMING TO A BROWSER NEAR
YOU
Implementation When?
AngularJS Javascript Now
Model Driven Views Native Future
Object.observe Native Future
There's already an AngularJS branch using Object.observe !

↤ Beatiful widgets: Cool
Tricking the browser: Not Cool ↧↧
<lcas"a nvtb"i=mTb>
u ls=nv a-as d"ya"
<icas"cie>ahe=#eto1>eto 1/>/i
l ls=atv"< rf"scin"Scin <a<l>
<i< he=#rfl"Scin2/>/i
l>a rf"poie>eto <a<l>
<u>
/l

<i cas"a-otn"
dv ls=tbcnet>
<i cas"a-aeatv"i=scin"H,ImScin1/i
dv ls=tbpn cie d"eto1>i ' eto <d
v>
<i cas"a-ae i=scin"H,ImScin2/i>
dv ls=tbpn" d"eto2>i ' eto <dv
<dv
/i>

<cit
srp>
$fnto ( {
(ucin )
$'mTbals'.a(so';
(#ya :at)tb'hw)
})
<srp>
/cit

Declarative reusable components:
Cool ↧↧
<as
tb>
<aette"eto 1>
pn il=Scin "
H,ImScin1
i ' eto
<pn>
/ae
<aette"eto 2>
pn il=Scin "
H,ImScin2
i ' eto
<pn>
/ae
<tb>
/as

REUSABLE COMPONENTS COMING TO A
BROWSER NEAR YOU
Implementation When?
AngularJS DOM+JS Now
(directives)
Web Native Near Future
Components

Mozilla shim for web components: x-tags.org
W3C specs:
http://www.w3.org/TR/2012/WD-components-intro-
20120522/#custom-element-section

THE WHOLE PACKAGE
TO BUILD KICK ASS WEB APPS!
✓ Data binding
✓ Templating
✓ Routing and deep linking
✓ Testing
✓ Form validation
✓ Dependency injection
✓ MVW (Model/View/Whatever!)

angularjs scaffold
Checkout angularjs_scaffold if you're into Rails.
https://github.com/patcito/angularjs_scaffold

Thanks!
Patrick Aljord @patcito
http://blog.ricodigo.com
http://twitter.com/patcito
+Patrick Aljord

Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar.

This document discusses the benefits of using Redux-Observable over Redux-Thunk for handling asynchronous logic in Redux applications. It begins by showing an example of how a search functionality would be implemented using Redux-Thunk, which requires additional logic for canceling requests. It then demonstrates how the same search functionality can be implemented more concisely and readably using Redux-Observable through the use of Epics. Overall, the document argues that Redux-Observable provides a simpler and more efficient way to solve common asynchronous problems compared to Redux-Thunk.

Aspdevice - Asp Fast Crud introdutionAdriano Mendes

This document describes how to connect to a PostgreSQL database from ASP code and perform basic CRUD operations. It includes code snippets for: 1. Creating an ADO connection object and defining the connection string to connect to a PostgreSQL database on localhost. 2. Including the connection code on other pages and using it to populate a dropdown from a database table. 3. Examples of using the connection to run INSERT and UPDATE SQL statements to add and modify data in database tables.

KCDC 2018 - Rapid API Development with SailsJustin James

Creating a RESTful API should be the easiest part of your development. You should not have to be a rocket scientist to successfully create a RESTful API. With Sails, you can create a full featured RESTful API in just a few minutes without writing any code. You get create, destroy, update, find, paginate, sort, and filtering out of the box. If you need to add your business logic to any of the methods or create your own methods, you can do that by writing simple JavaScript functions. Once you are ready to implement security, Sails provides policies that can be applied to any REST action to implement email/password, social login or Windows authentication. For data storage, Sails bundles the power ORM, Waterline, which provides a simple data access layer that just works, no matter which one of the more than 30 data storage providers you are using. This talk will be code heavy as we walk through getting started with Sails and demonstrate how to implement the features of Sails through the creation of an API. As well, I will share the tips and tricks that I have learned using Sails at a Fortune 100 company. You will walk away understanding how and why you should use Sails on your next project. All code covered in the talk with be immediately available for download.

1991 clasificatoriaGisselle Venturelli

The document discusses a study on the effects of temperature on plant growth. It contains the following key points: 1. The study examined how temperature affects the growth rates of different plant species. Seedlings were grown at various temperatures and their growth was measured. 2. The results showed that growth rates varied between species and were dependent on temperature. Most plants grew faster at warmer temperatures up to a certain point. 3. Above a certain temperature threshold, extremely high or low temperatures inhibited growth. The optimal temperature range differed for each plant species studied.

J Query - Your First StepsBronson Quick

The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...Ben Teese

Web development is experiencing a major change at the moment. Users are demanding increasingly responsive and interactive web applications. The mobile web has taken off. And closed platforms like Flash are yielding to open standards like HTML 5. In this presentation I’ll argue that the language that will underpin this revolution is JavaScript – despite it’s poor reputation. Furthermore, I’ll explain how JavaScript’s resurrection is being driven by a slew of new open-source technologies. For video of this presentation, see http://www.youtube.com/watch?v=SiCD3Nbf810

Algoritma 5 november wiwik p.lWiwik Puji Lestarii

Universal JavaScript名辰洪

Ellzey 5611 module 3cellzey

Google Docs offers several useful features for education: - Google Docs allows sharing documents through Google Docs, which is convenient when not around a computer. - Surveys can be used in Google Docs to gauge student learning or get feedback on a class without meeting face-to-face. - Graphs from spreadsheets are a simple way to make pie charts, bar graphs, and line graphs for comparing student grades or other data.

Go Mobile with Apache Cordova, Zagreb 2014Christian Grobmeier

The document discusses building mobile apps using PhoneGap or Apache Cordova. It describes how to create apps that can be deployed across multiple platforms like Android, iOS, BlackBerry and others. It covers using HTML, CSS and JavaScript to build the app interface and PhoneGap plugins to access device capabilities like the camera, geolocation and contacts. It also provides examples of integrating plugins and deploying the built app.

fabfile.pyCorey Oordt

The document defines functions for managing websites and servers using Fabric. It includes functions for provisioning environments, checking server requirements, installing packages, managing sites through tasks like cleaning, getting info, listing contents, pushing changes, enabling/disabling sites in Apache, and restarting/reloading Apache. Role definitions separate servers into groups like web, media, staging, testing, and database.

Web APIs you (probably) didn't know existedZeno Rocha

Video: https://www.youtube.com/watch?v=NCGLPp778JY You’ve probably heard about the amazing things that HTML5 can do. Maybe you already saved some data using Local Storage, fetched user coordinates using Geolocation, or even drew graphs and other objects using Canvas. But did you know there are many more new JavaScript APIs in the Web Platform? In this talk, we’ll see how to leverage the power of those APIs in order to create better experiences for your users.

Postman On SteroidsSara Tornincasa

Postman is a tool for designing, sharing and testing APIs between a group of collaborators that range from the API developers down to the final clients, be them mobile apps or web apps. This presentation focuses on using Postman's advanced free features, with a special focus on testing. I have linked an example collection which I refer to several times during the presentation. Section 1 - Fundamentals Environments, variables, collections, and workspaces Roles, VCS Section 2 - Scripts & Testing Pre request scripts and tests Scopes Pass data between requests Section 3 - Integrated testing Collection runners: read data from files, workflows Monitors CD/CI integration with Newman Section 4 - More! Documentation Mock server Integrations

World of LoggingChristian Grobmeier

One page app with AngularJSAdam Štipák

This one page document discusses AngularJS and provides high-level summaries of its key features in 3 sentences or less: AngularJS is a JavaScript framework that uses two-way data binding, modules, templates, dependency injection and routing to build single page applications. It loads templates asynchronously and uses scopes to enable two-way data binding between controllers and views. Directives are central to AngularJS and allow extending HTML attributes and elements to create custom components.

Asynchronous Programming FTW! 2 (with AnyEvent)xSawyer

Wso2 esb-rest-integrationChanaka Fernando

제5회인터넷리더십프로그램_왕초보를 위한 트위터 완벽 활용_정진호daumfoundation

10 Catalyst TipsJay Shirley

Any event introqiang

This document provides an overview and examples of using the AnyEvent module in Perl. AnyEvent allows asynchronous and non-blocking I/O, and provides wrappers for various event loops including EV, libevent, POE and Glib. It summarizes: 1) How to create timers, I/O watchers, and condition variables to monitor events asynchronously. 2) Examples of using timers to trigger callbacks periodically, I/O watchers to monitor file handles for read availability, and condition variables to wait for events. 3) Potential bugs when using AnyEvent related to sockets, timeouts and differences between event loops, and solutions to address these bugs.

Documentviwviw

Make WordPress realtime.Josh Hillier

Zen: Building Maintainable Catalyst ApplicationsJay Shirley

レッツゴーデベロッパー2011「プログラミングGroovy〜G*エコシステム編」Yasuharu Nakano

The document compares the performance of running Groovy scripts directly versus using the GroovyServ server. It runs a simple "Hello World" script three ways: directly with Groovy, with GroovyClient, and with GroovyServer. GroovyServer has the best performance at 0.029 seconds while direct Groovy is the slowest at 1.806 seconds. It also shows how to start the GroovyServer and an example of finding even numbers in a list that results in an assertion failure.

Islam HouseHaris Padinharethil

jQueryAndrew Homeyer

You promise?IT Weekend

This document discusses the problems with asynchronous JavaScript and callbacks, and introduces promises as a better abstraction. It explains that promises represent asynchronous values, and allow asynchronous code to be written in a more synchronous and readable way using chained .then() calls. It provides examples of how common asynchronous patterns like error handling, parallel operations, and transforming return values can be implemented cleanly with promises. Finally, it discusses popular promise libraries and the upcoming native ES6 Promise implementation.

Presentation sanlab workshopsArtur Roszczyk

JWEF Singapore - Building a company for fun, by Keith Ng, GametizeKeith Ng (@keizng)

More Related Content

What's hot (20)

Universal JavaScript名辰洪

Ellzey 5611 module 3cellzey

Go Mobile with Apache Cordova, Zagreb 2014Christian Grobmeier

fabfile.pyCorey Oordt

Web APIs you (probably) didn't know existedZeno Rocha

Postman On SteroidsSara Tornincasa

World of LoggingChristian Grobmeier

One page app with AngularJSAdam Štipák

Asynchronous Programming FTW! 2 (with AnyEvent)xSawyer

Wso2 esb-rest-integrationChanaka Fernando

제5회인터넷리더십프로그램_왕초보를 위한 트위터 완벽 활용_정진호daumfoundation

10 Catalyst TipsJay Shirley

Any event introqiang

Documentviwviw

Make WordPress realtime.Josh Hillier

Zen: Building Maintainable Catalyst ApplicationsJay Shirley

レッツゴーデベロッパー2011「プログラミングGroovy〜G*エコシステム編」Yasuharu Nakano

Islam HouseHaris Padinharethil

jQueryAndrew Homeyer

You promise?IT Weekend

Universal JavaScript名辰洪

Ellzey 5611 module 3cellzey

Go Mobile with Apache Cordova, Zagreb 2014Christian Grobmeier

fabfile.pyCorey Oordt

Web APIs you (probably) didn't know existedZeno Rocha

Postman On SteroidsSara Tornincasa

World of LoggingChristian Grobmeier

One page app with AngularJSAdam Štipák

Asynchronous Programming FTW! 2 (with AnyEvent)xSawyer

Wso2 esb-rest-integrationChanaka Fernando

제5회인터넷리더십프로그램_왕초보를 위한 트위터 완벽 활용_정진호daumfoundation

10 Catalyst TipsJay Shirley

Any event introqiang

Documentviwviw

Make WordPress realtime.Josh Hillier

Zen: Building Maintainable Catalyst ApplicationsJay Shirley

レッツゴーデベロッパー2011「プログラミングGroovy〜G*エコシステム編」Yasuharu Nakano

Islam HouseHaris Padinharethil

jQueryAndrew Homeyer

You promise?IT Weekend

Viewers also liked (15)

Presentation sanlab workshopsArtur Roszczyk

JWEF Singapore - Building a company for fun, by Keith Ng, GametizeKeith Ng (@keizng)

Fun dayserkan yesilbağ

The document describes several water-based games that were played at a fun day event at a school in Turkey. The games included having blindfolded students fill cups of water with verbal directions, teams transporting water to fill cups in a race, students trying to jump rope without spilling water from cups, and a game where students had to drink multiple glasses of water quickly. The document explains the rules and objectives of each game and notes that the children enjoyed the activities, though they were tiring. It concludes by identifying the winners of some of the games.

Our teaser trailer idea finalamylewissimon1

Trailer analysis toy story 3Fordyy

The trailer for Toy Story 3 begins by showing Andy packing up his toys to take them to daycare. It then highlights the popular characters from the previous films like Woody and Buzz. Clips from Finding Nemo, Up, and Wall-E are also included to draw in audiences. The trailer establishes through one-liners from the toys that they will be facing uncertainty and change outside of Andy's house. Both happy and darker tones are used to hint at the drama the toys will experience. The release date is explicitly shown through titles while plot details are left for audiences to infer. Both children and teenagers who grew up with the earlier films make up the intended audience.

Our teaser trailer idea finalamylewissimon1

Team Building Company Brochure 2011The Team Building Company

The document provides information about team building and corporate events organized by The Teambuilding Company. They have over 20 years of experience organizing fun and engaging events both outdoors and indoors. A wide range of interactive activities are described including treasure hunts, cooking classes, drumming, stock market simulations, and murder mystery evenings. Venues throughout the UK and Europe are available. Contact details are provided to discuss customizing an event.

Event management software market teasersukiennong.vn

The document provides an analysis of the global event management software market from 2013 to 2016. It finds that the market was worth $28 billion in 2012 and is projected to grow at a 3.3% CAGR to $32 billion by 2016. The market is highly fragmented with over 300 companies and no player having more than 20% market share in the US. While companies have high gross margins, many suffer losses due to high spending on sales and marketing. The analysis finds that startups have better asset usage than mid-sized firms. It also provides valuation scenarios for entrepreneurs, finding higher potential returns for those able to obtain venture funding.

Corporate events presentationglobedu

Corporate events pptTheBSIIndia

The document outlines the process for planning, preparing, and producing corporate seminars, conferences, launches, and exhibitions. It discusses requirements such as developing an agenda, assigning a program manager and marketing executive, engaging IT support and vendors, and securing speakers, funds, and event staff. It also describes steps for response management including outreach campaigns, event logistics like venue setup, and onsite management of registration, vendor coordination, and photography. The overall process involves planning the event scope and invitations, preparing by compiling attendee databases and sending invites, and producing the event as well as follow-up activities.

Events MarketingNj Lopez-Tan

Gapingvoid: How To Supercharge Your EventGapingvoid Culture Design Group

Content Marketing for EventsJoe Pulizzi

Event planning powerpointkatelandturner

Fun Is Good Pptuniversity of indianapolis

Mike Veeck runs minor league baseball teams and employs a "fun is good" philosophy where he prioritizes creating an enjoyable experience for fans through promotions and giveaways. This approach has transformed money-losing teams into a thriving $25 million business. The book discusses how injecting fun, creativity, and passion is essential for business success. It provides lessons on maintaining a positive attitude, following your passion, blurring hierarchies between management and employees, embracing failure and change, and putting customers first to keep work enjoyable. The goal is to think like a child to retain creativity as adults and make "every day opening day" through constant evolution.

Presentation sanlab workshopsArtur Roszczyk

JWEF Singapore - Building a company for fun, by Keith Ng, GametizeKeith Ng (@keizng)

Fun dayserkan yesilbağ

Our teaser trailer idea finalamylewissimon1

Trailer analysis toy story 3Fordyy

Our teaser trailer idea finalamylewissimon1

Team Building Company Brochure 2011The Team Building Company

Event management software market teasersukiennong.vn

Corporate events presentationglobedu

Corporate events pptTheBSIIndia

Events MarketingNj Lopez-Tan

Gapingvoid: How To Supercharge Your EventGapingvoid Culture Design Group

Content Marketing for EventsJoe Pulizzi

Event planning powerpointkatelandturner

Fun Is Good Pptuniversity of indianapolis

Similar to Introduction to AngularJS (20)

Angular.js + Rails at WeWork or: The Accidental FeatureJonathan Magen

The document discusses how Angular.js was used together with Rails to build features for WeWork's internal tools, including inline editing, audit trails, and internationalization. It describes how Rails provides RESTful JSON endpoints that Angular consumes via ngResource to retrieve and modify data. Rails also helps render Angular templates, which can include localized text. The initial use of Angular.js was to enable inline editing of inventory records, which led to expanding its use for other features within the Rails codebase.

Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin

HTML5 and CSS3 have arrived. Are you ready to start adopting these technologies in your web projects? Jump start your understanding of the new rich standards and arm yourself with essential techniques for making the most of HTML5 and CSS3 today. In this half-day workshop, you will learn everything you need to know to effectively start leveraging HTML5 and CSS3 in ASP.NET applications. Learn how HTML5 and CSS3 are removing limits from web design. Discover tools and techniques for adopting HTML5 and CSS3 while still supporting older browsers. Leave with the essential knowledge needed to embrace HTML5 and CSS3 in your next ASP.NET project!

Using Ember to Make a Bazillion DollarsMike Pack

Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Jamie Matthews

Velocity EU 2012 - Third party scripts and youPatrick Meenan

The document discusses strategies for loading third-party scripts asynchronously to improve page load performance. It notes that the frontend accounts for 80-90% of end user response time and recommends loading scripts asynchronously using techniques like async, defer, and loading scripts at the bottom of the page. It also discusses tools for monitoring performance when third-party scripts are blocked.

Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector

1. The document discusses integrating front-end frameworks like Angular, Ember, and React with Rails by constructing JSON APIs, preloading data to avoid loading screens, and server-side rendering for SEO and performance. 2. It provides code examples for building a TODO application with each framework, including using ngResource and factories in Angular, Ember conventions like Ember Data, and building isolated React components. 3. Server-side rendering is highlighted as the future for isomorphic JavaScript, providing benefits like prerendering on initial page load.

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy

09 - Express Nodes on the right Angle - Vitaliy Basyuk - IT Event 2013 (5) 60 вузлів під правильним кутом - миттєва розробка програмних додатків використовуючи Node.js + Express + MongoDB + AngularJS. Коли ми беремось за новий продукт, передусім ми думаємо про пристрасть, яка необхідна йому, щоб зробити користувача задоволеним і відданим нашому баченню. А що допомагає нам здобути прихильність користувачів? Очевидно, що окрім самої ідеї, також важлими будуть: зручний користувацький інтерфейс, взаємодія в реальному часі та прозора робота з даними. Ці три властивості ми можемо здобути використовучи ті чи інші засоби, проте, коли все лиш починається, набагато зручніше, якщо інструменти допомагають втілити бажане, а не відволікають від головної мети. Ми розглянемо процес розробки, використовуючи Node.js, Express, MongoDB та AngularJS як найбільш корисного поєднання для отримання вагомої переваги вже на старті вашого продукту. Віталій Басюк http://itevent.if.ua/lecture/express-nodes-right-angle-rapid-application-development-using-nodejs-express-mongodb-angular

Charlie Gerard- Mind Control in Javascript (Evolution)Thoughtworks

A typical interaction with a device or interface involves touching it. Either you're pressing buttons on a controller, swiping on a touchscreen or clicking on your laptop's trackpad. But what if you could control things without the use of your hands? What if you could use your thoughts instead? Charlie has evolved this interaction using a brain sensor and developed an open source JavaScript framework to allow users to control interfaces or devices using facial expressions and mental commands.

前端概述Ethan Zhang

The document provides an overview of front-end technologies including HTML, CSS, JavaScript, Ajax and jQuery. It discusses how the front-end interacts with the user's browser and backend servers. It describes the roles of HTML, CSS and JavaScript in content, styles and behaviors. It then covers HTML tags and structures, CSS, JavaScript basics and its use in browsers with BOM and DOM APIs. The document also summarizes Ajax and how it enables asynchronous JavaScript requests, and introduces jQuery and how it simplifies DOM and Ajax operations.

jQuery Internals + Cool Stuffjeresig

The State of PHPUnitEdorian

The document summarizes the current state of PHPUnit and provides information about upcoming features. Key points include: - PHPUnit version 3.6.12 is the current version with over 60 contributors since 3.6.0. Version 3.7 will introduce 15+ new features and fix 10+ issues. - Efforts are being made to avoid backwards compatibility breaks between versions. - Upcoming features include improved exception handling, JSON assertion methods, callback matchers, OO arrays support, and a PHPUnit XSD schema file. - The ecosystem around PHPUnit is growing with tools like Behat, Mockery, Proxy Object, and wsUnit.

Frontin like-a-backerFrank de Jonge

The document discusses the evolution of the author's views on JavaScript and front-end frameworks. It begins by expressing dislike for JavaScript but acknowledging the need for it. Various frameworks like Backbone, Angular, and Ember are explored but found lacking. React is then introduced and praised for its declarative and composable approach similar to HTML. The author comes to understand JSX and how React implements unidirectional data flow to separate the UI from data logic. This allows building full-stack applications with React handling both client and server rendering based on shared intentions, state, and data flow patterns.

Liberating web apps from the serverAlexander Gyoshev

This document discusses liberating web apps from servers by separating apps from backend services. It provides reasons for this separation including allowing offline use, easier testing, and improved performance through caching. Specific techniques discussed include using offline storage, service workers, and backend as a service providers. Benefits are outlined such as improved development workflows and the ability to build apps that work regardless of network connectivity. Concerns with dependencies on remote services are also noted. Overall, the document argues that separating the frontend app from the backend enables new capabilities and improved user experiences.

The Peanut Butter Cup of Web-dev: Plack and single page web appsJohn Anderson

This document discusses single page web applications and the Angular.js framework. It provides an example of a simple Angular app with two-way data binding between HTML and JavaScript. It also describes how Plack and Perl can be used to prototype and serve such single page apps from the backend during development before integrating a full backend. The document encourages starting simply and learning new techniques gradually.

REST with Eve and PythonPiXeL16

This document discusses using Flask and Eve to build a REST API with Python in 3 days. It introduces Flask as a microframework for building web applications with Python. Eve is presented as a Python framework built on Flask that allows building RESTful APIs with MongoDB in a simple way. The document provides examples of creating basic Flask and Eve apps, configuring Eve settings like schemas and authentication, and describes many features of Eve like filtering, sorting, pagination and validation.

He stopped using for/while loops, you won't believe what happened next!François-Guillaume Ribreau

Derrière ce titre putaclic se cache une réalité pour une partie de notre industrie. Les boucles for/while sont des structures itératives proposant le plus bas niveau d'abstraction. Les langages modernes proposent encore de nos jours ces structures car elles ont leur utilité dans quelques cas exceptionnels. Ces 10 dernières années, de nouvelles structures d'itérations sont apparues, proposant un plus haut niveau d'abstraction : donc une meilleure productivité, moins de ligne de code, donc moins de bug potentiels (que nous décrirons). Nous partirons d'exemples de code simple et montrerons leur équivalent via ces nouvelles structures puis observerons les avantages (et inconvénients ?). Les exemples seront en JavaScript mais bien entendu applicable dans d'autres langages (Java, C#, Python, Ruby, C++, Scala, Go, Rust, ...).

JavaScript performance patternsStoyan Stefanov

This document summarizes best practices for optimizing JavaScript performance. It discusses loading JavaScript asynchronously or lazily to avoid blocking page loads. It also recommends minimizing DOM manipulation, batching style changes, and caching references to reduce reflows and repaints. The document emphasizes measuring performance through tools like Benchmark.js and jsperf.com to avoid premature optimization. It cautions against unnecessary shims and polyfills and stresses optimizing for mobile environments.

Starting out with Ember.jsAnirudh Shivanand

Mojolicious - A new hopeMarcus Ramberg

Web performance essentials - GoodiesJerry Emmanuel

The document provides guidelines and techniques for optimizing web page performance, including recommendations for CSS and JavaScript best practices, optimization of resources, and use of the Firebug tool to inspect pages and identify issues. It discusses strategies like minimizing HTTP requests, optimizing CSS and JavaScript, using JSON over XML, image sprites, caching, and more. The Firebug tool is highlighted as a way to analyze pages and debug JavaScript, CSS, and performance issues.

Angular.js + Rails at WeWork or: The Accidental FeatureJonathan Magen

Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin

Using Ember to Make a Bazillion DollarsMike Pack

Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Jamie Matthews

Velocity EU 2012 - Third party scripts and youPatrick Meenan

Crossing the Bridge: Connecting Rails and your Front-end FrameworkDaniel Spector

09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy

Charlie Gerard- Mind Control in Javascript (Evolution)Thoughtworks

前端概述Ethan Zhang

jQuery Internals + Cool Stuffjeresig

The State of PHPUnitEdorian

Frontin like-a-backerFrank de Jonge

Liberating web apps from the serverAlexander Gyoshev

The Peanut Butter Cup of Web-dev: Plack and single page web appsJohn Anderson

REST with Eve and PythonPiXeL16

He stopped using for/while loops, you won't believe what happened next!François-Guillaume Ribreau

JavaScript performance patternsStoyan Stefanov

Starting out with Ember.jsAnirudh Shivanand

Mojolicious - A new hopeMarcus Ramberg

Web performance essentials - GoodiesJerry Emmanuel

Introduction to AngularJS

1. AngularJS HTML ENHANCED FOR WEB APPS - Patrick Aljord / @patcito

2. What Is AngularJS Trying To Fix? HTML is great for declarative code for static web page <>el wrd Not so for dynamic pages: < i=getn1>/> p d"reig" vriI =dcmn.tahvn; a sE ouetatcEet vraditnr=iI a dLsee sE ?fnto(,t f){ ucine , n eatcEet'n +t f)} .tahvn(o' , n; :fnto(,t f){ ucine , n eadvnLsee(,f,fle;; .dEetitnrt n as)} aditnrdcmn,'od,fnto({ dLsee(ouet la' ucin) vrgetn =dcmn.eEeetyd'reig'; a reig ouetgtlmnBI(getn1) i (sE { f iI) getn.neTx ='el Wrd' reiginret Hlo ol!; }es { le getn.etotn ='el Wrd' reigtxCnet Hlo ol!; } }; ) <srp> /cit

3. But... = Imperative :-( Declarative FTW! 1. <>el wrd/> pHlo ol{reig}/> p{Getn}<p

4. Data Binding 1. Define a model 2. Binds it to a template 3. When you modify the model, templates updates automotically 4. When the user intereacts with the UI, templates knows how to sync the data with the model.

5. Concrete Example: JQuery Vs AngularJS <cittp=tx/aacit> srp ye"etjvsrp" $fnto ( { (ucin ) vrnm =$'nm'.a(; a ae (#ae)vl) vrgetn =$'getn'; a reig (#reig) nm.eu(ucin( { aekypfnto ) getn.et'el ' nm +''; reigtx(Hlo + ae !) }) }) <srp> /cit dv <ae>ae<lbl lblNm:/ae> <nu tp=tx"i=nm" ipt ye"et d"ae> < i=getn"/> <dv /i> Name: Enter a name here HELLO

6. Concrete Example: JQuery Vs AngularJS dv gap <ae>ae<lbl lblNm:/ae> <nu tp=tx"n-oe=yuNm" ipt ye"et gmdl"orae> <>el {yuNm}!/> pHlo {orae} Name: Enter a name here HELLO !

7. SO DATA BINDING ALLOWS CODE THAT IS 1. very simple 2. very recognizable 3. looks like the original HTML hello world Thanks To... 1. Dirty checking 2. Only checks the current view 3. Only check when change may happen 4. Leverage the JIT 5. But... the DOM is slow

8. DATA BINDING COMING TO A BROWSER NEAR YOU Implementation When? AngularJS Javascript Now Model Driven Views Native Future Object.observe Native Future There's already an AngularJS branch using Object.observe !

9. BUT HTML CAN BE VERBOSE!

10. ↤ Beatiful widgets: Cool Tricking the browser: Not Cool ↧↧ <lcas"a nvtb"i=mTb> u ls=nv a-as d"ya" <icas"cie>ahe=#eto1>eto 1/>/i l ls=atv"< rf"scin"Scin <a<l> <i< he=#rfl"Scin2/>/i l>a rf"poie>eto <a<l> /l i ' eto <d v> dv ls=tbpn" d"eto2>i ' eto <dv <dv /i> <cit srp> $fnto ( { (ucin ) $'mTbals'.a(so'; (#ya :at)tb'hw) }) <srp> /cit Declarative reusable components: Cool ↧↧ <as tb> <aette"eto 1> pn il=Scin " H,ImScin1 i ' eto <pn> /ae <aette"eto 2> pn il=Scin " H,ImScin2 i ' eto <pn> /ae <tb> /as

11. <google-map> <tabs> <tweet> <avatar> <color-picker> <invoice> <unleash-your-imagination>

12. REUSABLE COMPONENTS COMING TO A BROWSER NEAR YOU Implementation When? AngularJS DOM+JS Now (directives) Web Native Near Future Components

13. Mozilla shim for web components: x-tags.org W3C specs: http://www.w3.org/TR/2012/WD-components-intro- 20120522/#custom-element-section

14. THE WHOLE PACKAGE TO BUILD KICK ASS WEB APPS! ✓ Data binding ✓ Templating ✓ Routing and deep linking ✓ Testing ✓ Form validation ✓ Dependency injection ✓ MVW (Model/View/Whatever!)

16. angularjs scaffold Checkout angularjs_scaffold if you're into Rails. https://github.com/patcito/angularjs_scaffold

17. Thanks! Patrick Aljord @patcito http://blog.ricodigo.com http://twitter.com/patcito +Patrick Aljord Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar.

Introduction to AngularJS

Recommended

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Introduction to AngularJS (20)

Introduction to AngularJS