Browse all Angular 1.x lessons.

showing All 309 lessons...

Services, Factories, and Providers: Creating a Factory

Services, Factories, and Providers: Creating a Service

When should I use ng-show or ng-if

Sync Requests with RxJS and Angular

P

Angular Automation: Gulp Watch

P

Angular Automation: Gulp Config

P

Angular Automation: Gulp Serve

Getting started with $animateCss and Angular

P

Angular Automation: Gulp Inject

P

Angular with Webpack - Production Source Maps

P

Angular Automation: Copy Assets with Gulp

P

Transforming raw JSON data to meaningful output in AngularJS

P

Angular Automation: Gulp Tasks

P

Extract predicate methods into filters for ng-if and ng-show

Angular with Webpack - Uglifying your JavaScript

P

Deploy Your Ionic App to a Device

P

Edit Your Ionic Application Code

P

Run Your First Ionic App

Install the Java Developer Kit (JDK) for Ionic

P

Install the Genymotion Android Emulator for Ionic

P

Install Android SDK for Ionic

P

Install Ant for Ionic

P

Creating an Ionic App

P

Ionic Quickstart for Windows: Installing Ionic

P

Stateful filters with promises in AngularJS

Angular with Webpack - Production Setup

P

angular-formly: Extending Types

angular-formly: Default Options

angular-formly: Default Values

angular-formly: templateOptions

angular-formly: expressionProperties

angular-formly: Custom Validation

angular-formly: Custom Templates

Using ngMockE2E to mock backend data

P

Getting started with Angular + JSPM + ES6

P

AngularJS $cacheFactory service

P

Create a D3 Chart as an Angular Directive

P

Introduction to ngFx for Angular animations

Angular with Webpack - Testing with Karma, Mocha, and Chai

P

Angular with Webpack - Requiring CSS & Preprocessors

P

Angular with Webpack - ES6 with BabelJS

P

Angular with Webpack - Requiring Templates

P

Angular with Webpack - Requiring Directives

P

Angular with Webpack - Introduction

Introduction to angular-formly

Angular Automation: Installing Gulp Globally and Locally

P

Angular Automation: Introduction to Gulp

New in Angular 1.4 - New bindToController Syntax

P

AngularJS Architecture: Review

P

AngularJS Architecture: Animate state transitions with ui-router

P
angularjs tutorial about Services, Factories, and Providers: Creating a Factory

Services, Factories, and Providers: Creating a Factory

3:53 angularjs

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's factory function is just the JavaScript module design pattern.

angularjs tutorial about Services, Factories, and Providers: Creating a Service

Services, Factories, and Providers: Creating a Service

3:45 angularjs

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's service function is just a constructor function.

angularjs tutorial about When should I use ng-show or ng-if

When should I use ng-show or ng-if

5:34 angularjs

Walkthrough the main differences between the ng-show and ng-if directives

angularjs tutorial about Sync Requests with RxJS and Angular

Sync Requests with RxJS and Angular

4:56 angularjs PRO

When you implement a search bar, the user can make several different queries in a row. With a Promise based implementation, the displayed result would be what the longest promise returns. Here we see how RxJs can be used to avoid this problem.

angularjs tutorial about Angular Automation: Gulp Watch

Angular Automation: Gulp Watch

5:02 angularjs PRO

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 gulp-jshint to automation lint our JavaScript as we make changes to our code.

angularjs tutorial about Angular Automation: Gulp Config

Angular Automation: Gulp Config

3:35 angularjs PRO

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.

angularjs tutorial about Angular Automation: Gulp Serve

Angular Automation: Gulp Serve

2:49 angularjs

In this lesson, we are going to learn how to automatically serve our project via an HTTP server using gulp-serve. Being able to serve our project from an HTTP server allows us to bypass a myriad of development issues such as loading remote source files.

angularjs tutorial about Getting started with $animateCss and Angular

Getting started with $animateCss and Angular

2:30 angularjs PRO

ngAnimate 1.4 introduces $animateCss which allows us to interact with css based animations through our Javascript. Learn how to get started creating animations with $animateCss.

angularjs tutorial about Angular Automation: Gulp Inject

Angular Automation: Gulp Inject

5:10 angularjs PRO

In this lesson, we are going to learn how to use the gulp-inject plugin to sanely and efficiently manage our file references with our HTML. Manually declaring JavaScript references will quickly get out of hand as your application grows in size and complexity. 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.

angularjs tutorial about Angular with Webpack - Production Source Maps

Angular with Webpack - Production Source Maps

1:51 angularjs PRO

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 tutorial about Angular Automation: Copy Assets with Gulp

Angular Automation: Copy Assets with Gulp

5:13 angularjs PRO

