Browse all Angular 1.x lessons.

showing All 334 lessons...

New in Angular 1.3: Updates to forms

P

AngularJS Architecture: ui-router state params for sharing information

P

Using ng-aria to automatically improve your AngularJS accessibility

P

AngularJS Architecture: Using ui-router's named views

P

New in Angular 1.3: ng-model-options updateOn and debounce

P

Using ng-messages with ng-animate

P

Reusing and Overriding ng-messages

P

AngularJS Architecture: Basic State with ui-router

P

Introduction to ng-messages for AngularJS

P

Organize Code with Sub-Modules into an AngularJS Application

P

Lazy Loading non-Angular Libraries with ocLazyLoad

P

Structure Files for an AngularJS Application

P

Introduction to AngularJS Architecture Series

New in Angular 1.3 - $q constructor

P

Using the AngularJS scope's $watchCollection method

P

Simple Lazy Loaded Angular Module Syntax with ocLazyLoad

P

Locators and Suites in Protractor

P

New in Angular 1.3 - Bind Once

P

Lazy Loading modules with ui-router and ocLazyLoad

P

Using AngularJS interceptors with $http

P

New in Angular 1.3 - $scope.$watchGroup

P

New in Angular 1.3 - Stateless Filters

P

Using the ngChange Directive in Angular

P

AngularJS Batarang

P

Serializing and Deserializing Data Models in AngularJS

P

Finalizing JWT Authentication with AngularJS

P

Auth Interceptor in Angular for JWT

P

Server JWT Authentication Setup

P

JWT Authentication Setup

P

Client Setup for JWT Authentication

P

Basic Server Setup for JWT Authentication

JSON Web Token (JWT) Introduction

Decorating an Angular event for composed behavior

P

The basics of $scope.$watch

P

Refactoring: Replace Loop with Collection Closure using Lodash

P

Refactoring: Polymorphic Functions

P

Using ng-annotate for min-safe AngularJS

P

Refactoring: Extract Method

P

Lazy loading Angular modules with ocLazyLoad

P

Using the Angular scope $destroy event and method.

P

Building an Angular App: Eggly Review

Delete an item from a collection in AngularJS

Modify State with ng-model and an AngularJS controller

Using the LocalForage library for offline storage with Angular

P

Submit content in a form with AngularJS ng-submit and ng-model

Manage Simple State in an AngularJS Controller

e2e Testing AngularJS Apps with Protractor and SauceLabs

P

Refactoring: Unit Test Coverage Report Setup

P

Create a Filter with AngularJS

Dynamically Display Data with AngularJS Controllers

angularjs tutorial about New in Angular 1.3: Updates to forms

New in Angular 1.3: Updates to forms

1:06 angularjs PRO

With the release of AngularJS 1.3, we get some handy additions to forms, including a submitted state and the ability to bind input field names to an expression.

angularjs tutorial about AngularJS Architecture: ui-router state params for sharing information

AngularJS Architecture: ui-router state params for sharing information

4:53 angularjs PRO

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.

angularjs tutorial about Using ng-aria to automatically improve your AngularJS accessibility

Using ng-aria to automatically improve your AngularJS accessibility

5:15 angularjs PRO

Accessibility is an often overlooked essential feature of a web application. a11y Is a critical component of your AngularJS application. It should be considered early in an applications life. The ng-aria module gets you started quickly, adding instant upgrades to your Angular app's accessibility.

Want to learn more about accessibility and AngularJS? Check out this great talk: AngularJS Accessibility by Marcy Sutton at ng-europe 2014

angularjs tutorial about AngularJS Architecture: Using ui-router's named views

AngularJS Architecture: Using ui-router's named views

8:03 angularjs PRO

We'll take a deeper look at ui-router as we introduce named views into Eggly. We will take the basic state that we defined in the previous video and refactor it so that it consists of two unique views within the application.

angularjs tutorial about New in Angular 1.3: ng-model-options updateOn and debounce

New in Angular 1.3: ng-model-options updateOn and debounce

3:35 angularjs PRO

Now in Angular 1.3 you can cause updates to your ngModels to only occur for a given even (blur, focus, click, etc);

Debouncing means that only 1 action will be registered within a specific time. This is handy for text inputs, where an action triggers a process (such as asynchronous search). ngModelOptions allows you to debounce your ngModel inputs in AngularJS apps.

