- The document discusses AngularJS, a JavaScript framework for building web applications. It provides an overview of key AngularJS concepts like MVC architecture, data binding, directives, and services. - Tools like Yeoman and Grunt are recommended for scaffolding AngularJS projects and automating tasks. The document emphasizes writing test-driven code and following AngularJS best practices for modularity and performance. - Examples are provided to demonstrate how to write AngularJS controllers and compare simple versus more sophisticated applications built with the framework. Warnings are given about potential challenges like supporting older browsers and SEO.

1. Quick start with AngularJS
WORKSHOP

2. •13+ years of production development
•6+ years of web development
•TDD infected 9years ago
•And only 6 months of AngularJSexperience 
Who’s speaking?

3. What do we want?
•Do less
•Get more

4. The Framework
The most influencing JavaScript frameworks over the last two years.
Check it out here: http://goo.gl/XGT4dH

5. The Framework
Are You…
•Beginner or intermediate? AngularJSis 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.

6. Recap MVC
Model
Application Data
(e.g. Values typed into a form field.
Or the results of a database call.)
View
Representation of the Model
(e.g. What the user sees on a webpage.)
Controller
Mediator 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.)

7. How MVC rethought in AngularJS
Model
Application Data
(e.g. Values typed into a form field.
Or the results of a database call.)
View
Representation of the Model
(html fragment with ng-controllerattribute)
Whatever
Mediator between the Model & View
(e.g. Passes data back and forth seamlessly* via data binding)

8. But wait!..
—Ain’tit about extra work?Why not make it simple with JQuery?

9. In fact, less work!
Instead of<divid="greeting"></div>
and$('.greeting').text(greetingMessage);
You need only: <div>{{greetingMessage}}</div>

10. 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, REStinteropetc.)

11. And more
•Data models are just plain objects
•RESTfulservices support
•Internationalization and Localization
•Sanitazingand validation for high security
•Built with TDD in mind
•E2E test support

12. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.

13. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.
angularjs.org
ngmodules.org

14. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.

15. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.

16. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.

17. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.

18. Your Toolkit
•AngularJS
•IDE
•WebStorm
•Visual Studio + ReSharper
•Plunker
•Yeoman
•Angular App Generator
•Grunt
•Karma
•Travis, .gitignoreetc.
•Shamanistic Tambourine aka Бубен

19. Scaffolding with Yeoman
•Well thought-out directory structure
•All dependencies included (nmpand bower)
•Boilerplate for routine tasks and unit testing done
•App folder for the AngularJSapplication sources
•Distfolder for the application deploy package
•Test folder for Jasmine+KarmaJSspecs

20. Then doing everything with Grunt

21. And run your test right in the right IDE*
*JetBrainsWebStorm+ KarmaJS

22. 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

23. Or create it in your favorite IDE*
*JetBrainsWebStorm

24. Writing a controller

25. Writing a controller

26. Let’s try it…
Compare:
•Naïve Weather Apphttp://plnkr.co/edit/51OCvUa7Y8t1ND1ojqNp
•Mature Weather Apphttp://plnkr.co/edit/BeBj63yoI1QZT0QpMAoG
and
•UnicornLaunchApplication in WebStorm

27. Don’t say you are not warned

28. 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

29. Don’t say you are not warned
1.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 AngularJSanyway! =))