AngularJS just ain't another MVC framework

Google+: klab.ca/+ Twitter: @PearlChen ain’t just another MVC framework Pearl
Chen [email protected] AngularJS

Me Technologist + Educator frontend web developer hardware hacker emerging
technology & user experience (‘artist’) Ladies Learning Code instructor Teach Android & Arduino workshops former CFC Media Lab Research & Tech Manager Teach kids Scratch programming

Day job: Frontend Tech Lead Can you build responsive web
sites? Come work with me -- TELUS is hiring!

The Superheroic JavaScript MVW Framework Beginner to intermediate? AngularJS is
opinionated and will save you from the spaghetti code monster. More advanced? Create complex web apps in a simpler way. Write code with unit testing in mind. Model-View- Whatever ^

MVC refresher Model your application data (e.g. Values typed into
a form ﬁeld. Or the results of a database call.) Controller mediator between the model & view (e.g. When a form ﬁeld is updated, it takes care of saving that data. Or when data comes back from an API call, tells the view to update.) View a representation of the model data (e.g. What the user sees on a webpage.)

MVC -- the Angular Way Model your application data (e.g.
An array of values) Whatever mediator between the model & view (e.g. Passes data back and forth seamlessly* via data binding) View a representation of the model data (html fragment w/ ng-controller attribute)

Other MVC frameworks? Backbone.js (backbonejs.org) was one of the ﬁrst
and has huge traction due to its early beginnings. • Gives you a way to organize your code via an API after extending Backbone classes. • It is very un-opinionated. • It’s up to you to use it as much, or as little as you want to. “If the framework doesn’t write the code, YOU have to.” - Backbonejs vs Angularjs : Demystifying the myths

Angular is a MVC Framework but... There is nothing to
inherit, nothing to call, and no complex life cycle for your controllers to follow. [...] It really is just a better browser.”- Misko Hevery

In contrast... Angular: • Is very opinionated. (e.g. There is
typically a “right” way to do it.) • Gives you a way to organize your code but feels like you’re just writing HTML and JS, not extending classes. • Does a lot of heavy lifting for you (Mainly around DOM manipulation using data binding.)