angularjs tutorial about Using ng-messages with ng-animate

Using ng-messages with ng-animate

4:48 angularjs PRO

ngMessages works great with AngularJS's ngAnimate and makes the appearance of your messages more awesome.

angularjs tutorial about Reusing and Overriding ng-messages

Reusing and Overriding ng-messages

2:39 angularjs PRO

One really handy trick with angular's ng-messages module is the ability to reuse messages with ease. With reuse comes the need to override messages for specific use cases.

angularjs tutorial about AngularJS Architecture: Basic State with ui-router

AngularJS Architecture: Basic State with ui-router

5:20 angularjs PRO

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)

angularjs tutorial about Introduction to ng-messages for AngularJS

Introduction to ng-messages for AngularJS

4:13 angularjs PRO

ng-messages is a directive added in AngularJS 1.3 that is used to display messages to the user. This is usually in relation to form error messages, and cleans up the syntax required to show feedback messages to the user.

angularjs tutorial about Organize Code with Sub-Modules into an AngularJS Application

Organize Code with Sub-Modules into an AngularJS Application

4:22 angularjs PRO

Let's look at sub-modules as a mechanism for organizing our code into logical containers that we can then compose into our main application. Leveraging sub-modules is a powerful way to add in new functionality and features into an application while minimizing the impact that it has on the existing code base.

javascript tutorial about Lazy Loading non-Angular Libraries with ocLazyLoad

Lazy Loading non-Angular Libraries with ocLazyLoad

1:06 javascript PRO

ocLazyLoad will also load non-Angular libraries in the lazy way.

angularjs tutorial about Structure Files for an AngularJS Application

Structure Files for an AngularJS Application

5:51 angularjs PRO

Let's talk about the importance of having a good file structure and how it is is very much like good code in that it is self documenting and friendly to extension. We will introduce the file structure that will serve as the foundation for the rest of the series as we refactor Eggly.

angularjs tutorial about Introduction to AngularJS Architecture Series

Introduction to AngularJS Architecture Series

2:32 angularjs

Ready to start learning about AngularJS Application Architecture? This lesson series is for you. Let's talk about what you will learn.

angularjs tutorial about New in Angular 1.3 - $q constructor

New in Angular 1.3 - $q constructor

2:52 angularjs PRO

In AngularJS 1.3 there is a nice shorthand for $q.defer(). In fact, it removes the need for calling defer at all!

angularjs tutorial about Using the AngularJS scope's $watchCollection method

Using the AngularJS scope's $watchCollection method

3:11 angularjs PRO

The $watchCollection method on Angular scopes provides a convenient way to watch for changes on the shallow properties of an object.

angularjs tutorial about Simple Lazy Loaded Angular Module Syntax with ocLazyLoad

Simple Lazy Loaded Angular Module Syntax with ocLazyLoad

1:49 angularjs PRO

ocLazyLoad offers several ways to lazy load your AngularJS modules. This lesson looks at the syntax for lazy loading dependencies declared in the module definition.

angularjs tutorial about Locators and Suites in Protractor

Locators and Suites in Protractor

7:12 angularjs PRO

Let's take a deeper look at selecting specific elements on the page with Protractor locators. We can also divide our tests up into specific suites of related tests with a bit of configuration.

angularjs tutorial about New in Angular 1.3 - Bind Once

New in Angular 1.3 - Bind Once

5:33 angularjs PRO

AngularJS's two-way binding is one of the "killer features" of the framework. The problem is that too many bindings can cause performance issues! Many times, all you need to do is bind a single time to get the data to display, and don't need dynamic two-way binding. In Angular 1.3, they've added new syntax to enable one-time data bindings.

angularjs tutorial about Lazy Loading modules with ui-router and ocLazyLoad

Lazy Loading modules with ui-router and ocLazyLoad

2:40 angularjs PRO

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?

angularjs tutorial about Using AngularJS interceptors with $http

Using AngularJS interceptors with $http

7:05 angularjs PRO

Sometimes you might need to modify HTTP requests and responses. This could be for a variety of reasons such as adding global logic handling for HTTP errors. With interceptors, you can easily accomplish this in your Angular applications.

angularjs tutorial about New in Angular 1.3 - $scope.$watchGroup

New in Angular 1.3 - $scope.$watchGroup

2:42 angularjs PRO

