Browse all Angular 1.x lessons.

showing All 309 lessons...

AngularJS Architecture: Delete Bookmark

P

AngularJS Architecture: Edit Bookmark

P

AngularJS Architecture: Create Bookmark

P

AngularJS Architecture: Edit and Create Bookmark States

P

Using ng-html2js to Convert Templates into JavaScript

P

Catching errors with $exceptionHandler

Taking control of your templates using $templateCache

Consistency between ui-router states and Angular directives

P

Using ngModelOptions to Update on Blur

New in Angular 1.3 - Performance Boost with debugInfoEnabled

P

Localize your AngularJS Application with angular-localization

P

New in Angular 1.3 - bindToController

P

Using Services in Angular Directives

Hijacking Existing HTML Attributes with Angular Directives

AngularJS Architecture: Control your promises with $q

P

AngularJS Architecture: Using $http to load JSON data

P

AngularJS Architecture: Refactor to a data model

P

Adding custom methods to angular.module

P

Use protractor to catch errors in the console

AngularJS Architecture: Prefer the 'controller as' syntax

P

New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

P

New in Angular 1.3: ng-model-options getters and setters

Automated screenshots of your e2e Protractor tests

AngularJS Architecture: navigating between states with ui-router

P

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

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

AngularJS Architecture: Basic State with ui-router

P

Introduction to ng-messages for AngularJS

AngularJS Architecture: Using Sub-Modules

P

Lazy Loading non-Angular Libraries with ocLazyLoad

P

AngularJS Architecture: File Structure

P

AngularJS Architecture: Series Introduction

New in Angular 1.3 - $q constructor

P

Using the AngularJS scope's $watchCollection method

Simple Lazy Loaded Angular Module Syntax with ocLazyLoad

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

New in Angular 1.3 - $scope.$watchGroup

New in Angular 1.3 - Stateless Filters

P

Using the ngChange Directive in Angular

AngularJS Batarang

Serializing and Deserializing Data Models in AngularJS

P

Finalizing JWT Authentication with AngularJS

P
angularjs tutorial about AngularJS Architecture: Delete Bookmark

AngularJS Architecture: Delete Bookmark

2:10 angularjs PRO

In this lesson, we are going to complete the functionality for deleting a bookmark. Deleting a bookmark is significantly easier than creating or editing a bookmark with the essence being a single method in the BookmarksModel that we make available to the controller and view.

angularjs tutorial about AngularJS Architecture: Edit Bookmark

AngularJS Architecture: Edit Bookmark

12:18 angularjs PRO

In this lesson, we are going to complete the functionality for editing a bookmark. We will start by augmenting the BookmarksModel and then updating the controller and view to utilize the new functionality. We will also update the BookmarksModel.getBookmarks to cache the bookmarks so that we are not overwriting our updates on every call.

angularjs tutorial about AngularJS Architecture: Create Bookmark

AngularJS Architecture: Create Bookmark

6:29 angularjs PRO

In this lesson, we will complete the functionality to create a bookmark. We start by adding a createBookmark method on the BookmarksModel and then making it available to the CreateBookmarksCtrl. From there, we flesh out the CreateBookmarksCtrl and refactor the template to use the new "Controller as" syntax.

angularjs tutorial about AngularJS Architecture: Edit and Create Bookmark States

AngularJS Architecture: Edit and Create Bookmark States

12:09 angularjs PRO

In this lesson, we continue to dig into ui-router while doing some significant refactoring to our Eggly application.

We will start out by removing MainCtrl entirely from the application as we start to move functionality to more appropriate places with the application. We will build out the edit and create sub-modules to include the states and controllers for editing and creating a bookmark. With our states defined, will leverage them to manage our view instead of the ng-if statements we were previously using. We tie it all together by using CategoriesModel to track the current category and provide functionality to the BookmarksListCtrl.

We cover a lot of material in this lesson as we start to apply the concepts covered previously to finalize functionality in the application.

angularjs tutorial about Using ng-html2js to Convert Templates into JavaScript

Using ng-html2js to Convert Templates into JavaScript

3:39 angularjs PRO

ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache. This allows you to bundle all of your templates into a single JavaScript file for simpler deployment and faster loading. John walks through using ng-html2js in the terminal to show what it does, but to integrate with either gulp or grunt, use the tool specific module.

angularjs tutorial about Catching errors with $exceptionHandler

Catching errors with $exceptionHandler

5:25 angularjs

The AngularJS $exceptionHandler service allows you to catch and handle unanticipated JavaScript errors in a meaningful way.

angularjs tutorial about Taking control of your templates using $templateCache

Taking control of your templates using $templateCache

3:09 angularjs

Learn how Angular stores and retrieves templates, and some tricks for making it more flexible and dynamic.

angularjs tutorial about Consistency between ui-router states and Angular directives

Consistency between ui-router states and Angular directives

4:40 angularjs PRO

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.

angularjs tutorial about Using ngModelOptions to Update on Blur

