Design space 2.0 live

Tech Stack (2/16/2015)


    . Angularjs

Things to know

	Single Pages Apps
	Angular
	NodeJs	http://techzonal.blogspot.com/2013/07/what-is-nodejs-and-its-basic.html
	NPM
	nodist	https://github.com/marcelklehr/nodist
	Yoeman	http://yeoman.io/
	Bower
	CommonJS, AMD (specifications)	Common JS api : ServerSide (node), AMD api suited for client side, RequireJS implementation. http://addyosmani.com/writing-modular-js/
	TDD
	Jasmine
	Testacular
	Protractor
	Grunt	less,jshint,bower,autoprefixer,fileblocks,rev,cssmin,imagemin,svgmin,htmlmin,concurrent,watch,karma,protractor
	FileBlocks	http://www.rrharvey.com/2013/12/insert-script-tags-automatically-using-grunt/
	usemin	https://github.com/yeoman/grunt-usemin
	html5boilerplate	http://html5boilerplate.com/
	Modernizr
	es5-shim

Tech Stack

AngularJS
Router	https://github.com/angular-ui/ui-router
	http://yeoman.io/
Jasmine		for BDD Testing
Testacular or Karma		TestRunner
Protractor		wrapper for Selium web driver
webdriver aka selenium

• do we use jade over html template (http://tylerhenkel.com/creating-apps-with-angular-and-node-using-yeoman/)

http://caniuse.com/

Installing Nodejs (Best)

Javascript:

http://www.codeorbits.com/blog/2013/07/07/defining-classes-in-javascript/

Tutorials

[Best,Start here ] http://angularjs.org/

https://github.com/jmcunningham/AngularJS-Learning

http://stackoverflow.com/questions/14333857/how-to-master-angularjs

http://codecondo.com/3-free-books-for-learning-angularjs/

http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/

http://bardevblog.wordpress.com/2013/07/28/setting-up-angularjs-angular-seed-node-js-and-karma/

https://egghead.io/

https://egghead.io/technologies/angularjs

http://flippinawesome.org/2013/09/03/the-angular-way/

http://www.ng-newsletter.com/posts/

http://www.thinkster.io/angularjs/GtaQ0oMGIl/a-better-way-to-learn-angularjs#item-51e78b7e505a417713000002

https://www.firebase.com/

https://github.com/curran/screencasts/tree/gh-pages/introToAngular (good) (Introduction to Angular.js in 50 Examples)

http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with

PluralSight : Courses

• http://pluralsight.com/training/Courses/TableOfContents/angularjs-fundamentals
• http://pluralsight.com/training/Courses/TableOfContents/angular-best-practices (**)
• http://pluralsight.com/training/Courses/TableOfContents/show-me-angular
• http://pluralsight.com/training/Courses/TableOfContents/building-angularjs-nodejs-apps-mean
• http://pluralsight.com/training/Courses/TableOfContents/angularjs-in-depth
• http://pluralsight.com/training/Courses/TableOfContents/angularjs-dotnet-developers

other Video tutorial

• http://www.thinkster.io/angularjs/r1gRPYp4kM/angularjs-tutorial-learn-to-build-modern-webapps

Modules:

User Authentication

http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

https://github.com/mrgamer/angular-login-example

l18N and l10N

https://github.com/angular-translate/angular-translate

Angular Seed:

http://yeoman.io/

https://github.com/angular-app/angular-app (Grunt)

https://github.com/ngbp/ngbp (ngBoilerplate)

https://github.com/clevertech/cleverstack-angular-seed

https://github.com/angular/angular-seed

http://www.jquery4u.com/angular-js/5-angular-js-seeds-bootstrap-apps/

https://github.com/yearofmoo/angularjs-seed-repo

https://github.com/linemanjs/lineman-angular-template

Design Pattern

• will use promise & call back http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/deferred-and-promise.html
• Login & Authentication http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

Testing:

http://www.yearofmoo.com/2013/09/advanced-testing-and-debugging-in-angularjs.html

http://www.codeorbits.com/blog/2014/01/26/angularjs-end-to-end-testing-with-protractor-easy-set-up-with-yeoman/

https://egghead.io/lessons/angularjs-getting-started-with-protractor

MEAN Stack/ Nodejs

nvm

https://code.google.com/p/msysgit/

https://github.com/marcelklehr/nodist (added path variable C:\Users\salagappa\Projects\Mean\nodist\bin)

JSFiddle:

http://jsfiddle.net/mjaric/pJ5BR/

http://jsfiddle.net/api/post/library/pure/

AngularJS Batarang - Good Debugger

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

Models

http://odetocode.com/blogs/scott/archive/2014/03/17/building-better-models-for-angularjs.aspx

Interesting projects:

http://builtwith.angularjs.org

http://pkukielka.github.io/angular-panels/#demo

https://github.com/firebase/firereader

Mock Data:

http://jsfiddle.net/mjaric/pJ5BR/

https://www.debuggex.com/#cheatsheet

Testing Framework

http://www.codeorbits.com/blog/2014/01/26/angularjs-end-to-end-testing-with-protractor-easy-set-up-with-yeoman/

Best Practice Recommendations for Angular App Structure

• 
  
• https://github.com/angular/angular.js/wiki/Projects-using-AngularJS
• https://github.com/angular/angular.js/wiki/Best-Practices
• https://github.com/angular/angular-phonecat

Version:

http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html

https://github.com/angular/angular.js

Directives / Widget

http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

http://jsfiddle.net/revolunet/26ghx/

http://ivaynberg.github.io/select2/ (Loading remote data for font dropdown)

http://angular-ui.github.io/

http://wijmo.com/tag/angularjs-2/

http://angular-ui.github.io/ng-grid/

Grunt:

http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when

angular -color picker :

http://jsfiddle.net/g/LAJCa/

http://bgrins.github.io/spectrum/

http://kendo-labs.github.io/angular-kendo/#/

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

http://angular-widgets.github.io/angular-jqm/master/

https://github.com/petrkotek/angular-widgetarea-directive

Messaging - Pubsub

http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs

http://jsfiddle.net/ThomasBurleson/sv7D5/

Model:

http://stackoverflow.com/questions/16554580/what-is-the-advantage-of-using-restangular-over-ngresource

http://backbonejs.org/

http://www.breezejs.com/

Test Driven Development

e2e Testing:

e2e or end-to-end or UI testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. In simple words, it is testing of your application from the user endpoint where the whole system is a black box with only the UI exposed to the user.

• Selenium automates browsers. That’s it.
• WebDriver (or Selenium 2) basically refers to the language bindings and the implementations of the individual browser controlling code.
• WebDriverJS has an important difference from other bindings in any other language - It is asynchronous.
• Now we need a testing framework to handle our tests. That is where Jasmine comes in.
• Protractor is a library by the Angular team which is a wrapper on WebDriverJS and Jasmine and is specifically tailored to make testing of Angular apps a breeze
• 1,500 AngularJS tests in WebStorm against Chrome Canary and Chrome in less than 5 seconds. (Testacular)
• Karma : A simple tool that allows you to execute JavaScript code in multiple real browsers.
• https://github.com/karma-runner/karma/raw/master/thesis.pdf
• https://github.com/angular/protractor/issues/9  (protractor + karma)
• http://savanne.be/articles/testing-with-angular-js/

http://webdriver.io/