{"id":3647,"date":"2015-04-02T22:39:13","date_gmt":"2015-04-02T22:39:13","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3647"},"modified":"2015-04-02T22:39:13","modified_gmt":"2015-04-02T22:39:13","slug":"angularjs-workshop-notes","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/angularjs-workshop-notes\/","title":{"rendered":"AngularJS Workshop Notes"},"content":{"rendered":"<ul>\n<li class=\"p1\">Check if Karma is installed globally\n<pre>npm list -g --depth=0<\/pre>\n<\/li>\n<li class=\"p1\">The Master\/Detail View paradigm\u00a0is the most common real-world application for MV* frameworks<\/li>\n<li class=\"p1\">The organization of your code should show intent and be self-documenting\u2026\n<ul>\n<li class=\"p1\">node_modules<\/li>\n<li class=\"p1\">src (project files \/ root \u2026 includes index.html and favicon.ico)\n<ul>\n<li class=\"p1\">\u00a0app\n<ul class=\"ul3\">\n<li class=\"li1\">individual app\n<ul class=\"ul3\">\n<li class=\"li1\">JS files for controllers, templates, etc.<\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\">main (main screen \/ ui)<\/li>\n<li class=\"li1\">common (shared across features)\n<ul class=\"ul3\">\n<li class=\"li1\">models<\/li>\n<li class=\"li1\">services<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\">assets<\/li>\n<li class=\"li1\">vendor (libraries)<\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\">test<\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\"><strong>Routes<\/strong> allow us to directly navigate to a specific state within our app. \u00a0ngRoute is fine for simple routing, but <strong>ui-router<\/strong> is exponentially more powerful, turning your app into a state machine<\/li>\n<li class=\"li1\">Instantiate app on HTML tag (bootstrapping) \u2026 <span class=\"code\">&lt;html ng-app=\u201cmyMainAppName\u201d&gt;<\/span><\/li>\n<li class=\"li1\">If you need something from your state to persist on route change then you need to inject it into your model or service<\/li>\n<li class=\"li1\"><strong>Services<\/strong> persist through the life-cycle of app. \u00a0Services are shared between routes. \u00a0Service \u2026 then inject into controller.<\/li>\n<li class=\"li1\">Use LocalStorage to save states in case of page refresh. (Angular Storage library)<\/li>\n<li class=\"li1\">Views are the DOM after\u00a0it has been compiled by Angular<\/li>\n<li class=\"li1\"><b>Services<\/b>\u00a0can control services. Services are essentially the Model. Services provide common functionality across your entire app. \u00a0Keep controllers skinny so your models can be fat. \u00a0You can start in a controller and then promote to a Model as needed. .factory() method is a way of creating a service.<\/li>\n<li class=\"li1\"><b>Promises<\/b>\u00a0are like beepers at restaraunts. \u00a0They allow us to perform asynchronous operations. \u00a0Their the inverse of callbacks. \u00a0Three main methods for promises are .then, .catch, and .finally. \u00a0You can control promises with the $q service.<\/li>\n<li class=\"li1\"><b>$http service<\/b>\u00a0\u2026 The $http service enables communication with remote servers over the HTTP protocol. \u00a0It has convenience methods that are modeled after the RESTful verbs (PUT, etc.). This is very convenient! \u00a0The $http service is built on top of the promise api.<\/li>\n<li class=\"li1\"><b>Directives<\/b>\u00a0allow us to express custom functionality through custom HTML tags and attributes. \u00a0Directives essentially take semantic markup to a whole new level. It allows us to turn our HTML into a DSL (Domain Specific Language). \u00a0Directives are very powerful but can be overwhelming to learn.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Check if Karma is installed globally npm list -g &#8211;depth=0 The Master\/Detail View paradigm\u00a0is the most common real-world application for MV* frameworks The organization of your code should show intent and be self-documenting\u2026 node_modules src (project files \/ root \u2026 includes index.html and favicon.ico) \u00a0app individual app JS files for controllers, templates, etc. main (main [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[9,27],"class_list":["post-3647","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=3647"}],"version-history":[{"count":4,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3647\/revisions"}],"predecessor-version":[{"id":3651,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3647\/revisions\/3651"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=3647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=3647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=3647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}