ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app grows larger over time.
Now that we have ui-router states in our Angular application, we can discuss the three ways to activate a state within ui-router. We will programmatically activate a state using
$state.go and capture user interactions with the
Let's learn how to pass information from one state to another within Eggly. We learn how to define a state so that it has parameters in its definition and then read those parameters using the $stateParams service.
We will look at ui-router and learn how we can use it to define unique states with Eggly. This will allow us to leverage the power of a state machine in our AngularJS application, which goes beyond code management and into managing the states that exist within the code.
note the route doesn't actually fire unless you navigate to index.html#/ instead of index.html (see comments)
We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want to lazy load modules when we change states?
In this lesson, we learn how to get up and running with Gulp by initializing our project with
then installing the Gulp CLI globally and then installing it locally to our project. We finish the lesson off by creating our first Gulp file and running our first Gulp task.
Mocking backend responses is extremely simple with angular-mocks.js and the ngMockE2E module. This lesson will show you how to include and use the module, ensuring you can stay productive on the front end even if your back end is broken, slow, or doesn't even exist yet.
In this video, learn how to automatically restart your node.js app using pm2 when the code for your app changes. You will also learn how to exclude files and directories from restarting your app (such as static assets, css, images, etc.).
AngularJS validation can be tough, but angular-formly makes it extremely simple with a single validation API that enables basic and advanced field validation. You can specify a string expression, function that returns true/false, or a function that returns a promise which is resolved/rejected.
angular-formly templateOptions bring a great deal of power and flexibility to your forms with angular without sacrificing simplicity in your templates. The templateOptions property allows you to specify some attributes that would normally exist on your
maxlength, and even
ng-click. It also works great with
angular-formly allows you to default the values of fields for your angular forms using the
defaultValue property. To default the value of a field, you can either initialize the
model with the default value, or use this
defaultValue property on the field configuration.
Sequelize is an Object Relational Mapper (ORM), which simplifies interacting with relational databases by abstracting away the need to use SQL directly. This lesson introduces defining models with Sequelize in Node.js.
In this lesson, we introduce the process object, part of the node.js global namespace. The process object is extremely useful for identifying information about the runtime environment of your node app such as the version of node, the arguments passed to the node executable, the current working directory, and the nextTick function. All of these are discussed and illustrated with examples in this lesson.
In this lesson, you will learn the difference between the exports statement and module.exports. Two examples are demonstrated, each accomplishing the same task but one using export statements and one using module.exports. You will also learn the basic thumb rule to identify which is appropriate for your current needs.
In this lesson, we are going to learn how to use the
gulp-inject plugin solves this problem by taking a stream of files, converting them into string references and then injecting those references into your HTML via annotations.
In this lesson we will initialize our Express application using
After loading express through npm we will look at a couple basic functions Express exposes to us such as
.send. This will allow basic interaction via the url.
We will also see how using a package like
nodemon can allow for rapid iteration when developing an application.
Template engines allow you to define your UIs in a declarative manner while maintaining a dynamic, data driven presentation layer. This lesson will demonstrate how to use template engines that have built-in support for Express as well as engines without explicit Express support.
Take your routing skills to the next level and learn to recover from errors, initiate downloads, and go beyond simple request and response. When we get a route that does not match we don't want the page to just error out. With
.redirect we can send the user to an error page and display a helpful message.
We will go on to see how to download a file with
.download and track behavior with
As your application grows, it's easy to end up with a long list of route handlers and helper functions. In this lesson we'll look at strategies for keeping things organized and manageable.
We will move individual subpaths into their own file by using
.router to create an instance of the Express router.
Streams are a big part of Node's famous non-blocking I/O, and Express lets you take full advantage of them. This lesson demonstrates how to integrate streams into your server to improve performance and simplify your code.
We will look at
.pipe to read and write from streams.
In this lesson, we are going to learn how to create a config file to store common values so that we can reuse them multiple times in our
gulpfile.js. As our
gulpfile.js grows in complexity, we may find that we are introducing complex and multiple file path references. By creating a
gulp.config.js file, we can simplify these references and make it easier to refactor and extend in the future.
In this lesson, we are going to learn how to use
gulp.watch to detect local file changes and execute additional Gulp tasks. To illustrate this concept, we are also going to hook up
Sharing code and extending functionality in node.js is often done with modules. In this lesson, you will learn how to use npm init to scaffold a new module, verify proper installation, and identify the components needed to publish your module to public and private registries.
Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single
bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by
gulp.dest and finish by writing the bundle to a
Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task
watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.
Building upon the
watch task that we begin this lesson with, we’ll look at how to create a local development server using the
app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public
.stream() method that is designed exactly for this purpose.
In this lesson, you will learn what an EventEmitter is and how it works. We start with a simple example creating an instance of the EventEmitter class, then expand on it by building listeners and emitting events to trigger them. You will learn how to view listeners in the global emitter object, as well as how to remove them and understand what the EventEmitter memory leak message means. We wrap everything up by examining the http server class to illustrate how node.js uses EventEmitters in many places for core features.
Ensuring your charts are responsive is essential if you want them to work regardless of the user's device and screen size. In this lesson we'll learn how the viewBox attribute of SVG elements works, and apply that knowledge to make a future-proof D3 chart.
It's possible to install and run multiple versions of Node.js using a project called NVM. In this lesson we'll walk though the installation, how to try out Node.js version 4.0.0 & even how to configure Webstorm to use any nvm-installed version. Note: NVM works on Mac OSX and Linux only. For a Windows version (with the same commands) see https://github.com/coreybutler/nvm-windows or https://github.com/hakobera/nvmw
Virtual properties are a great way to add some semantics to your data layer and abstract any shortcomings of the underlying schema. This lesson demonstrates virtual getters and setters in Mongoose, and how to integrate their use in your Express server.
WebStorm has a convenient built-in terminal which you can launch with a simple keyboard shortcut and customize to your heart's content. This video shows how to set up the terminal to launch Cygwin (a very popular Windows shell alternative), but the concepts hold true for launching zsh, fish, or any shell of your choice.
Our previous solution used
forEach and a globally available array that could be mutated from inside our function. We can improve upon this and create a function that is easier to maintain & test by swapping our
forEach loop for
reduce. By removing the global array and instead making
getTasks return a value directly we end up with a pure function.