With Angular 1.3 you now have access to $scope.$watchGroup. This allows you to monitor an array of expressions for change. This is useful when you want to perform the some logic when any item in a group changes.

angularjs tutorial about New in Angular 1.3 - Stateless Filters

New in Angular 1.3 - Stateless Filters

3:50 angularjs PRO

Filters in AngularJS can be a big performance hog. As of Angular 1.3, filters are "stateless" by default. This means that given the same input, a filter will not even run, and simply return the previous value.

angularjs tutorial about Using the ngChange Directive in Angular

Using the ngChange Directive in Angular

2:25 angularjs PRO

The ngChange directive will allow you to monitor value changes on input elements in your AngularJS applications

angularjs tutorial about AngularJS Batarang

AngularJS Batarang

4:49 angularjs PRO

AngularJS Batarang is a powerful Chrome extension that makes your developer tools "Angular aware".

angularjs tutorial about Serializing and Deserializing Data Models in AngularJS

Serializing and Deserializing Data Models in AngularJS

7:34 angularjs PRO

It is important to have consistent data for your application to use. To achieve this, our modeling library will need to have the ability to serialize and deserialize data received into a format it understands, plain old JavaScript objects.

This lesson is part of a series on building a robust modeling layer in your AngularJS applications.

angularjs tutorial about Finalizing JWT Authentication with AngularJS

Finalizing JWT Authentication with AngularJS

8:13 angularjs PRO

Adding middleware to the node server to decode and verify the token sent from the client. And tidying up the rest of the application. Finally, a walkthrough of the whole process.

angularjs tutorial about Auth Interceptor in Angular for JWT

Auth Interceptor in Angular for JWT

7:53 angularjs PRO

Adding JWT support to the client. Storing the token in local storage, then creating a http interceptor to add the token to requests made to the server. Also implementing logout.

angularjs tutorial about Server JWT Authentication Setup

Server JWT Authentication Setup

4:03 angularjs PRO

Adding JWT support to the server. Signing a JSON object as a payload and sending the signed token to the browser on authentication.

angularjs tutorial about JWT Authentication Setup

JWT Authentication Setup

4:15 angularjs PRO

Setting up a login on the angular app and an authentication endpoint on the server.

angularjs tutorial about Client Setup for JWT Authentication

Client Setup for JWT Authentication

3:33 angularjs PRO

Creating a basic Angular application to access the random users resource. Also setting up CORS on the node server to enable the resource sharing across different domains (ports in our case).

angularjs tutorial about Basic Server Setup for JWT Authentication

Basic Server Setup for JWT Authentication

1:44 angularjs

Creating the basic node server to serve up random users via API endpoints.

angularjs tutorial about JSON Web Token (JWT) Introduction

JSON Web Token (JWT) Introduction

1:23 angularjs

A basic introduction to the mechanics of JWTs and the application we will be building in this lesson series.

angularjs tutorial about Decorating an Angular event for composed behavior

Decorating an Angular event for composed behavior

6:16 angularjs PRO

Events are a useful tool for triggering functionality based on something that has occurred in your application. In this lesson, we will build upon the concepts from the create a scope decorator lesson to create an event decorator that can be used to cleanly compose functionality on top of Angular events.

angularjs tutorial about The basics of $scope.$watch

The basics of $scope.$watch

6:32 angularjs PRO

With AngularJS's $scope.$watch, you are able to monitor scope values for changes. This can be useful for validation of user input, as an example.

angularjs tutorial about Refactoring: Replace Loop with Collection Closure using Lodash

Refactoring: Replace Loop with Collection Closure using Lodash

6:49 angularjs PRO

Logic often gets added to our loops. We need to iterate over a collection, and get the sum of values, for instance. This approach can lead to complicated methods, that are hard to test. Using Lodash (Underscore), we are going to extract logic in a large loop body into well named methods. The result will be cleaner and easier to understand.

angularjs tutorial about Refactoring: Polymorphic Functions

Refactoring: Polymorphic Functions

4:37 angularjs PRO

if-statements can add serious complexity and beg for refactoring. You can use polymorphic functions to simplify your ifs and dynamically call the appropriate method.

angularjs tutorial about Using ng-annotate for min-safe AngularJS

Using ng-annotate for min-safe AngularJS

6:03 angularjs PRO

