Learn Angularjs, Cycle and Docker

While "It works on my computer" might give you an excuse to close a bug ticket in the backlog, it doesn't really work when you're working on a team.

You need to ensure that your application can run regardless of what hardware your teammates are running or libraries they have installed.

Docker solves this problem by collecting everything your application needs to run into a container.

Containers aren't just for source code. They can hold configuration, scripts, and even their own filesystem. It's similar to a Virtual Machine, without having to bring a full operating system along for the ride.

Because containers run in isolation, there is some configuration involved to allow for files to be saved and containers to communicate with one another.

One of the most useful ways to get your head around Docker is to see it in action.

Follow along with Joel Lord as he works through the process of preparing an application to run in separate containers for the frontend and backend of an application that searches for gifs and re-encodes them with a caption supplied by the user.

You'll see how to configure the separate containers to communicate with one another, work with environment variables, and persist data to your local machine. Along the way, you'll pick up some tips on useful commands and bash scripting. Finally, you'll learn how to use Docker Compose to make it easy to run multiple containers simultaneously.


Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

Containerize Full-Stack JavaScript Applications with Docker

Docker Fundamentals

In this course we will take a simple Node.js app that connects to a MongoDB database and uses an Express web server, and learn how to setup a full software development deployment process as well as how to properly “Dockerize” the app. 

We’ll step through setting up proper version control techniques, managing configuring within the environment, setting up proper build/deploy/run processes, and all with abiding by Docker best practices. We’ll also make sure our deployment is setup for scale, and have consistent development practices in place for reliable app deployments.

Build a Twelve-Factor Node.js App with Docker

One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state, we introduce additional complexity by trying to control application flow and the amount of code volume that comes from all of this. Redux gives us the ability to address state management and communication in astonishingly simple semantics that can be explained in just a couple minutes. The beauty of Redux is that it is not only a library but a pattern that works very will within Angular 1.x applications. In this series, we are going to learn how to integrate redux (the pattern) into Eggly from scratch and then introduce **ng-redux** and add in **Redux DevTools** at the end for fun.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Build Angular 1.x Apps with Redux

Implementing modern component-based architecture in your new or existing Angular 1.x web application is a breath of fresh air.

In this course, you are going to take a close look at Eggly, an Angular 1.x application for organizing bookmarks, and build it using modern patterns and practices, inspired by Angular 2's recommended architecture.

You will learn how to leverage ES6 in your Angular 1 applications through Babel, and fully understand the core patterns that are used in a composed modular web application. 

This course will teach you how to leverage your existing knowledge of Angular, while preparing your mind (and applications!) for the future.

If you are interested, there is a [companion guide](http://www.angular2patterns.com/) that digs deeper into the patterns found in this course and Angular 2.

Using Angular 2 Patterns in Angular 1.x Apps

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

AngularJS and Webpack for Modular Applications

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS application into an Ionic mobile application.

Building an Angular 1.x Ionic Application

Welcome to the *Ionic Quickstart* series where you will learn how to get started with Ionic from the ground up. We will begin with how to install the required dependencies such as Node.js, Android SDKs and even GenyMotion to installing and running Ionic. By the time you finish, you will know how to create, edit and run an Ionic application. If you are on Windows or Mac and not sure where to start with hybrid mobile development, this is a great place to start!

Ionic Quickstart for Windows and Mac

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

*presented by Thomas Burleson and Aaron Frost*

Introduction to AngularJS Material

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include **production ready** tools that you can start using in your applications today!

Angular Automation with Gulp

One challenge when learning AngularJS is that most examples are trivial. It is difficult to find materials on learning "real-world" patterns and practices.

The joy of Angular is that you are free to build an application in any form that you wish. MCV, MVVM, MVP, MV*whatever*... You get to decide! Freedom is wonderful. 

"But what if I choose poorly?"

Good question.

This series will demonstrate how to organize and tool your AngularJS application for real work. It's an opinion. A way that has worked on our own projects. Use it as a guide for building the solution that best suits the needs of your projects. All projects are different, but with the right set of modular tools you can build a foundation for success.

Building on the previous series, we are going to refactor Eggly to be modular and scalable. By introducing modules and sub-modules, domain models and state management with ui-router, we will start to establish best practices on how an AngularJS application should not only function, but fit together.

Be sure to check out Part 1: [AngularJS App From Scratch: Getting Started](https://egghead.io/courses/angularjs-app-from-scratch-getting-started)

AngularJS Application Architecture

**Data** is the bedrock of any application, including your AngularJS project. This series will dive deep into data models, and how to effectively use them in your applications. 

AngularJS's solution out of the box is $resource, but this service isn't always the best solution. Many times we need a custom model layer that serves the needs of our application. This series explores building a $resource alternative from scratch using TDD.

It's intended for **intermediate-advanced AngularJS developers** that want to dig a little deeper to lower level abstractions for core systems in their applications.

AngularJS Data Modeling

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

In this series, we’ll be building a simple application to get random user information from a node server with an Angular client. We’ll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

By the end, we’ll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You’ll be able to login, get random users, and logout.

AngularJS Authentication with JWT

AngularJS is an incredibly powerful framework but sometimes it can be confusing and frustrating trying to figure out how all of these amazing features actually fit together. In this series, you will learn how to build a non-trivial AngularJS application from the ground up through a series of small, digestible lessons. 

As we build out our sample application, Eggly, you will quickly start to identify useful techniques that you can apply to your own projects.  The videos series is broken out into three series so that you can start at whatever level is most appropriate for you.

### Getting Started

In this first series, we are going to focus on the absolute essentials for getting an AngularJS application up and running. We will start with a static HTML page and learn how to bootstrap an AngularJS application and add in functionality using AngularJS views and controllers. When we complete this section, you will have a functioning Eggly application where you can create, update and delete bookmarks and filter them based on the selected bookmark category. 

Don't miss **[Part 2: Application Architecture](https://egghead.io/course/angularjs-application-architecture)**!



AngularJS Fundamentals

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

AngularJS with Webpack - Production Source Maps

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

angular-formly provides a very simple API to dynamically change properties of your field (like disabled, hidden, and required) using the powerful expressionProperties property on your field.

angular-formly: expressionProperties

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. 

Angular Automation: Gulp Config

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.

angular-formly: Default Values

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.