quick start with angularjs
DESCRIPTION
Vadim Milichev, Lead Software Engineer “Quick start with AngularJS”: • Why AngularJS • What's inside • How to cook • Hey, where are the tests?TRANSCRIPT
![Page 1: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/1.jpg)
Quick start with AngularJSWORKSHOP
![Page 2: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/2.jpg)
• 13+ years of production development
• 6+ years of web development
• TDD infected 9 years ago
• And only 6 months of AngularJSexperience
Who’s speaking?
![Page 3: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/3.jpg)
What do we want?
• Do less
• Get more
![Page 4: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/4.jpg)
The Framework
The most influencing JavaScript frameworks over the last two years.Check it out here: http://goo.gl/XGT4dH
![Page 5: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/5.jpg)
The Framework
Are You…
• Beginner or 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.
![Page 6: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/6.jpg)
Recap MVC
ModelApplication Data
(e.g. Values typed into a form field. Or the results of a database call.)
ViewRepresentation of the Model(e.g. What the user sees on a
webpage.)
ControllerMediator between the Model & View
(e.g. When a form field is updated, it takes care of saving that data.Or when data comes back from an API call, tells the view to update.)
![Page 7: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/7.jpg)
How MVC rethought in AngularJS
ModelApplication Data
(e.g. Values typed into a form field. Or the results of a database call.)
ViewRepresentation of the Model
(html fragment with ng-controllerattribute)
WhateverMediator between the Model & View
(e.g. Passes data back and forth seamlessly* via data binding)
![Page 8: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/8.jpg)
But wait!..
— Ain’t it about extra work? Why not make it simple with JQuery?
![Page 9: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/9.jpg)
In fact, less work!
Instead of
<div id="greeting"></div>and$('.greeting').text(greetingMessage);
You need only:
<div>{{ greetingMessage }}</div>
![Page 10: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/10.jpg)
Also…
• Is very opinionated.(i.e. 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(e.g. DOM manipulation using data binding, REStinterop etc.)
![Page 11: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/11.jpg)
And more
• Data models are just plain objects
• RESTful services support
• Internationalization and Localization
• Sanitazing and validation for high security
• Built with TDD in mind
• E2E test support
![Page 12: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/12.jpg)
Your Toolkit
• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
![Page 13: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/13.jpg)
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
angularjs.org
ngmodules.org
![Page 14: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/14.jpg)
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
![Page 15: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/15.jpg)
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
![Page 16: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/16.jpg)
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
![Page 17: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/17.jpg)
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
![Page 18: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/18.jpg)
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
• Shamanistic Tambourine aka Бубен
![Page 19: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/19.jpg)
Scaffolding with Yeoman• Well thought-out directory structure
• All dependencies included (nmp and bower)
• Boilerplate for routine tasks and unit testing done
• App folder for the AngularJSapplication sources
• Dist folder for the application deploy package
• Test folder for Jasmine+KarmaJS specs
![Page 20: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/20.jpg)
Then doing everything with Grunt
![Page 21: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/21.jpg)
And run your test right in the right IDE*
* JetBrains WebStorm + KarmaJS
![Page 22: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/22.jpg)
Create new stuff with Yeoman
Creates 2 files:• Directive stub with JSDoc• Jasmine test spec
Places them in appropriate place
Includes directive source in the index.html file
![Page 23: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/23.jpg)
Or create it in your favorite IDE*
* JetBrains WebStorm
![Page 24: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/24.jpg)
Writing a controller
![Page 25: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/25.jpg)
Writing a controller
![Page 26: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/26.jpg)
Let’s try it…
Compare:
• Naïve Weather Apphttp://plnkr.co/edit/51OCvUa7Y8t1ND1ojqNp
• Mature Weather Apphttp://plnkr.co/edit/BeBj63yoI1QZT0QpMAoG
and
• UnicornLaunch Application in WebStorm
![Page 27: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/27.jpg)
Don’t say you are not warned
![Page 28: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/28.jpg)
Don’t say you are not warned
• Modularity and Proper project organization
• Implement all DOM stuff in directives
• Consider performance issues
• No feature without test
![Page 29: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/29.jpg)
Don’t say you are not warned1. They want you to support IE?
2. Wouldn’t it be an overkill?
3. Does SEO matter?http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
4. Enormous data amounts in a single view
Use AngularJS anyway! =))
![Page 30: Quick start with AngularJS](https://reader033.vdocuments.net/reader033/viewer/2022060116/5583887ed8b42a282c8b4939/html5/thumbnails/30.jpg)