{"id":1114,"date":"2017-10-15T05:18:31","date_gmt":"2017-10-15T02:18:31","guid":{"rendered":"https:\/\/community.virtono.com\/?p=1114"},"modified":"2020-06-10T16:53:12","modified_gmt":"2020-06-10T13:53:12","slug":"bower","status":"publish","type":"post","link":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/bower\/","title":{"rendered":"Bower"},"content":{"rendered":"<header class=\"entry-header\">\n<h3 id=\"seriesName\">Series:\u00a0Introduction to the MEAN Stack<\/h3>\n<ul id=\"seriesList\">\n<li><a href=\"https:\/\/wp.me\/p7ISfL-hs\" target=\"_blank\" rel=\"noopener\">Part 1: Definition of the MEAN stack<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-hz\" target=\"_blank\" rel=\"noopener\">Part 2:\u00a0Setup of the MEAN stack<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-hC\" target=\"_blank\" rel=\"noopener\">Part 3:\u00a0Node.js<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-npm\" target=\"_blank\" rel=\"noopener\">Part 4:\u00a0npm<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-connect\" target=\"_blank\" rel=\"noopener\">Part 5:\u00a0Connect<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-express\" target=\"_blank\" rel=\"noopener\">Part 6:\u00a0Express<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-mongodb\" target=\"_blank\" rel=\"noopener\">Part 7:\u00a0MongoDB<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-mongodb\" target=\"_blank\" rel=\"noopener\">Part 8:\u00a0Mongoose<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-rest\" target=\"_blank\" rel=\"noopener\">Part 9:\u00a0REST<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-baucis\" target=\"_blank\" rel=\"noopener\">Part 10:\u00a0Baucis<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-bower\" target=\"_blank\" rel=\"noopener\">Part 11:\u00a0Bower<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-i1\" target=\"_blank\" rel=\"noopener\">Part 12:\u00a0AngularJS<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-i4\" target=\"_blank\" rel=\"noopener\">Part 13:\u00a0Restangular<\/a><\/li>\n<\/ul>\n<\/header>\n<div class=\"entry-content\">\n<p>Before we develop a web application with AngularJS, I introduce you to\u00a0Bower\u00a0in this article\u00a0.\u00a0This tool is required to manage client-side frameworks.<span id=\"more-3647\"><\/span><\/p>\n<p>Bower is a package manager designed by Twitter for client-side modules.\u00a0However, it is itself a node module, which can be easily installed via npm.\u00a0Since we want to use Bower as a command line tool, we will install it globally:<\/p>\n<div>\n<div class=\"codecolorer-container powershell default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<\/div>\n<\/td>\n<td>\n<div class=\"powershell codecolorer\">$ npm install\u00a0<span class=\"sy0\">&#8211;<\/span>\u00a0g bower<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>The latest version of Bower is at the time of writing 1.2.7.<\/p>\n<p>The use of Bower is very similar to npm.\u00a0With the following command you install AngularJS:<\/p>\n<div>\n<div class=\"codecolorer-container powershell default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<\/div>\n<\/td>\n<td>\n<div class=\"powershell codecolorer\">$ bower install angular<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Afterwards, a folder is\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">bower_components<\/span><\/code>\u00a0created in which there is another folder named\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">angular<\/span><\/code>\u00a0.\u00a0This includes the latest stable version of AngularJS in a single JavaScript file and once again the same file in minified form.<\/p>\n<p>Bower has some general problems that should not be mentioned.\u00a0It is younger than npm, inconsistent and not so widespread.\u00a0While you are only downloading the finished JavaScript file via Bower, you would download the complete development folder with all source and build files at the framework Bootstrap.\u00a0The Bower community is disagreeed about whether or not a Bower component should contain development files (build, tests, etc.).\u00a0This problem can be solved manually because Bower uses Git internally and any Git repository can be installed via Bower.\u00a0Thus, if necessary, you can always download the complete project folder.\u00a0You should keep this inconsistent behavior in the back of your head.\u00a0For us this is not relevant,<\/p>\n<p>Similar to\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">package.json<\/span><\/code>\u00a0npm, Bower offers\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">bower.json<\/span><\/code>\u00a0the possibility to define the dependencies of a project to other modules declaratively.\u00a0We do not need this file for our example.\u00a0Here\u00a0you can read how to\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">bower.json<\/span><\/code>\u00a0use the.\u00a0It is also\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">package.json<\/span><\/code>\u00a0relevant when you work with other developers (so they can see the dependencies to other modules at a glance) and if you want to publish your project.<\/p>\n<p>The uninstallation of a Bower component takes place analogously to npm with the following command:<\/p>\n<div>\n<div class=\"codecolorer-container powershell default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<\/div>\n<\/td>\n<td>\n<div class=\"powershell codecolorer\">$ bower uninstall angular<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>A global installation of a component is not possible with Bower.<\/p>\n<p>Since we now know how to use Bower, we can devote ourselves to the next article AngularJS.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular Before we develop a web application with AngularJS, I introduce<\/p>\n","protected":false},"author":4,"featured_media":1115,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5,3],"tags":[],"class_list":["post-1114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase","category-tutorial-how-to"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/bower-logo.png?fit=1024%2C900&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/s7ISfL-bower","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1089,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/setup-of-the-mean-stack\/","url_meta":{"origin":1114,"position":0},"title":"Setup of the MEAN stack","author":"Daniel Draga","date":"October 9, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular In this article, we will lay out the basics for\u2026","rel":"","context":"In &quot;Tutorials&quot;","block_context":{"text":"Tutorials","link":"https:\/\/www.virtono.com\/community\/category\/tutorial-how-to\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1082,"url":"https:\/\/www.virtono.com\/community\/knowledgebase\/definition-of-the-mean-stack\/","url_meta":{"origin":1114,"position":1},"title":"Definition of the MEAN stack","author":"Shreyash Sharma","date":"October 9, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular In a new article series, I would like to\u00a0offer\u00a0you an\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1095,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/npm\/","url_meta":{"origin":1114,"position":2},"title":"npm","author":"Daniel Draga","date":"October 10, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular npm\u00a0\u00a0is a package manager for managing modules.\u00a0That is, it makes\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1105,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/mongoose\/","url_meta":{"origin":1114,"position":3},"title":"Mongoose","author":"Shreyash Sharma","date":"October 12, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular Mongoose\u00a0is a framework which is based on the\u00a0native MongoDB driver\u00a0and\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/mongoose.png?fit=370%2C200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1092,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/node-js\/","url_meta":{"origin":1114,"position":4},"title":"Node.js","author":"Daniel Draga","date":"October 10, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular In this article, I tell you what\u00a0Node.js is\u00a0exactly and what\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/nodejs-new-pantone-black.png?fit=1200%2C735&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/nodejs-new-pantone-black.png?fit=1200%2C735&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/nodejs-new-pantone-black.png?fit=1200%2C735&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/nodejs-new-pantone-black.png?fit=1200%2C735&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/nodejs-new-pantone-black.png?fit=1200%2C735&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1117,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/angularjs\/","url_meta":{"origin":1114,"position":5},"title":"AngularJS","author":"Shreyash Sharma","date":"October 15, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular In today's article we finally enter the client side of\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/angular_js.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/angular_js.jpg?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/angular_js.jpg?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/angular_js.jpg?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/angular_js.jpg?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/comments?post=1114"}],"version-history":[{"count":2,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1183,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/media\/1115"}],"wp:attachment":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}