When you minify your code with a tool like Uglify, the resulting minified file will rename variables. This is a problem for AngualrJS, which uses parameter names to provide injected dependencies. You could use the array notation manually, but no human should ever have to suffer this fate, or you could use ng-annotate with Grunt, and let your helper robots get the job done instead.

angularjs tutorial about Refactoring: Extract Method

Refactoring: Extract Method

8:15 angularjs PRO

Refactoring is a fact of life, and the "extract method" refactoring is the cornerstone of improving your code.

angularjs tutorial about Lazy loading Angular modules with ocLazyLoad

Lazy loading Angular modules with ocLazyLoad

5:33 angularjs PRO

With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading of Angular modules in large applications.

angularjs tutorial about Using the Angular scope $destroy event and method.

Using the Angular scope $destroy event and method.

4:25 angularjs PRO

With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. This is used for cleanup, and gives you a final opportunity to access any data on a scope. Scopes also have a (rarely used) $destroy method that allows you to manually destroy a scope.

angularjs tutorial about Building an Angular App: Eggly Review

Building an Angular App: Eggly Review

4:57 angularjs

Let's review everything that we have learned up this point and discuss what we are going to be learning in the next section.

Be sure to check out Part 2: Application Architecture

angularjs tutorial about Delete an item from a collection in AngularJS

Delete an item from a collection in AngularJS

3:50 angularjs

We are going to complete the bookmark management functionality by showing how to delete a bookmark from the bookmarks collection.

The source for this lesson can be found on Github. Tags correspond to the lesson.

angularjs tutorial about Modify State with ng-model and an AngularJS controller

Modify State with ng-model and an AngularJS controller

9:13 angularjs

We are going to learn how to edit an existing bookmark by building on a lot of the same techniques from the previous video. We will also learn how to edit a bookmark and not actually save the change back to the collection until we are ready.

Find the code on Github. Tags correspond to the lesson.

angularjs tutorial about Using the LocalForage library for offline storage with Angular

Using the LocalForage library for offline storage with Angular

1:39 angularjs PRO

The angular-localforage library makes simple offline storage easy.

angularjs tutorial about Submit content in a form with AngularJS ng-submit and ng-model

Submit content in a form with AngularJS ng-submit and ng-model

5:38 angularjs

We are going to learn how to create a bookmark by adding it to the bookmarks collection. We will learn how to submit the contents of a form to the controller to be processed by exploring ng-submit and ng-model.

The source for this lesson can be found here on Github. Tags correspond to the lessons.

angularjs tutorial about Manage Simple State in an AngularJS Controller

Manage Simple State in an AngularJS Controller

8:44 angularjs

We are going to learn how to manage simple states within our controller. We are going to learn how to toggle between the editing and creating bookmark states and how to sequence those interactions in the controller.

note: The code for this lesson can be found on Github. The tags correspond to the lessons.

angularjs tutorial about e2e Testing AngularJS Apps with Protractor and SauceLabs

e2e Testing AngularJS Apps with Protractor and SauceLabs

6:48 angularjs PRO

When you are running end-to-end (e2e) tests against your AngularJS apps, they will need to be run against a rainbow of varied browsers. This can be a logistics nightmare, but luckily there are services like SauceLabs that can make this much more manageable. In this lesson, we will take a look at configuring and running e2e tests with SauceLabs.

angularjs tutorial about Refactoring: Unit Test Coverage Report Setup

Refactoring: Unit Test Coverage Report Setup

5:42 angularjs PRO

The "R" word. Refactoring. The first step in refactoring code is to make sure we are covering the existing code with tests. If we aren't refactoring against tested code, we are just changing stuff. In this lesson, we'll start taking a look at some code that needs refactoring, and get test coverage reports setup.

angularjs tutorial about Create a Filter with AngularJS

Create a Filter with AngularJS

6:28 angularjs

We are going to learn how to filter our bookmarks based on the selected category. We will learn how to manage the current category in the controller as well as set the current category from the view. As a bonus, we will see how to dynamically apply a class to visually indicate what category is the currently selected category.

The code for this lesson can be found on Github. note: the tags correspond to the lessons.

angularjs tutorial about Dynamically Display Data with AngularJS Controllers

Dynamically Display Data with AngularJS Controllers

7:58 angularjs

We are going to take the static HTML elements and dynamically display them on the page by setting up an AngularJS controller and hooking it up with AngularJS templating in the view.

The code for this lesson can be found on Github. Note: the tag name corresponds to the lesson.

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