Browse all Angular 1.x lessons.

showing All 334 lessons...

Create a Top Level Angular Application Component

P

Introducing Angular 2 Concepts in Angular 1

Angular Material: Theming and ARIA

Angular Material: Adaptive Layouts

Angular Material: Using a BottomSheet

Angular Material: UI Components with Dynamic Data

Angular Material: Intro to UI Components

Angular Material: Containers with the Layout API

Angular Material: Installing with NPM

Updating Babel 5 to 6

P

Create Modals with Ionic

P

Build a Powerful List with Ionic

P

Convert a UI Route into an Angular Directive

P

Build a Sidebar Layout with Ionic

P

Device Interaction in an Ionic App with Cordova Plugins

P

Prepare an Ionic App for Ionic Components and Styling

P

Build, Emulate, and Debug an Ionic App

P

Convert a Web Application into an Ionic App

P

Build and Run an Ionic App from Scratch

Using Angular's ngClass

P

Upload and Share an Ionic App

P

Build and Run an Android Application with Ionic on a Mac

P

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
angularjs tutorial about Create a Top Level Angular Application Component

Create a Top Level Angular Application Component

4:31 angularjs PRO

The entry point for any Angular 2 is a single, top-level component that all other components branch off of. We will apply this pattern to our Angular 1.x applications by creating our first component using the .component syntax and adding it to our application to serve as our root component.

angularjs tutorial about Introducing Angular 2 Concepts in Angular 1

Introducing Angular 2 Concepts in Angular 1

2:42 angularjs

In this introductory lesson, we will discuss how the architectural concepts of Angular 2 can be applied to AngularJS 1.x. We will also take a brief tour of the concepts that we will be covering in this series as well as how the code is structured per lesson.

angularjs tutorial about Angular Material: Theming and ARIA

Angular Material: Theming and ARIA

3:33 angularjs

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows.

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

This course presented by Thomas Burleson and Aaron Frost

angularjs tutorial about Angular Material: Adaptive Layouts

Angular Material: Adaptive Layouts

5:43 angularjs

Both flexbox CSS and the Angular Material Layout allow web applications to respond to the size of the browser at any given point. No matter what the browser width may be, the web app adjusts its layout sizing accordingly. Combine responsive functionality with media query support and your web applications will have adaptive features to adapt to the width of the browser at a specific points. More than fluidly adjusting the widths and heights of elements, Adaptive applications can change the rendered UX with new positions, new components, and new styles. Angular Material Layout hides the complexities of implementing adaptive features with a singularly unique and simple HTML syntax.
Let’s use the Adaptive extensions of the Angular Material API to hide the SideNav on small devices (like iPhone or Android). We will explore the use of the $mdMedia service to easily lock open the SideNav on larger devices. And we will see how the $mdSideNav service can be used to programmatically close the SideNav after a user is selected.

This course presented by Thomas Burleson and Aaron Frost.

angularjs tutorial about Angular Material: Using a BottomSheet

Angular Material: Using a BottomSheet

7:03 angularjs

Most Angular Material UI components are declarative and used directly in the HTML markup. Some components, however, are programmatic and must be configured and invoked from Javascript. Programmatic components have a short-term, limited DOM lifespan and include Dialogs, Toast, and BottomSheet.

Let’s use the BottomSheet service to configure and display an Angular Material BottomSheet container which in turn will display a nested, custom Contact Sheet view.

This course presented by by Thomas Burleson & Aaron Frost.

angularjs tutorial about Angular Material: UI Components with Dynamic Data

Angular Material: UI Components with Dynamic Data

4:34 angularjs

Angular Material UI components have been designed from the ground-up to use dynamic, live data. Supporting AngularJS interpolation, expressions, and databindings… each component exposes an intuitive API and fully supports the existing ng- directives published in AngularJS.

Let’s replace the hard-coded, static HTML with dynamic, mock data using AngularJS data bindings, ng-repeat, and the ng-click directives. Our UX remains unchanged, yet now we are using custom application logic and dataservices.

This course has been created by Thomas Burleson & Aaron Frost.

angularjs tutorial about Angular Material: Intro to UI Components

Angular Material: Intro to UI Components

2:57 angularjs

Angular Material provides over 30 UI components and services. The framework offers a suite of components and containers: from simple Button components with built-in ink and hover effects, theming, and ARIA support… to more complex container components like mdList and Tabs.

Let’s use some of those components in our SideNav and Content containers. For now we will use hard-coded, HTML markup. This allows us to confirm the UX matches that specified in the design docs before we start working on our application logic.

This course has been created by Thomas Burleson and Aaron Frost.

angularjs tutorial about Angular Material: Containers with the Layout API

Angular Material: Containers with the Layout API

3:40 angularjs

The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts.

