Skip to content

Instantly share code, notes, and snippets.

@lkptrzk
Last active June 13, 2017 14:01
Show Gist options
  • Save lkptrzk/9193859 to your computer and use it in GitHub Desktop.
Save lkptrzk/9193859 to your computer and use it in GitHub Desktop.
scrape egghead lessons
var request = require('request')
var cheerio = require('cheerio')
function collapse (text) {
return (
text
.replace(/\\t/g, '')
.replace(/\\r/g, '')
.replace(/\\n/g, '')
.replace(/\s\s*/g, ' ')
.trim()
)
}
function scrape ($) {
var json = { lessons: [] }
$('#lesson-thumbs').find('.thumbs').each(function () {
var $this = $(this)
json.lessons.push({
name: collapse($this.find('.lesson-header .title').text()),
href: $this.find('a').attr('href'),
summary: collapse($this.find('.lesson-summary p').text().trim())
})
})
return json
}
request('https://egghead.io/lessons', function (err, res, body) {
if (err) throw err
var $ = cheerio.load(body)
var json = scrape($)
console.log(JSON.stringify(json, null, 2))
})
{
"lessons": [
{
"name": "117. transferPropsTo (3:30)",
"href": "/lessons/react-transferpropsto",
"summary": "the transferPropsTo method lets you easily push properties into your components to easily customize attributes."
},
{
"name": "116. Add Caching to the Model Base Class (6:58)",
"href": "/lessons/angularjs-add-caching-to-the-model-base-class",
"summary": "In the previous lessons we created a base class and looked at a caching mechanism for our models. In this lesson we will expand on that concept by test driving the addition of caching to our model base class, as well as some initial core functionality. This is advanced subject matter, and will require study of the code as well as watching the video."
},
{
"name": "115. Create a Scope Decorator (4:30)",
"href": "/lessons/angularjs-create-a-scope-decorator",
"summary": "Using Aspect Oriented Programming (AOP) techniques, you can easily decorate AngularJS controller methods to add additional behaviors. This can be useful for handling analytics and other common concerns in a typical application."
},
{
"name": "114. Accessing Child Properties (1:46)",
"href": "/lessons/react-accessing-child-properties",
"summary": "When you're building your React components, you'll probably want to access child properties of the markup."
},
{
"name": "113. Model Caching (4:34)",
"href": "/lessons/angularjs-model-caching",
"summary": "Build a simple caching mechanism for your AngularJS data models."
},
{
"name": "112. File Uploads (7:42)",
"href": "/lessons/angularjs-file-uploads",
"summary": "The file input type is missing from the ng-model directive, so you need to \"roll your own\" solution for file uploads with AngularJS."
},
{
"name": "111. Directive with Transcluded Elements (4:46)",
"href": "/lessons/angularjs-directive-with-transcluded-elements",
"summary": "Create a wrapWith directive using advanced transclusion techniques."
},
{
"name": "110. Create a Model Base Class (3:12)",
"href": "/lessons/angularjs-create-a-model-base-class",
"summary": "You're going to test drive the creation of a robust model layer for an AngularJS application. To get started, we need a solid base class to encapsulate common functionality. In this lesson you'll use Javascript's prototypical inheritance to create the model base class."
},
{
"name": "109. Using Refs to Access Components (4:40)",
"href": "/lessons/react-using-refs-to-access-components",
"summary": "When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref."
},
{
"name": "108. Build a Debug Directive (4:00)",
"href": "/lessons/angularjs-build-a-debug-directive",
"summary": "Explore some interesting techniques with AngularJS directives to create a debug directive using termination, priority, and the $compile service."
},
{
"name": "107. Owner Ownee Relationship (1:42)",
"href": "/lessons/react-owner-ownee-relationship",
"summary": "The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship."
},
{
"name": "106. State Basics (1:55)",
"href": "/lessons/react-state-basics",
"summary": "State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components."
},
{
"name": "105. Introduction to Properties (2:36)",
"href": "/lessons/react-introduction-to-properties",
"summary": "This lesson will teach you the basics of setting properties in your React components."
},
{
"name": "104. The Render Method (1:44)",
"href": "/lessons/react-the-render-method",
"summary": "The render method is where the magic happens in your React components. This lesson will introduce you to this method and its use."
},
{
"name": "103. HTML with ngSanitize and SCE (3:02)",
"href": "/lessons/angularjs-html-snippets-with-ngsanitize-and-sce",
"summary": "Safely render arbitrary HTML snippets by using ngSanitize and $sce."
},
{
"name": "102. Hello World - First Component (1:55)",
"href": "/lessons/react-hello-world-first-component",
"summary": "React is a relative new-comer to the Javascript framework scene, but backed by Facebook it is seeing a lot of traction. This is the first lesson in a series of lessons that take a look at the core fundamentals of UI development with React. Hello world."
},
{
"name": "101. Accessing Services from Console (2:39)",
"href": "/lessons/angularjs-accessing-services-from-the-chrome-console",
"summary": "Using the Chrome console, you can access your AngularJS injectable services. This is down and dirty debugging, and can be a lifesaver in troubling times."
},
{
"name": "100. Margins (1:39)",
"href": "/lessons/d3-margins",
"summary": "This lesson will show you how to add margins to your D3 charts to give them the elbow room they deserve."
},
{
"name": "99. Accessing Scope from The Console (1:40)",
"href": "/lessons/angularjs-accessing-scope-from-the-console",
"summary": "The Chrome Dev Tools console is an amazing tool. In this lesson you'll learn how to use the console to programmatically grab scopes in your AngularJS application."
},
{
"name": "98. Custom Jasmine Matchers (1:30)",
"href": "/lessons/angularjs-custom-jasmine-matchers",
"summary": "Custom Jasmine Matchers are a great way to keep your AngularJS Unit Tests clean and tidy. We want to make expectations readable and express the intent of the test. Custom matchers help to accomplish this."
},
{
"name": "97. Using $resource for Data Models (5:29)",
"href": "/lessons/angularjs-using-resource-for-data-models",
"summary": "AngularJS's $resource service allows you to create convenience methods for dealing with typical RESTful APIs. In this video, Brett will show you the basics of using $resource, as well as talking about some of the drawbacks with using this service for your data models."
},
{
"name": "96. Quantitative Scales (3:59)",
"href": "/lessons/d3-quantitative-scales",
"summary": "In D3 quantitative scales allow you do easily divide aspects of your chart evenly based on the dataset. In this lesson, Ben will continue to show you the variety of scaling options available in D3."
},
{
"name": "95. Application Wiring: JQuery vs AngularJS (5:08)",
"href": "/lessons/angularjs-application-wiring-jquery-vs-angularjs",
"summary": "You can build single page applications with JQuery and/or AngularJS. In this lesson, John will look at some of the fundamental differences between the two approaches."
},
{
"name": "94. Testing With Protractor Page Objects (3:28)",
"href": "/lessons/angularjs-testing-with-protractor-page-objects",
"summary": "Protractor Page Objects are a recommended for testing your AngularJS applications. Page Objects abstract the interaction between the browser and your functional tests, resulting in much cleaner tests."
},
{
"name": "93. $interval (1:36)",
"href": "/lessons/angularjs-interval",
"summary": "$interval provides an excellent service for timed operations in your AngularJS apps. It has the advantage over setInterval in \"normal\" Javascript in that it is aware of Angular's view cycles, as well as being mockable for unit tests. Additionally, it returns a promise and provides a lot of flexibility."
},
{
"name": "92. Tips & Tricks (7:16)",
"href": "/lessons/webstorm-tips-tricks",
"summary": "John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice."
},
{
"name": "91. Inject Jasmine Spies With $provide (1:49)",
"href": "/lessons/angularjs-inject-jasmine-spies-with-provide",
"summary": "One of the beautiful things about dependency injection in your AngularJS apps is the ability to replace dependencies in your unit tests. In this lesson Trevor looks at how to configure Jasmine spies as injectable replacements for dependencies for testing."
},
{
"name": "90. $q.all (2:35)",
"href": "/lessons/angularjs-q-all",
"summary": "Orchestrating the handling of multiple promises in AngularJS is simple if you take advantage of $q.all. Using $q.all will take your promises, wait until they have all resolved and return the result of all the promises as an ordered array."
},
{
"name": "89. Test Simple Binding With Protractor (2:24)",
"href": "/lessons/angularjs-test-simple-binding-with-protractor",
"summary": "Protractor is built to interact with AngularJS applications. In this lesson, we will take a look at how Protractor interacts with the application using its element and finder functions."
},
{
"name": "88. Color Scales (3:39)",
"href": "/lessons/d3-color-scales",
"summary": "In this addition to Ben's series of lessons on D3, you'll explore the use of color scales in your D3 charts."
},
{
"name": "87. Accessing Data in HTML (8:05)",
"href": "/lessons/angularjs-accessing-data-in-html",
"summary": "In this lesson, John will take you from bad practices to good practices, as he explores how to bring data into your HTML templates with AngularJS. You'll go from attaching data directly to the $rootScope in your Angular module run block (bad!) all the way through using promises to asynchronously assign data to your controller and access it with \"controller-as\" syntax (much better!)."
},
{
"name": "86. Testing Controllers With Dependencies (3:40)",
"href": "/lessons/angularjs-testing-controllers-with-dependencies",
"summary": "In this lesson Trevor looks at testing AngularJS controllers with scope inheritance with Jasmine and test spies."
},
{
"name": "85. Getting Started With Protractor (3:25)",
"href": "/lessons/angularjs-getting-started-with-protractor",
"summary": "Protractor is an end-to-end testing library for AngularJS. This video lesson will walk through getting Protractor installed and writing your first test."
},
{
"name": "84. ui-router Named Views (6:38)",
"href": "/lessons/angularjs-ui-router-named-views",
"summary": "The ui-router library for AngularJS provides the ability to name views within your application. This is useful for dividing up your application into sections, and changing the content of a section based on the current state."
},
{
"name": "83. transformRequest (6:16)",
"href": "/lessons/angularjs-transformrequest",
"summary": "In this lesson Trevor will show you how to transform your requests using AngularJS's $http service's transformRequest option and TDD. This allows you to keep your applications domain clean when integrating with third party APIs."
},
{
"name": "82. rangeBands (5:30)",
"href": "/lessons/d3-rangebands",
"summary": "Expanding on the concepts of dynamic scaling in D3, in this lesson Ben discusses the use of rangeBands to horizontally scale your D3 charts."
},
{
"name": "81. $provide.decorator (1:41)",
"href": "/lessons/angularjs-provide-decorator",
"summary": "In this lesson Brett will show you how to use $provide.decorator to cleanly add functionality to AngularJS services and keep your concerns wonderfully separated."
},
{
"name": "80. Chained Promises (7:07)",
"href": "/lessons/angularjs-chained-promises",
"summary": "Promises are a fantastic tool in AngularJS. Many times, as you start to chain them together, they become ugly and unwieldy. In this lesson, Thomas will show you an approach for breaking your chained promises down into a flat, clean, readable structure."
},
{
"name": "79. transformResponse (4:01)",
"href": "/lessons/angularjs-transformresponse",
"summary": "In his debut lesson, Trevor test drives the transformation of a response from an external REST service using the the transformResponse option of AngularJS's $http service."
},
{
"name": "78. Multitask (1:49)",
"href": "/lessons/gruntjs-multitask",
"summary": "Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds."
},
{
"name": "77. External Config (3:51)",
"href": "/lessons/gruntjs-external-config",
"summary": "In this lesson John will show you how to create a simple external config file for your GruntJS build."
},
{
"name": "76. d3.max (3:11)",
"href": "/lessons/d3-d3-max",
"summary": "In this lesson Ben shows you how to use d3.max to normalize your dataset visually within the specific bounds of a variable domain."
},
{
"name": "75. Uglify (1:41)",
"href": "/lessons/gruntjs-uglify",
"summary": "In this lesson John will show you how to start using Grunt Uglify to compress your javascript for production deployment."
},
{
"name": "74. Scaling Basics (4:21)",
"href": "/lessons/d3-scaling-basics",
"summary": "In this lesson Ben shows you the basics of dynamically scaling your charts in D3. Scaling is a deep concept, so this is the first video in a series that will cover this topic."
},
{
"name": "73. Design Pattern: Simple Mediator (1:23)",
"href": "/lessons/angularjs-design-patterns-simple-mediator",
"summary": "In this video Brett shows us how to create a simple mediator for cleanly separating concerns within your application. This is the first in a series that will build a robust, fully tested mediator for events in your AngularJS application."
},
{
"name": "72. $http (4:05)",
"href": "/lessons/angularjs-http",
"summary": "In this lesson, John covers the use of AngularJS's $http service for making requests and handling responses from external web services"
},
{
"name": "71. Basics of SVG (6:03)",
"href": "/lessons/d3-basics-of-svg",
"summary": "In this lesson, Ben guides you through converting your D3 bar chart from HTML elements into SVG."
},
{
"name": "70. Template (3:45)",
"href": "/lessons/gruntjs-template",
"summary": "GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure."
},
{
"name": "69. Watch (3:03)",
"href": "/lessons/gruntjs-watch",
"summary": "In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project."
},
{
"name": "68. Design Patterns: Mixin (4:50)",
"href": "/lessons/angularjs-design-patterns-mixin",
"summary": "AngularJS supports \"mixins\" with angular.extend, but this approach has some drawbacks. In this video Brett takes a look at a more robust approach to mixins inspired by the Ruby programming language."
},
{
"name": "67. Introduction to RequireJS (4:48)",
"href": "/lessons/requirejs-introduction-to-requirejs",
"summary": "RequireJS provides a clean way to load and manage dependencies for your Javascript applications. This video examines the first steps towards using RequireJS."
},
{
"name": "66. Get Started With D3 (2:44)",
"href": "/lessons/d3-get-started-with-d3",
"summary": "This is the first video in a series on D3 from Ben Clinkinbeard. D3 can be... dense, but Ben breaks down the bare essentials and will guide you to D3 mastery."
},
{
"name": "65. Introduction to Grunt (3:58)",
"href": "/lessons/gruntjs-introduction-to-grunt",
"summary": "In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm."
},
{
"name": "64. Testing a Controller (1:12)",
"href": "/lessons/angularjs-testing-a-controller",
"summary": "AngularJS provides helpers for convenient testing of your application. In this lesson you will learn how to test a basic controller with Jasmine and Angular."
},
{
"name": "63. Testing a Service (2:08)",
"href": "/lessons/angularjs-testing-a-service",
"summary": "Using Jasmine, this lesson will look at testing an AngularJS service."
},
{
"name": "62. Introduction to Karma (2:45)",
"href": "/lessons/unit-testing-introduction-to-karma",
"summary": "A quick tutorial covering installing Karma and running tests from the command line and Webstorm."
},
{
"name": "61. Speed Testing with WebStorm and Jasmine (1:20)",
"href": "/lessons/angularjs-speed-testing-with-webstorm-and-jasmine",
"summary": "In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the ddescriber plugin, as well as some alternative methods for Jasmine for selectively running your tests."
},
{
"name": "60. Testing Underscores (1:27)",
"href": "/lessons/angularjs-testing-underscores",
"summary": "AngularJS injectors understand aliased for core injectables such as $rootScope in unit tests. If you surround your injected object with underscores _$rootScope_ it will be understood and injected into your test by Angular. This allows you to use a local alias of the same name."
},
{
"name": "59. Unit Testing Directive Scope Binding (2:00)",
"href": "/lessons/angularjs-unit-testing-directive-scope-binding",
"summary": "Digging a little deeper into unit testing an AngularJS directive, this lesson looks at testing binding across multiple scopes."
},
{
"name": "58. Unit Testing Directive Scope (1:57)",
"href": "/lessons/angularjs-unit-testing-directive-scope",
"summary": "Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes."
},
{
"name": "57. Unit Testing a Directive (2:14)",
"href": "/lessons/angularjs-unit-testing-a-directive",
"summary": "In this lesson you will unit test a simple AngularJS directive"
},
{
"name": "56. Unit Testing \"Hello World\" (2:26)",
"href": "/lessons/angularjs-unit-testing-hello-world",
"summary": "This brief intro to unit testing with AngularJS takes a look at how to configure a test, compile an element, and access AngularJS within your tests."
},
{
"name": "55. No Custom Markup (1:39)",
"href": "/lessons/angularjs-with-no-custom-markup",
"summary": "Extending the semantics of HTML is one of the core features of AngularJS, however, you can use AngularJS without any custom markup."
},
{
"name": "54. Using angular.bootstrap to Initialize Your App (1:13)",
"href": "/lessons/angularjs-angular-bootstrap-app-init",
"summary": "In this lesson, John shows you how to use angular.bootstrap as an alternative approach to initializing your application without using ng-app."
},
{
"name": "53. Introduction to ui-router (4:35)",
"href": "/lessons/angularjs-introduction-ui-router",
"summary": "In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module."
},
{
"name": "52. Introduction to Bower (2:49)",
"href": "/lessons/bower-introduction-and-setup",
"summary": "Bower is a package manager for Javascript libraries that allows you to define, version, and retrieve your dependencies. In this tutorial, John gives a quick introduction to Bower and will show you how to get started."
},
{
"name": "51. angular.copy (3:09)",
"href": "/lessons/angularjs-angular-copy-for-deep-copy",
"summary": "In this episode John takes a look at angular.copy and how you can use it for non-destructive form editing. Instead of binding to a value directly, we make a deep copy of that object and bind to the copy for presentation. Updates to the data are then \"saved\" to the original object to persist changes."
},
{
"name": "50. Animating the Angular Way (5:53)",
"href": "/lessons/angularjs-animating-the-angular-way",
"summary": "In this episode John uses TweenMax to add animations to AngularJS. Instead of manipulating DOM directly in a controller, we will use an AngularJS directive to abstract that view logic cleanly using $animate."
},
{
"name": "49. Animating with JavaScript (3:45)",
"href": "/lessons/angularjs-animating-with-javascript",
"summary": "In this lesson John looks at how to integrate the popular TweenMax library with ngAnimate to get animation effects in an AngularJS application."
},
{
"name": "48. animation basics (3:52)",
"href": "/lessons/angularjs-animation-basics",
"summary": "Angular 1.2 introduces new animation functionality. This episode looks at the very basics of getting the animation module loaded and using it to create your first simple animation with CSS."
},
{
"name": "47. ng-repeat-start (1:26)",
"href": "/lessons/angularjs-ng-repeat-start",
"summary": "This short video tutorial looks at the ng-repeat-start and ng-repeat-end elements added in AngularJS 1.2"
},
{
"name": "46. ngmin (3:28)",
"href": "/lessons/angularjs-ngmin",
"summary": "ng-min removes the headache of needing to associate strings with parameter names for minified AngularJS code."
},
{
"name": "45. Directive Communication (4:28)",
"href": "/lessons/angularjs-directive-communication",
"summary": "In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers."
},
{
"name": "44. Experimental \"Controller as\" Syntax (5:20)",
"href": "/lessons/angularjs-experimental-controller-as-syntax",
"summary": "The \"controller as\" syntax was added to AngularJS 1.2. This syntax abstracts the use of $scope in controllers, simplifying the syntax of your controllers."
},
{
"name": "43. ng-repeat and $index, $event, $log (4:48)",
"href": "/lessons/angularjs-index-event-log",
"summary": "$index and $event are handy shortcuts that allow you to access useful information directly in your views. $log facilitates configurable logging without using console.log directly."
},
{
"name": "42. Components and Containers (4:27)",
"href": "/lessons/angularjs-components-and-containers",
"summary": "This lesson describes fundamentals for creating custom directives (broken down into Components and Containers). The component demonstrates how to use the service template to create a simple clock directive whereby AngularJS will bind with objects in the template property and access element attributes. The component example will provide a demonstration of how you can nest components and containers, taking advantage of AngularJS transclusion capabilities."
},
{
"name": "41. Injectors (2:55)",
"href": "/lessons/angularjs-injectors",
"summary": "Injectors inject your dependencies in your AngularJS application. For the most part it will automatically work when constructing objects (controllers) and provide the dependencies defined with your service/factory/provider, it can also be injected itself and be used for invoking methods with injection."
},
{
"name": "40. Providers (5:06)",
"href": "/lessons/angularjs-providers",
"summary": "This lesson describes what is really happening when you use the angular factory and how you can make your factories even more dynamic in creation. This gets further into the internals of AngularJS by showing you how a factory is built dynamically for you and how they have reduced the plumbing you need to make applications."
},
{
"name": "39. Route Life Cycle (4:24)",
"href": "/lessons/angularjs-route-life-cycle",
"summary": "In this lesson the the route life cycle, John steps through the AngularJS Route life cycle using the routeChangeStart and routeChangeSuccess events. By inspecting the current and previous objects, we can see Angular's awareness of the previous route and controller as well as the current or targeted route and controller. Through the use of the resolve property, the routeChangeSuccess event will be delayed until the promise has been completed."
},
{
"name": "38. Directive for Route Handling (3:02)",
"href": "/lessons/angularjs-directive-for-route-handling",
"summary": "Use AngularJS $rootScope within a directive to detect route change errors and display it to the user."
},
{
"name": "37. resolve $routeChangeError (5:09)",
"href": "/lessons/angularjs-resolve-routechangeerror",
"summary": "We can intercept a route change error and direct the user to an appropriate page."
},
{
"name": "36. resolve conventions (3:23)",
"href": "/lessons/angularjs-resolve-conventions",
"summary": "This video shows a more generalized way of using the AngularJS resolve feature with controllers to organize the conditions before the controller is instantiated. The video shows how to condition the controller's instantiation on more than one set of actions (function), and even pass values from the condition processing into the controller's scope once it gets instantiated."
},
{
"name": "35. Resolve (2:05)",
"href": "/lessons/angularjs-resolve",
"summary": "This video shows how the AngularJS 'resolve' feature can be used during the config phase before your controller has been instantiated. This gives you the opportunity to ensure everything has been setup properly that your controller depends on, thus allowing your controller to execute safely based on its assumptions."
},
{
"name": "34. Promises (4:03)",
"href": "/lessons/angularjs-promises",
"summary": "An AngularJS promise is a mechanism that lets you defer a stated action or series of actions at an earlier point of time until you explicitly declare that promise to be fulfilled (or resolved). Promises are useful for asynchronous operations. This video introduces the basic way to declare and resolve promises."
},
{
"name": "33. redirectTo (3:45)",
"href": "/lessons/angularjs-redirectto",
"summary": "In AngularJS redirectTo is often assigned a simple static string and thus points invariably to one location (redirectTo: '/mypath'). You can customize this, by setting redirectTo as a function, which arguments are the route params. For instance, if you hit the route \"/pizza/peperoni\", you can compose your redirection to be \"/pizzas\", or whatever suits your needs"
},
{
"name": "32. $routeParams (2:14)",
"href": "/lessons/angularjs-routeparams",
"summary": "John continues to dive into routing in AngularJS using ng-view. He provides some simple examples for passing in path parameters using $routeParams."
},
{
"name": "31. $routeProvider api (1:50)",
"href": "/lessons/angularjs-routeprovider-api",
"summary": "AngularJS's $routeProvider has a very basic api for defining your application's routes. $routeProvider.when() is used to match a url pattern to a view while $routeProvider.otherwise() is used to render a view when there is no match to a url pattern."
},
{
"name": "30. The config function (2:55)",
"href": "/lessons/angularjs-the-config-function",
"summary": "This episode explains the config phase of an AngularJS application and how is it special in regards to $routeProvider (routing configuration) and providers in general."
},
{
"name": "29. ng-view (3:03)",
"href": "/lessons/angularjs-ng-view",
"summary": "AngularJS's ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (typically the index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service."
},
{
"name": "28. $templateCache (3:07)",
"href": "/lessons/angularjs-templatecache",
"summary": "An alternative to inject an AngularJS template by using $templateCache, using .get() and .put() methods"
},
{
"name": "27. templateUrl (3:45)",
"href": "/lessons/angularjs-templateurl",
"summary": "If you want to keep your template code in a separate html file, you can use the templateUrl property to tell Angular where to find it."
},
{
"name": "26. $scope vs. scope (9:14)",
"href": "/lessons/angularjs-scope-vs-scope",
"summary": "This episode is explaining the naming conventions behind for the arguments passed to the factory functions for controllers, directives, linking functions, etc., its implications in regard to Angular’s dependency injection, minification side effects on arguments, and how to prevent them."
},
{
"name": "25. angular.element (8:40)",
"href": "/lessons/angularjs-angular-element",
"summary": "A brief overview of using element in an AngularJS directive, and how to target one without jquery, and also how to use replace and compile function"
},
{
"name": "24. Building Zippy (7:55)",
"href": "/lessons/angularjs-building-zippy",
"summary": "Building a demo AngularJS directive named Zippy using ng-model, ng-click and transclusion (no controller)"
},
{
"name": "23. Thinking Differently About Organization (4:22)",
"href": "/lessons/angularjs-thinking-differently-about-organization",
"summary": "Demonstrates an “outside the box” approach to organizing controllers and directives by collecting them into objects and them passing those object to AngularJS."
},
{
"name": "22. An Alternative Approach to Controllers (2:49)",
"href": "/lessons/angularjs-an-alternative-approach-to-controllers",
"summary": "AngularJS makes your HTML very declarative. However, seeing the functions invoked in your HTML may not offer any clues as to what controller defines said functions. This video offers an approach to solving this problem by returning the controller in the controller definition so that we can opt for something like ng-click=\"SomeCtrl.doesSomething()\" instead of simply writing ng-click=\"doesSomething()\"."
},
{
"name": "21. Transclusion Basics (2:48)",
"href": "/lessons/angularjs-transclusion-basics",
"summary": "Uh oh. Transclusion? What the heck? It's a big word, but it is actually a very simple concept. In this episode John shows you how transclusion is used in your AngularJS directives..."
},
{
"name": "20. Isolate Scope Review (3:30)",
"href": "/lessons/angularjs-isolate-scope-review",
"summary": "A review of the three types of isolate scope binding methods in AngularJS. The \"@\" operator is used for reading an attribute, \"=\" is used for creating a bi-directional two way binding, and \"&\" is used to make a call on something a controller scope."
},
{
"name": "19. Isolate Scope \"&\" (6:03)",
"href": "/lessons/angularjs-isolate-scope-expression-binding",
"summary": "The \"&\" in your isolated scopes within your AngularJS application will allow you to invoke a method within the scope that your directive lives in."
},
{
"name": "18. Isolate Scope \"=\" (2:51)",
"href": "/lessons/angularjs-isolate-scope-two-way-binding",
"summary": "Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of \"=\" for two way binding within your directives."
},
{
"name": "17. Isolate Scope \"@\" (4:51)",
"href": "/lessons/angularjs-isolate-scope-attribute-binding",
"summary": "AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or \"@\" designator in your isolate scopes."
},
{
"name": "16. Understanding Isolate Scope (6:38)",
"href": "/lessons/angularjs-understanding-isolate-scope",
"summary": "By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive."
},
{
"name": "15. Directive to Directive Communication (8:01)",
"href": "/lessons/angularjs-directive-to-directive-communication",
"summary": "In Angular JS, you can use one directive as an element and other directives as attributes to the element, allowing you to specify different functionality for elements based on the attributes in the element. This lesson shows you how to take a group of directive elements and give them each unique functionality based on their directive attributes."
},
{
"name": "14. Directives Talking to Controllers (4:43)",
"href": "/lessons/angularjs-directives-talking-to-controllers",
"summary": "Often in AngularJS we want to share information between controllers and directives. One way to do this is by passing the scope, but this makes the directive reliant on the scope having the methods you want to run. This lesson shows you a cleaner way that you can pass methods to the directive using an attribute and decouple controllers from directives. This in turn makes your directives more generic/reusable."
},
{
"name": "13. Useful Behaviors (2:55)",
"href": "/lessons/angularjs-useful-behaviors",
"summary": "When you define a directive you get access to the attrs object by declaring it as a dependency in the link function. The attrs object will contain the normalized attributes and their corresponding values declared on the element which contains the directive in the html. So if you set a value on your directive attribute (myDirective=\"value\"), you can access this value in your directive configuration by accessing attrs.myDirective, as this contains the value set in the html for myDirective."
},
{
"name": "12. Basic Behaviors (3:29)",
"href": "/lessons/angularjs-basic-behaviors",
"summary": "Bring your directives to life with custom behaviours. This is the recommended way of interacting with the DOM in AngularJS. If you find yourself modifying the DOM inside of your controllers (bad), directive behaviours are your solution (awesome)."
},
{
"name": "11. Directive Restrictions (3:01)",
"href": "/lessons/angularjs-directive-restrictions",
"summary": "By default AngularJS directives can be used with elements, attributes, classes, and comments. Many times we want to restrict it to one or more of those to control how a directive will be used. This lesson digs into how and why to use Directive restrictions."
},
{
"name": "10. First Directive (2:08)",
"href": "/lessons/angularjs-first-directive",
"summary": "Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes."
},
{
"name": "9. Built-in Filters (2:13)",
"href": "/lessons/angularjs-built-in-filters",
"summary": "AngularJS comes with several handy filters that you can use out of the box. These filters can be combined to create more complex filtered results."
},
{
"name": "8. ngRepeat and Filtering Data (5:13)",
"href": "/lessons/angularjs-ngrepeat-and-filtering-data",
"summary": "When working with sets of data, it is common to need to repeat the same UI element over and over again with values from each object in the set. ngRepeat provides an elegant and simple way to accomplish this within your HTML. We will also provide a filter to a repeater that gives us basic search functionality."
},
{
"name": "7. Testing Overview (5:18)",
"href": "/lessons/angularjs-testing-overview",
"summary": "Testing is a first class citizen in AngularJS. It is at its heart and soul. This lesson demonstrates using Karma to write a simple unit test for a Filter."
},
{
"name": "6. Filters (2:19)",
"href": "/lessons/angularjs-filters",
"summary": "Many times while building an AngularJS application you'll need to manipulate data, and it doesn't make sense to do it with a Controller method. Luckily you have Filters, which are particularly well suited for manipulating text within your HTML views. This handy tool uses a simple syntax to create highly reusable functionality for your apps."
},
{
"name": "5. Defining a Method on the Scope (2:16)",
"href": "/lessons/angularjs-defining-a-method-on-the-scope",
"summary": "Armed with Controllers and service factories, you'll probably want to do some work on the data to give your app behaviors. In this video we will look at providing that behavior by defining a method on the scope. This method will be bound within the HTML and update live as input changes."
},
{
"name": "4. Sharing Data Between Controllers (3:19)",
"href": "/lessons/angularjs-sharing-data-between-controllers",
"summary": "If AngularJS Controllers are the glue of an application, how do they communicate and pass data around? This introduction to service factories will shed some light on that question."
},
{
"name": "3. The Dot (3:02)",
"href": "/lessons/angularjs-the-dot",
"summary": "This brief video examines the importance of a single . within your AngularJS application. It uncovers a potential gotcha when it comes to inheritence."
},
{
"name": "2. Controllers (2:13)",
"href": "/lessons/angularjs-controllers",
"summary": "Controllers are the 'glue' of an AngularJS application. They connect your markup with your data and act as a sort of switchboard. This video is going to take a look at Controllers and introduce the $scope, building on the Binding video."
},
{
"name": "1. Binding (2:53)",
"href": "/lessons/angularjs-binding",
"summary": "Binding is a core feature of AngularJS. It provides a simple mechanism for integrating your HTML with your data via {{bracketed expressions}}. In this video, John covers the basics of binding to get you started."
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment