Bootstrapping angular js with bower grunt yeoman
Download as PPT, PDF0 likes1,136 views
The document discusses how to bootstrap Angular applications using Yeoman, Bower, and Grunt. It provides an overview of each tool, including that Yeoman generates project structure and templates, Bower manages frontend package dependencies, and Grunt automates tasks. The document then demonstrates setting up a sample project with these tools, installing dependencies, running development servers, and deploying the built code.
Bootstrapping angular js with bower grunt yeoman
- 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..
- 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
- 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