In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.

This course has been created by Thomas Burleson and Aaron Frost.

angularjs tutorial about Angular Material: Installing with NPM

Angular Material: Installing with NPM

1:56 angularjs

Learn how to install Angular Material with npm install and load the required libraries and stylesheets into your blank web page.

This course has been created by Thomas Burleson and Aaron Frost

angularjs tutorial about Updating Babel 5 to 6

Updating Babel 5 to 6

5:00 angularjs PRO

Babel 6 was a major change in how Babel works and is configured. In this lesson, find out how to update this Angular application built with Webpack to use Babel 6.

For more information about how modules have changed in Babel 6, see this blogpost by Kent.

angularjs tutorial about Create Modals with Ionic

Create Modals with Ionic

14:11 angularjs PRO

In this lesson, we learn how to build modals in Ionic. We use the ion-modal-view directive to wrap our “create” and “edit” forms with modal goodness, as well as use the ion-header-bar directive to put a nice bar at the top of our forms. Finally, we use the $ionicModal service to give life to our modals by integrating them with our controllers.

angularjs tutorial about Build a Powerful List with Ionic

Build a Powerful List with Ionic

12:38 angularjs PRO

In this lesson, we are going to dig into Ionic lists and make use of some awesome list features that Ionic gives us for free. We are going to learn how to use the following Ionic directives:

  • ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar.
  • ion-list - The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
  • ion-item- Used to create items inside of an ionList.
  • ion-delete-button - A child of ionItem, this element allows a developer to show/hide a delete button within an ionItem with ease.
  • ion-reorder-button - A child of ionItem, this element allows a developer to reorder an ionItem within a list easily.
angularjs tutorial about Convert a UI Route into an Angular Directive

Convert a UI Route into an Angular Directive

2:49 angularjs PRO

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

angularjs tutorial about Build a Sidebar Layout with Ionic

Build a Sidebar Layout with Ionic

8:49 angularjs PRO

In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:
- ion-side-menus - A container element for side menu(s) and the main visible content.
- ion-side-menu-content - A container for the main visible content, sibling to one or more ionSideMenu directives.
- ion-side-menu - A container for a side menu, sibling to an ionSideMenuContent directive.
- ion-nav-view - Used to render templates in your application. Each template
is part of a state. States are usually mapped to a url, and are defined programatically
using angular-ui-router (see their docs for reference).
- ion-view - A container for view content and any navigational and header bar information. Used as a child of ionNavView.
- ion-nav-bar - If we have an ionNavView directive, we can also create an
ionNavBar, which will create a topbar that updates as the application state changes.
- ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar
from within an ionView.
- ion-content- Provides an easy to use content area that can be configured
to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
- ion-list - The List is a widely used interface element in almost any mobile app, and can include
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- ion-item - Used to create items inside of an ionList.

angularjs tutorial about Device Interaction in an Ionic App with Cordova Plugins

Device Interaction in an Ionic App with Cordova Plugins

4:59 angularjs PRO

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

  • item
  • item
angularjs tutorial about Prepare an Ionic App for Ionic Components and Styling

Prepare an Ionic App for Ionic Components and Styling

2:12 angularjs PRO

In this lesson, we are going to include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

angularjs tutorial about Build, Emulate, and Debug an Ionic App

Build, Emulate, and Debug an Ionic App

2:53 angularjs PRO

In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

angularjs tutorial about Convert a Web Application into an Ionic App

Convert a Web Application into an Ionic App

2:24 angularjs PRO

In this lesson, we are going to demonstrate how easy it is to copy existing Angular code into an Ionic app. It is literally as simple as removing unnecessary code from the Ionic app and pasting in the guts of our Angular application. Along the way, we will update some dependencies and discover a gotcha for including assets from a CDN.

angularjs tutorial about Build and Run an Ionic App from Scratch

Build and Run an Ionic App from Scratch

1:49 angularjs

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

angularjs tutorial about Using Angular's ngClass

Using Angular's ngClass

3:07 angularjs PRO

Using Angular's ngClass directive you can dynamically assign classes to the HTML elements in your Angular application. This video will show you several different methods for taking advantage of Angular's ngClass.

angularjs tutorial about Upload and Share an Ionic App

Upload and Share an Ionic App

2:53 angularjs PRO

In this lesson, we are going to take an Ionic App and upload it to our Ionic account. Then we are going to download the app (via another app called Ionic View) and view it on our phone.

angularjs tutorial about Build and Run an Android Application with Ionic on a Mac

Build and Run an Android Application with Ionic on a Mac

8:15 angularjs PRO

In this lesson, we are going to install Android and some other Android dependencies onto our Mac. Then we are going to install VirtualBox and Genymotion and use them to run our Ionic app on our Mac.

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.

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