{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/blog/2013/08/03/learn-angularjs-in-a-weekend",
    "result": {"data":{"site":{"siteMetadata":{"title":"your friend Joel's digital garden","description":"Articles and notes from a collaborator at egghead.io. Musings on software, business, and life from a skilled virtual assistant.","author":{"name":"Joel Hooks"},"keywords":["Video Blogger"]}},"mdx":{"excerpt":"AngularJS has a reputation for a steep learning curve. It's definitely complex, but follows the 80/20 rule.  20% of the features are what you will use 80% of the time . If you are new to AngularJS and have a weekend to study, there are some…","fields":{"github":"https://github.com/joelhooks/joelhooks-com/tree/master/content/legacy_blog/2013-08-03-learn-angularjs-in-a-weekend.markdown"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"layout\": \"post\",\n  \"title\": \"Learn AngularJS this Weekend\",\n  \"date\": \"2013-08-03T00:00:00.000Z\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"AngularJS has a reputation for a steep learning curve. It's definitely complex, but follows the 80/20 rule. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"20% of the features are what you will use 80% of the time\"), \". If you are new to AngularJS and have a weekend to study, there are some very high quality resources that will let you \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"start Monday with a strong working knowledge of AngularJS\"), \".\"), mdx(\"p\", null, \"Already know AngularJS? Feel free to skip ahead. These resources are excellent, and you're bound to learn something.\"), mdx(\"h2\", null, \"The Official Tutorial ~4hrs\"), mdx(\"p\", null, \"Start with \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.angularjs.org/tutorial\"\n  }, \"the official tutorial\"), \". It provides a very straight forward overview of AngularJS and walks step by step through building a simple app. When you're done, you should have \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"a solid understanding of the basics\"), \" and the vocabulary you will need to move on to the next step.\"), mdx(\"p\", null, \"The official tutorial is \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"very\"), \" well put together. Unfortunately it utilizes the angular-seed project as a template. The angular-seed project is fine for quickly throwing together a working AngularJS app, but it doesn't provide a structure that scales well in a production application.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Don't use the angular-seed to start your real projects!\"), \" It's a learning tool only.\"), mdx(\"h2\", null, \"Kickass (\", mdx(\"strong\", {\n    parentName: \"h2\"\n  }, \"free!\"), \") Video Tutorials on Egghead.io ~3hrs\"), mdx(\"div\", {\n    style: {\n      \"cssFloat\": \"left\",\n      \"padding\": \"10px\"\n    }\n  }, mdx(\"a\", {\n    className: \"nofancybox\",\n    href: \"https://egghead.io\"\n  }, mdx(\"div\", {\n    style: {\n      \"height\": \"191px\",\n      \"width\": \"150px\",\n      \"backgroundImage\": \"url(./images/egghead_logo.png)\"\n    }\n  }))), \"You've done the tutorial, and should have a good grasp of the basics. Your next stop is John Lindquist's [egghead.io for free AngularJS videos](https://www.egghead.io/). This series of bite-sized videos will deliver a ton of great information. John has gone through almost all of the \\\"hard\\\" concepts, and presented them in an easy to understand way.\", mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"All\"), \" of the videos are great, but the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"series on directives is extra fantastic\"), \". Transclusion? No problem. Even after using AngularJS for over a year, I was able to solidify some of the concepts that were confusing for me.\"), mdx(\"p\", null, \"Watch them all and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"take some notes\"), \". When you come out of the other side your AngularJS-fu will be starting to take shape.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"500px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/063c94b0f338b331de635e75f523135f/41099/lemonade.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMFAgT/xAAXAQADAQAAAAAAAAAAAAAAAAABAgME/9oADAMBAAIQAxAAAAHWzb3znFdHW3hErAWn/8QAHRAAAgEEAwAAAAAAAAAAAAAAAgMBAAQRExIhMf/aAAgBAQABBQLwWbIabT5Cc4nuGICCIsUy4YJ7mV//xAAZEQACAwEAAAAAAAAAAAAAAAAAAgEQITH/2gAIAQMBAT8BZTSeV//EABkRAQACAwAAAAAAAAAAAAAAAAEAAhASIv/aAAgBAgEBPwFtsQYHbj//xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIRECEyQWH/2gAIAQEABj8CPGaoVlY6HFS0cj//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMUFx/9oACAEBAAE/IWja15EjvhmQzLAyNfk9Z2OTAjGBQLlGINci3xk//9oADAMBAAIAAwAAABC41wH/xAAYEQEBAQEBAAAAAAAAAAAAAAABABEhMf/aAAgBAwEBPxBHkGbztb//xAAYEQEBAAMAAAAAAAAAAAAAAAABABEhUf/aAAgBAgEBPxAeFoInIRf/xAAdEAEAAgICAwAAAAAAAAAAAAABABEhMUFxUWGR/9oACAEBAAE/EFUqADywMEVNOj7HDxxade4wDalGclRi7McGSW1DUwZA5dvcW0QCihRyxylOiwup/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"ahhhhhhh Learning AngularJS is refreshing - Photo Credit: chotda\",\n    \"title\": \"ahhhhhhh Learning AngularJS is refreshing - Photo Credit: chotda\",\n    \"src\": \"/static/063c94b0f338b331de635e75f523135f/41099/lemonade.jpg\",\n    \"srcSet\": [\"/static/063c94b0f338b331de635e75f523135f/8356d/lemonade.jpg 259w\", \"/static/063c94b0f338b331de635e75f523135f/41099/lemonade.jpg 500w\"],\n    \"sizes\": \"(max-width: 500px) 100vw, 500px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"That will take you through Saturday evening, and you deserve a rest. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Send John a donation for his hard work\"), \", pour a tall glass of lemonade, and relax as you reflect on the your new-found knowledge of an awesome framework. Nice work!\"), mdx(\"h2\", null, \"Things get real with angular-app ~4hrs\"), mdx(\"p\", null, \"Sunday morning.\"), mdx(\"p\", null, \"At this point you should understand the core AngularJS concepts and terminology. Time to brew a fresh pot and get to work.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"500px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/045521e53c00959246e3a65eed14b98f/41099/french_press.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAQBAgMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAYqfMpjkysl7C7A//8QAHBAAAwABBQAAAAAAAAAAAAAAAAECAwQSEyJB/9oACAEBAAEFAo3Mz6eYxzblKjk6nqEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAGxAAAgIDAQAAAAAAAAAAAAAAABEBIRAgIjH/2gAIAQEABj8CTHE9CTwqs90//8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERITGBQf/aAAgBAQABPyGVL5sExNu+ItD+hicw1xLqKGB8Govhpbsw/9oADAMBAAIAAwAAABC7NwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAXEQEAAwAAAAAAAAAAAAAAAAABESAh/9oACAECAQE/EIDaf//EABwQAQEAAgIDAAAAAAAAAAAAAAERADEhUUGBkf/aAAgBAQABPxApKWUAe3IOQ18eusq2Xd661i5VdiUy6+gH1N4tJRNj4+5ztjU04PExUAVQpWGf/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"AngularJS Fuel - Photo Credit: Bjørn Giesenbauer\",\n    \"title\": \"AngularJS Fuel - Photo Credit: Bjørn Giesenbauer\",\n    \"src\": \"/static/045521e53c00959246e3a65eed14b98f/41099/french_press.jpg\",\n    \"srcSet\": [\"/static/045521e53c00959246e3a65eed14b98f/8356d/french_press.jpg 259w\", \"/static/045521e53c00959246e3a65eed14b98f/41099/french_press.jpg 500w\"],\n    \"sizes\": \"(max-width: 500px) 100vw, 500px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"If you are anything like me, by now you're ready to dig into a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"proper example application\"), \". Luckily we have the excellent \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/angular-app/angular-app\"\n  }, \"angular-app\"), \" project to explore. This non-trivial example focuses on best practices for:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Folder structure (important!)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Modules (very important!)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Testing\"), \" (super important!)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"RESTful services\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navigation\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Security\")), mdx(\"p\", null, \"angular-app combines a solid AngularJS UI with a node.js backend. It is non-trivial, and studying this app will give you a realistic sense of a proper AngularJS app.\"), mdx(\"p\", null, \"One killer aspect of this example is the build system. It \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"demonstrates a fantastic Grunt.js build with an integrated Karma Test Runner\"), \".\"), mdx(\"p\", null, \"Peter Bacon Darwin and Pewel Kozlowski have done a great job. Front to back, this project is worth your study time. You could spend several days investigating the nooks and crannies of this example, but we've only got the weekend. Set angular-app to the side for now, but keep it handy. It will serve as valuable reference in the future.\"), mdx(\"h2\", null, \"Start building your own app with ng-boilerplate ~4hrs\"), mdx(\"p\", null, \"At this point you should have a solid knowledge to start building something. The \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/joshdmiller/ng-boilerplate\"\n  }, \"ng-boilerplate\"), \" project will get you started. \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"This is the seed you should use\"), \". It takes the lessons you learned studying angular-app, and provides the foundation upon which to build something substantial.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"500px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/62b6c373b411df45672ae715d3473252/41099/engine.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"79.15057915057915%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAQABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABfwSiVYuH/8QAGhAAAgMBAQAAAAAAAAAAAAAAAQIAAwQSE//aAAgBAQABBQJtaiC97IdN08NKwVlzwgn/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAfEAACAQMFAQAAAAAAAAAAAAAAAQIRYXEhIzEyM1H/2gAIAQEABj8C0TZJpqNLHoz7g3Kwd1ydZvB//8QAHBAAAgMAAwEAAAAAAAAAAAAAAAERITFBcZHR/9oACAEBAAE/Ifl4KIn0rDbw6Hl9hkw44BCV2LaUf//aAAwDAQACAAMAAAAQcy//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAfEAEAAgEDBQAAAAAAAAAAAAABESEAMVFhQXGRscH/2gAIAQEAAT8QqUeYh9xwtaJS6F9sdqraAeMY1ncX2ZLAsytFnHGAtbkJbYvpn//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"a strong engine for your AngularJS app\",\n    \"title\": \"a strong engine for your AngularJS app\",\n    \"src\": \"/static/62b6c373b411df45672ae715d3473252/41099/engine.jpg\",\n    \"srcSet\": [\"/static/62b6c373b411df45672ae715d3473252/8356d/engine.jpg 259w\", \"/static/62b6c373b411df45672ae715d3473252/41099/engine.jpg 500w\"],\n    \"sizes\": \"(max-width: 500px) 100vw, 500px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"ng-boilerplate, unlike the angular-seed project, is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"suitable as a starting point for building a production app\"), \". It's a solid shortcut, and worth study.\"), mdx(\"p\", null, \"Spend some time getting to know ng-boilerplate through its excellent README. The READMEs don't stop at the root of the project. Josh has sprinkled them throughout the project to help you understand what is going on.\"), mdx(\"p\", null, \"Once you have your head around ng-boilerplate, you can delete all of the placeholder views, and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"start trying things out for yourself\"), \".\"), mdx(\"p\", null, \"Need some ideas?\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"PRISM:Refract - NSA Dashboard\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"FlySwatter - A simple bug tracker\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"GeekTalk - Multiroom Chat\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"OctoStats - Ranked Github Users with Clever D3 Visuals\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"1000words - Writing app that sets target of 1000 words per day and graphs your success\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"GetItDone - Yup, a todo list.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"...?\")), mdx(\"p\", null, \"The sky is the limit. Using the reference material you've studied all weekend, combined with the official AngularJS docs, you should be well on the way to AngularJS mastery. You'll be over the hump, having defeated that infamous curve. Build something cool and tell me about it.\"), mdx(\"p\", null, \"If you've hit any road blocks, \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=joelhooks@gmail.com&su=Hello,%can%25I%20get%20some%20help?\"\n  }, \"send me an email\"), \" and I'll help you out.\"), mdx(\"h2\", null, \"Congrats! You've leveled up.\"), mdx(\"p\", null, \"The fun isn't over. There is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"plenty left to learn\"), \". The weekend \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"is\"), \" over though, and you've worked hard. Take a break and relax.\"), mdx(\"p\", null, \"You've earned it.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1582256014a4e00908103291b6a837d6/066f9/yellow_belt.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"125.09652509652508%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAwL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABh7MuxDOSnqK2hDAP/8QAHxAAAQMDBQAAAAAAAAAAAAAAAQIDBAUQEgARISMz/9oACAEBAAEFAseuPy8sbKipDqG2ksAknUJOUmcvG1N9ajb/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAgEAABAgUFAAAAAAAAAAAAAAABAAIDEBEhYRIxQVFy/9oACAEBAAY/AteaICgNZPhcm6e89K6bi6AOxk7ymS//xAAfEAACAQQCAwAAAAAAAAAAAAABEQAQMUFRIWGBsfD/2gAIAQEAAT8hfogOjgsOPwkIS4NqccTG+gMW6BQyFmKNOIJ43j3T5u5b50//2gAMAwEAAgADAAAAEBwAAP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8QH//EABcRAQADAAAAAAAAAAAAAAAAAAABEDH/2gAIAQIBAT8QQ2v/xAAiEAEBAAICAQMFAAAAAAAAAAABEQAhMWEQQXHwgZGhscH/2gAIAQEAAT8Q4xu+Thl+e2a8NBIE2+5MI/gIdJcOyIv+hPR3z3gpNsiSjT9bxVqpnU0EMamgwsoHH3TN1ksOQJXVrx8Lpn5X8+P/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"You've Leveled up your AngularJS! - Photo Credit: Cayusa\",\n    \"title\": \"You've Leveled up your AngularJS! - Photo Credit: Cayusa\",\n    \"src\": \"/static/1582256014a4e00908103291b6a837d6/066f9/yellow_belt.jpg\",\n    \"srcSet\": [\"/static/1582256014a4e00908103291b6a837d6/8356d/yellow_belt.jpg 259w\", \"/static/1582256014a4e00908103291b6a837d6/066f9/yellow_belt.jpg 400w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"P.S. Initial project setup is one of the most critical factors to a project's success. Using templates is a great way to get a head start, but using a template without solid understanding of all the moving parts can be dangerous. I'm working on \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"step-by-step guide to building your own best practices AngularJS project template\"), \". If you want to get notified of its progress, as well as launch-day discounts, sign up to my newsletter below.\"), mdx(\"p\", null, \"You might also enjoy: \", mdx(\"a\", {\n    href: \"https://joelhooks.com/blog/2013/05/22/lessons-learned-kicking-off-an-angularjs-project/\"\n  }, mdx(\"strong\", null, \"Lessons Learned: A Year with a Large AngularJS Project\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Learn AngularJS this Weekend","date":"August 03, 2013","banner":null,"slug":null,"keywords":null}}},"pageContext":{"id":"5059a58c-5921-5c76-bdeb-745112675dee","prev":{"id":"7a408dbc-c5e8-51bc-9c2a-c3ac1af91f00","parent":{"name":"2013-08-18-configuring-dependency-injection-in-angularjs","sourceInstanceName":"legacy"},"excerpt":"Dependency injection is the act of supplying values or object instances (dependencies) to target objects\nfrom outside of the target object. In many (most?) cases this is automated\nby a framework, such as AngularJS. This means that a given target…","fields":{"title":"Configuring Dependency Injection in AngularJS","slug":"blog/2013/08/18/configuring-dependency-injection-in-angularjs","date":"2013-08-18T00:00:00.000Z"}},"next":{"id":"f5ef54ec-a963-578e-b926-4ff1ab6100df","parent":{"name":"2013-07-29-using-angularjs-stop-using-jquery-as-a-crutch","sourceInstanceName":"legacy"},"excerpt":"Have you ever heard (or said!) this: \"Directives? That's where the jQuery goes.\" I definitely have. In an effort to better understand\n @joshdmiller 's excellent\n ng-boilerplate , I\nwanted to understand its dependency on Boostrap. More specifically, I…","fields":{"title":"Using AngularJS? Stop using jQuery as a crutch.","slug":"blog/2013/07/27/using-angularjs-stop-using-jquery-as-a-crutch","date":"2013-07-27T00:00:00.000Z"}}}},
    "staticQueryHashes": ["1045846374"]}