In this lesson, we are going to learn how to copy assets from one place to another using Gulp. This is important as you start to prepare your source files to be deployed into production. We will learn how to implement gulp.src, gulp.pipe and gulp.dest as well as the del plugin as we copy our files from the source directory into a build directory.

angularjs tutorial about Transforming raw JSON data to meaningful output in AngularJS

Transforming raw JSON data to meaningful output in AngularJS

6:38 angularjs PRO

JSON from server often exposes raw data you have to transform to present to your end users. In this lesson, we cover a few solutions to make it happen.

angularjs tutorial about Angular Automation: Gulp Tasks

Angular Automation: Gulp Tasks

3:45 angularjs PRO

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues using run-sequence.

angularjs tutorial about Extract predicate methods into filters for ng-if and ng-show

Extract predicate methods into filters for ng-if and ng-show

3:09 angularjs

Leaking logic in controllers is not an option, filters are a way to refactor your code and are compatible with ng-if and ng-show

angularjs tutorial about Angular with Webpack - Uglifying your JavaScript

Angular with Webpack - Uglifying your JavaScript

4:42 angularjs PRO

Angular requires some careful consideration when uglifying your code because of how angular's dependency injection system works. See how easy it is to add this consideration to your webpack configuration so you can minify your Angular JavaScript with Webpack.

angularjs tutorial about Deploy Your Ionic App to a Device

Deploy Your Ionic App to a Device

3:15 angularjs PRO

This lesson has two parts: 1) uploading our app to an Ionic account and 2), downloading the Ionic View app to your phone. Once this lesson is done, we will be able to view our app in our Ionic account dashboard and manage settings for it. We will also be able to share our app with anyone who downloads the Ionic View app, so they don’t have to build and run our app themselves.

angularjs tutorial about Edit Your Ionic Application Code

Edit Your Ionic Application Code

1:45 angularjs PRO

In this lesson, we quickly demonstrate how to edit our code and re-run our app. The pertinent piece of the puzzle is knowing where the code for the HTML/Javascript/CSS is. Once we know where that is, editing it and running the app is a cinch!

angularjs tutorial about Run Your First Ionic App

Run Your First Ionic App

2:06 angularjs

In this lesson, we learn how to run an app on our PC using Genymotion. Genymotion provides a simple UI that enables us to create and run virtual devices with a couple clicks. Once our virtual device is running, it is just a matter of a couple commands in the command prompt and we can view and test our app on our PC.

angularjs tutorial about Install the Java Developer Kit (JDK) for Ionic

Install the Java Developer Kit (JDK) for Ionic

2:27 angularjs PRO

In this lesson, we install the Java Developer Kit (JDK). The JDK contains the Java Runtime Environment (JRE) and all the tools necessary to compile Java applications. This is necessary to compile and run Java, which in turn is necessary to run android.

angularjs tutorial about Install the Genymotion Android Emulator for Ionic

Install the Genymotion Android Emulator for Ionic

2:08 angularjs PRO

In this lesson, we install Genymotion, which allows us to create virtual Android devices on our PC. We could use the Android emulators provided by the Android SDK, but on Windows this proves to be problematic. Most Android developers that operate on a PC opt for using Genymotion, not only because it’s faster, but because it provides easy access to testing different native functions of Android devices, such as the camera, microphone, accelerometer, etc.

angularjs tutorial about Install Android SDK for Ionic

Install Android SDK for Ionic

4:58 angularjs PRO

In this lesson, we install the Android Software Development Kit (SDK) and the necessary Android API (Application Interface). This is the code base that allows us to run the Android platform on our PC. We also add a couple environment variables and update our PATH environment variable.

angularjs tutorial about Install Ant for Ionic

Install Ant for Ionic

1:39 angularjs PRO

In this lesson, we install Apache Ant and create an environment variable for it. Ant is a tool used primarily to build Java applications and is also necessary to run Android. Ionic uses Ant to aid in driving the processes that will build the native Android app later on.

angularjs tutorial about Creating an Ionic App

Creating an Ionic App

1:18 angularjs PRO

In this lesson, we create our first Ionic app. We use a pre-defined Ionic template to give us some views and data straight out of the gates. This allows us to have a web app up and running in our browser, ready for us to explore, in four simple command prompt commands.

angularjs tutorial about Ionic Quickstart for Windows: Installing Ionic

Ionic Quickstart for Windows: Installing Ionic

0:40 angularjs PRO

In this lesson, we install Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. After this lesson, we will be able to create and run and app.

angularjs tutorial about Stateful filters with promises in AngularJS

Stateful filters with promises in AngularJS

4:44 angularjs

This lesson illustrates how to use promises inside Angular filters

angularjs tutorial about Angular with Webpack - Production Setup

Angular with Webpack - Production Setup

2:05 angularjs PRO

Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.