Re-envision web development “Angular is what the web browser would
have been, had it been designed for applications.” - Misko Hevery, Appliness (Feb #11): appliness.com

Remember document.getElementById()? var hello = “Hey, jQueryTO!”; Old school way
to dynamically update text: <div id=“message”></div> document.getElementBy(‘message’).textContent = hello; Then that got replaced by $(selector)... <div id=“message”></div> $(‘#message’).text( hello ); Now, with Angular! <div>{{hello}}</div>

A simple AngularJS HTML ﬁle <!DOCTYPE html> <html ng-‐app>
<body> <div> <label>Name:</label> <input type="text" ng-‐model="yourName" placeholder="What’s your name?"> <h1>Hello {{yourName}}!</h1> </div> <script src="https://ajax.googleapis.com/ajax/libs/ angularjs/1.0.5/angular.min.js"></script> </body> </html>

A slightly more complex AngularJS app <style> .highlight {
/* some CSS styles */ } </style> <body ng-‐app> <div ng-‐controller="MagicCtrl"> <div ng-‐class="{'highlight':highlight}"> {{tada}}! </div> <button ng-‐click="glow()">Add Highlight</button> <button ng-‐click="fade()">Fade Highlight</button> </div> <script src="angular.min.js"></script> <script src="magic.js"></script> </body>

Its matching application JavaScript ﬁle function MagicCtrl($scope) { $scope.tada
= “It’s like magic!”; $scope.highlight = false; $scope.glow = function() { $scope.highlight = true; }; $scope.fade = function() { $scope.highlight = false; }; }

Let’s see this in practice!

Being built on AngularJS... codehuddle.org And being built open source:
github.com/CodeHuddle/

Use Yeoman to build your Angular apps Yeoman is an
opinionated* way to quickly scaffold out the basic web ﬁles of a web application. *Although less opinionated for version 1.0

Warning!!! Examples based on Yeoman version 0.9.6. (Version 1.0 beta
was released just last week.)

AngularJS has a Yeoman generator! • Packaged by default with
Yeoman 0.9.6. • Found in your Yeoman generators directory. (/usr/local/lib/node_modules/yeoman/node_modules/yeoman-generators/lib/generators) • Or update/install it locally to your project folder: npm install generator-‐angular Github project (github.com/yeoman/generator-angular) maintained by Brian Ford on the AngularJS team so follow him on Google+

Using the default generator... (1) Start with an empty folder*.
*Generator will automatically use folder name to create a namespace for your app so don’t use numbers or non-letter characters ** demo ** yeoman init angular ( v1.0: yo init angular )

Other commands: route (1) Creates both a view (an html
fragment) and a controller (a JS ﬁle) (2) Links to the controller ﬁle in index.html (3) Updates the $routeProvider in app.js. (4) Creates stubs for your unit tests in /tests ** demo ** yeoman init angular:route name-‐of-‐your-‐route

Other commands: directive (1) Creates a directive (a way to
encapsulate DOM manipulation) (2) Links to the directive ﬁle in index.html ** demo ** yeoman init angular:directive name-‐of-‐your-‐directive Check out AngularUI (angular-ui.github.com) for more UI directives.

Other commands: filter (1) Creates a filter (logic to manipulate
data so the view can use it) (2) Links to the filter file in index.html ** demo ** yeoman init angular:filter name-‐of-‐your-‐filter

Learning more about Angular • Ofﬁcial AngularJS website: angularjs.org •
AngularJS Google+ Community: plus.google.com/communities/ 115368820700870330756 • Egghead.io video tutorials: egghead.io

Thank you! Upcoming workshops: MaKey MaKey for Game Makers: klab.ca/makeymakey
Intro to Arduino + Breadboarding: klab.ca/events Reminder: TELUS is hiring! Come talk to me. Google+: klab.ca/+ Twitter: @PearlChen Pearl Chen [email protected]

AngularJS just ain't another MVC framework

AngularJS just ain't another MVC framework

Pearl Chen

More Decks by Pearl Chen

Other Decks in Technology

Featured

Transcript

Google+: klab.ca/+ Twitter: @PearlChen ain’t just another MVC framework Pearl

Me Technologist + Educator frontend web developer hardware hacker emerging

Day job: Frontend Tech Lead Can you build responsive web

The Superheroic JavaScript MVW Framework Beginner to intermediate? AngularJS is

MVC refresher Model your application data (e.g. Values typed into

MVC -- the Angular Way Model your application data (e.g.

Other MVC frameworks? Backbone.js (backbonejs.org) was one of the ﬁrst

Angular is a MVC Framework but... There is nothing to

In contrast... Angular: • Is very opinionated. (e.g. There is

Re-envision web development “Angular is what the web browser would

Remember document.getElementById()? var hello = “Hey, jQueryTO!”; Old school way

A simple AngularJS HTML ﬁle <!DOCTYPE html> <html ng-‐app>

A slightly more complex AngularJS app <style> .highlight {

Its matching application JavaScript ﬁle function MagicCtrl($scope) { $scope.tada

Let’s see this in practice!

Being built on AngularJS... codehuddle.org And being built open source:

Use Yeoman to build your Angular apps Yeoman is an

Warning!!! Examples based on Yeoman version 0.9.6. (Version 1.0 beta

AngularJS has a Yeoman generator! • Packaged by default with

Using the default generator... (1) Start with an empty folder*.

Other commands: route (1) Creates both a view (an html

Other commands: directive (1) Creates a directive (a way to

Other commands: ﬁlter (1) Creates a ﬁlter (logic to manipulate

Learning more about Angular • Ofﬁcial AngularJS website: angularjs.org •

Thank you! Upcoming workshops: MaKey MaKey for Game Makers: klab.ca/makeymakey