Using ngModelOptions to Update on Blur

2:56 angularjs

How do you change a text input from updating on every key stroke? With ngModelOptions it is really easy to control what event triggers the model update. In this lesson, we will modify a text input to update on blur instead of key up.

angularjs tutorial about New in Angular 1.3 - Performance Boost with debugInfoEnabled

New in Angular 1.3 - Performance Boost with debugInfoEnabled

2:01 angularjs PRO

By default, Angular provides a lot of debug information on the DOM that's only necessary for tools like Protractor and Batarang. Angular 1.3 allows you to turn off the debug information to give your app a simple performance boost.

angularjs tutorial about Localize your AngularJS Application with angular-localization

Localize your AngularJS Application with angular-localization

5:28 angularjs PRO

It is best to start your application's localization efforts early in development, even if you only support one language initially. Libraries like angular-localization help make the process of supporting additional languages much easier.

angularjs tutorial about New in Angular 1.3 - bindToController

New in Angular 1.3 - bindToController

4:10 angularjs PRO

If you are using the "controller as" syntax, and you should be using the "controller as" syntax, you will want it to be consistent in your Angular state modules as well as your Angular component directives. With the bindToController property on the directive definition object, this is easy to accomplish.

angularjs tutorial about Using Services in Angular Directives

Using Services in Angular Directives

5:19 angularjs

Directives have dependencies too, and you can use dependency injection to provide services for your directives to use.

angularjs tutorial about Hijacking Existing HTML Attributes with Angular Directives

Hijacking Existing HTML Attributes with Angular Directives

3:55 angularjs

Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique in our own applications. We will build a directive that adds additional functionality to the src property of an <img>

angularjs tutorial about AngularJS Architecture: Control your promises with $q

AngularJS Architecture: Control your promises with $q

6:26 angularjs PRO

Learn how to manually control how asynchronous requests are handled with the use of promises. Because $http is built to work with promises, we saw a foreshadow of them in the previous lesson. We will take this a step further but seeing how to manually create a promise and then resolve or reject it as we see fit.

angularjs tutorial about AngularJS Architecture: Using $http to load JSON data

AngularJS Architecture: Using $http to load JSON data

7:21 angularjs PRO

Now let's learn how use the $http service to make requests to remote servers. In our case, we will load the data from JSON files and then make them available in our controllers. We will see a few techniques that I frequently use to make working with $http data a lot more convenient.

angularjs tutorial about AngularJS Architecture: Refactor to a data model

AngularJS Architecture: Refactor to a data model

5:53 angularjs PRO

Let's continue to refactor Eggly by introducing a valuable concept known as model promotion. We will start to extract the categories and bookmarks collections from the MainCtrl and promote them to their respective models. We will then learn how to consume those models at the controller level to populate the view.

angularjs tutorial about Adding custom methods to angular.module

Adding custom methods to angular.module

3:31 angularjs PRO

There are situations where you might want to add additional methods to angular.module. This is easy to accomplish, and can be a handy technique.

angularjs tutorial about Use protractor to catch errors in the console

Use protractor to catch errors in the console

2:23 angularjs

Protractor gives you access to the console log while it is testing. This functionality could be used to verify that no errors are occurring, or other similar things you might want to test.

angularjs tutorial about AngularJS Architecture: Prefer the 'controller as' syntax

AngularJS Architecture: Prefer the 'controller as' syntax

5:02 angularjs PRO

As of Angular 1.2, the use of $scope injectable has been greatly reduced in favor of the "controller as syntax". We are going to take a quick look at cleaning up Eggly to follow this best practice.

angularjs tutorial about New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

1:19 angularjs PRO

ngModelOptions in angular allows you to set several handy options of your ngModels, including the timezone for dealing with dates and times.

angularjs tutorial about New in Angular 1.3: ng-model-options getters and setters

New in Angular 1.3: ng-model-options getters and setters

3:34 angularjs

With ngModelOptions in Angular 1.3 you can turn your model into a getter/setter function to have greater control over your model.

angularjs tutorial about Automated screenshots of your e2e Protractor tests

Automated screenshots of your e2e Protractor tests

7:52 angularjs

It can be useful to capture screenshots of your end-to-end functional tests with protractor. Because protractor tests are "just node", it is very straight forward.

angularjs tutorial about AngularJS Architecture: navigating between states with ui-router

AngularJS Architecture: navigating between states with ui-router

5:00 angularjs PRO

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 ui-sref directive.

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

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

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

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 AngularJS Architecture: Using Sub-Modules

AngularJS Architecture: Using Sub-Modules

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.

angularjs tutorial about Lazy Loading non-Angular Libraries with ocLazyLoad

Lazy Loading non-Angular Libraries with ocLazyLoad

1:06 angularjs PRO

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

angularjs tutorial about AngularJS Architecture: File Structure

AngularJS Architecture: File Structure

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 AngularJS Architecture: Series Introduction

AngularJS Architecture: Series Introduction

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

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

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

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

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

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

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.

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