Bootstrapping Angular With Yeoman / Bower / Grunt

Mak Bhatamrekar

http://github.com/makrand-bkar

AJCP

http://meetup.com/my-ajcpAtlanta Java Concept Pros

Prerequisites

• Node JS Installed – http://nodejs.org• RUBY >1.9.3 Installed -

http://rubyinstaller.org/• Git Installed - install msysgit

Hands On

• Angular Introduction• Yeoman• Deep Dive Yo• Deep Dive Grunt and Maven• Deep Dive Bower and Maven• Recap

Agenda

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.

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

Angular Stats

Million Dollar Question

Is ServerSide Framework Needed to– Develop a the Client Side Appln?– Deploy the ClientSide Appln ?

Client Side Development Needs

– Standardized Project Structure

– Tomcat Like Server– Dynamic Reloading– Ease of Managing Javascript

Libraries– Dynamic Reloading– Debugging

Introducing Yeoman

• Kickstarts new projects, prescribing best practices and tools

• It has 3 elements – YO / GRUNT / BOWER

• 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

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

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

SummaryCommand 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

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

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

Reference Links

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

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-ajcpAtlanta Java Concept Pros