angularjs tutorial about angular-formly: Extending Types

angular-formly: Extending Types

2:17 angularjs

Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. When use responsibly, they can make it much easier to manage common types, allowing you to add a bit of functionality to a common type.

angularjs tutorial about angular-formly: Default Options

angular-formly: Default Options

2:48 angularjs

angular-formly allows you to keep your forms as DRY as possible. The optionsTypes property is one way of composing your field configurations to keep your forms light-weight and DRY.

angularjs tutorial about angular-formly: Default Values

angular-formly: Default Values

0:52 angularjs

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.

angularjs tutorial about angular-formly: templateOptions

angular-formly: templateOptions

3:01 angularjs

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 ng-model like required, maxlength, and even ng-click. It also works great with expressionProperties.

angularjs tutorial about angular-formly: expressionProperties

angular-formly: expressionProperties

4:27 angularjs

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.

angularjs tutorial about angular-formly: Custom Validation

angular-formly: Custom Validation

3:14 angularjs

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.

angularjs tutorial about angular-formly: Custom Templates

angular-formly: Custom Templates

5:05 angularjs

The type functionality of the angular-formly library is powerful. In this lesson, see how you can use it to create custom templates for your field configurations and see what is available in the scope of each of your fields.

angularjs tutorial about Using ngMockE2E to mock backend data

Using ngMockE2E to mock backend data

4:02 angularjs PRO

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.

angularjs tutorial about Getting started with Angular + JSPM + ES6

Getting started with Angular + JSPM + ES6

3:04 angularjs PRO

JSPM allows you to load any client package from github and npm in any module format. Learn how to use it to create a great workflow with Angular and ES6.

angularjs tutorial about AngularJS $cacheFactory service

AngularJS $cacheFactory service

5:16 angularjs PRO

Angular's $cacheFactory can be used on its own or to customize the behavior of $http calls. This lesson introduces the API and shows how to integrate $cacheFactory into your project.

angularjs tutorial about Create a D3 Chart as an Angular Directive

Create a D3 Chart as an Angular Directive

8:55 angularjs PRO

Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives.

angularjs tutorial about Introduction to ngFx for Angular animations

Introduction to ngFx for Angular animations

2:04 angularjs

ngFx is an amazing animation library built on top of ngAnimate using Greensock Animation Platform. This quick introduction will have you animating your Angular apps today.

angularjs tutorial about Angular with Webpack - Testing with Karma, Mocha, and Chai

Angular with Webpack - Testing with Karma, Mocha, and Chai

10:22 angularjs PRO

Testing in Angular applications takes a bit of setup. Webpack simplifies things considerably. In this lesson you'll see how to test an Angular application built with Webpack using karma, mocha, and chai.

angularjs tutorial about Angular with Webpack - Requiring CSS & Preprocessors

Angular with Webpack - Requiring CSS & Preprocessors

6:07 angularjs PRO

Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.

angularjs tutorial about Angular with Webpack - ES6 with BabelJS

Angular with Webpack - ES6 with BabelJS

2:43 angularjs PRO

Use the latest features of ECMAScript using BabelJS with Webpack. Simply add the right loader line in your webpack config and everything just works.

angularjs tutorial about Angular with Webpack - Requiring Templates

Angular with Webpack - Requiring Templates

2:48 angularjs PRO

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

angularjs tutorial about Angular with Webpack - Requiring Directives

Angular with Webpack - Requiring Directives

3:48 angularjs PRO

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

angularjs tutorial about Angular with Webpack - Introduction

Angular with Webpack - Introduction

4:20 angularjs

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

angularjs tutorial about Introduction to angular-formly

Introduction to angular-formly

5:43 angularjs

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

angularjs tutorial about Angular Automation: Installing Gulp Globally and Locally

Angular Automation: Installing Gulp Globally and Locally

4:24 angularjs PRO

In this lesson, we learn how to get up and running with Gulp by initializing our project with
npm
init
and
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.

angularjs tutorial about Angular Automation: Introduction to Gulp

Angular Automation: Introduction to Gulp

4:26 angularjs

Angular projects require automation. Period.

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!

angularjs tutorial about New in Angular 1.4 - New bindToController Syntax

New in Angular 1.4 - New bindToController Syntax

1:43 angularjs PRO

Angular 1.4 introduces a new syntax for bindToController. John demonstrates how to use it and what the new options are.

angularjs tutorial about AngularJS Architecture: Review

AngularJS Architecture: Review

3:44 angularjs PRO

In this lesson, we review the high level concepts that we covered over the course of this series including file structure, sub-modules, data models, ui-router and animations.

angularjs tutorial about AngularJS Architecture: Animate state transitions with ui-router

AngularJS Architecture: Animate state transitions with ui-router

3:46 angularjs PRO

In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?