Browse all Angular 1.x lessons.

showing All 312 lessons...

Build and Run an iOS App on a Mac

P

Setting Up your Mac with Ionic and Cordova

P

Services, Factories, and Providers: Creating a Provider

P

Services, Factories, and Providers: Creating a Value Object

P

Services, Factories, and Providers: Creating a Factory

P

Services, Factories, and Providers: Creating a Service

P

When should I use ng-show or ng-if

P

Sync Requests with RxJS and Angular

P

Angular Automation: Gulp Watch

P

Angular Automation: Gulp Config

P

Angular Automation: Gulp Serve

P

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

P

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

P

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

P

Angular with Webpack - Production Setup

P

angular-formly: Extending Types

P

angular-formly: Default Options

P

angular-formly: Default Values

P

angular-formly: templateOptions

P

angular-formly: expressionProperties

P

angular-formly: Custom Validation

P

angular-formly: Custom Templates

P

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

P

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

P

Angular Automation: Installing Gulp Globally and Locally

P
angularjs tutorial about Build and Run an iOS App on a Mac

Build and Run an iOS App on a Mac

3:49 angularjs PRO

In this lesson, we learn how to run an app on our Mac. We are going to download Xcode, which includes an iOS simulator. Once we have Xcode, it is a matter of a couple commands in our terminal to run and view our app on our mac.

angularjs tutorial about Setting Up your Mac with Ionic and Cordova

Setting Up your Mac with Ionic and Cordova

3:11 angularjs PRO

In this lesson, we install Node.js (with Node Package Manager) as well as 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. We then create an Ionic app in just a few more commands.

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

Services, Factories, and Providers: Creating a Provider

7:45 angularjs PRO

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 provider function is just a configurable JavaScript module.

angularjs tutorial about Services, Factories, and Providers: Creating a Value Object

Services, Factories, and Providers: Creating a Value Object

2:30 angularjs PRO

Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider, Factory, and Value functions? This lesson shows how Angular's value function allows you to use register a plain JavaScript object as an AngularJS service.

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

Services, Factories, and Providers: Creating a Factory

3:53 angularjs PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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.

angular tutorial about Using ngMockE2E to mock backend data

Using ngMockE2E to mock backend data

4:02 angular 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 PRO

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 PRO

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.

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