Slides from the AJCP Meetup on Jan25 for Bootstrapping Angular JS with YEOMAN BOWER/GRUNT/YO

1. Bootstrapping Angular With
Yeoman / Bower / Grunt
Mak Bhatamrekar
http://github.com/makrand-bkar
AJCP
http://meetup.com/my-ajcp
Atlanta Java Concept Pros

2. Prerequisites
• Node JS Installed – http://nodejs.org
• RUBY >1.9.3 Installed -
http://rubyinstaller.org/
• Git Installed - install msysgit

3. Hands On
• Angular Introduction
• Yeoman
• Deep Dive Yo
• Deep Dive Grunt and Maven
• Deep Dive Bower and Maven
• Recap
Agenda

4. About MySelf
• 15 yrs in Enterprise Java and OpenSource
• FullStack Java Enterprise Developer
• FrontEnd, was passionate about Adobe Flex
• Now , its just ANGULAR and its ecosystem for
clientside.

5. • Framework to Create Rich Web Applications
• MVC Framework
– Unlike JSP which is just a View
– Agnostic to Server Side Framework
– Only Communication is for Data through REST API
• Jquery Support BuiltIn
• Large Plugin Ecosystem
• And More..

6. Angular Stats

8. Million Dollar Question
Is ServerSide Framework Needed to
– Develop a the Client Side Appln?
– Deploy the ClientSide Appln ?

9. Client Side Development Needs
– Standardized Project
Structure
– Tomcat Like Server
– Dynamic Reloading
– Ease of Managing Javascript
Libraries
– Dynamic Reloading
– Debugging

10. Introducing Yeoman
• Kickstarts new projects, prescribing best
practices and tools
• It has 3 elements – YO / GRUNT / BOWER

11. • YO is like Maven Archetype
$mvn archetype:generate // create a starter project will all basic dependancies loaded.
• Select Angular YO Generator
Generator List http://yeoman.io/generators/
• Steps
– npm install --global yo
– npm install -g generator-angular
– mkdir project1, cd project1
– Yo angular

12. Grunt
• npm install - -global grunt
• npm install - -global grunt-cli
• npm install
• Defines Maven like Goals of Project
• Goals Like
– Start a web server
– Copy,uglify javascript files
– Compile Sass files to CSS
– Compress files
– Dynamically maintain bower dependencies

13. Bower
npm install –global bower (once to install bower itself)
bower install (installs the libraries)
• Bower is the Package Manager Of Web
• Maintains Javascript Lib Dependancies
• Its Akin to Maven Dependencies
• Things to remember
– bower.json – defines the dependencies
– .bowercc - specifies the location of bower_components
directory

14. Summary
Command Description
Install, NodeJs / Ruby Install NodeJs / Git And Ruby
npm install grunt Installs grunt package
npm install grunt-cli Insalls grunt cli
npm install Installs all nodemoduels as per
package.json
gem install compass Installs compass webserver
npm install bower Installs npm bower package
bower install Install libs as per bower.json
grunt serve Run the project
grunt build Create a Deployable

15. Play with Application
• grunt serve – starts the project
• Add some libraries to bower and verify
• grunt build – build the compiled version of
project
DONE!! READY TO DEPLOY ON SERVER

16. ServerSide Deploy Steps
Deploy the compiled clientside code to Server, here we have an
example of a nodejs server
• Step1 - Get the Server Side Project
$ Git clone https://github.com/makrand-bkar/hapiFileServer.git
• Step2 – Run the Project as per readme.md file
• Step3 – Copy dist folder to public folder
• Step4 – Test the application by visiting
Localhost:8001/public/index.html

17. Reference Links
•http://yeoman.io/codelab/setup.html
•https://github.com/makrand-
bkar/hapiFileServer

18. Bootstrapping Angular With
Yeoman / Bower / Grunt
Mak Bhatamrekar
github :http://github.com/makrand-bkar
twitter : mak-bkar
url : www.careerinjava.com
http://meetup.com/my-ajcp
Atlanta Java Concept Pros