Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds


Free Preview: Introducing Angular Components


  • Overview
  • Transcript

The Angular team has updated AngularJS 1.5 with some of the new features from version 2. One of the biggest additions is support for Web Components. Web Components are a new standard that allows better architecture of web apps for reuse and encapsulation of UI elements.

In this course you'll learn about using components in Angular. You'll learn about what components are and why they're useful, and you'll take a look at when to use them and when not to. You'll follow along as Dan builds a component by refactoring a directive in an existing Angular application, and you'll also visit some additional component-related subjects to further understand how components can be used.

We've built comprehensive guides to help you learn JavaScript, AngularJS, and Angular 2, whether you're just getting started or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

Hi folks, welcome to Introducing Angular Components. Angular components are a kind of cross between an Angular directive and a web component, and are also closely aligned with Angular 2. So, using Angular components today can lead to a smoother migration path when upgrading your projects to Angular 2. We'll start out by converting an existing directive in the example app into a component as this is a common thing that you probably want to do to some of your existing directives. And it should help to highlight some of the fundamental differences between directives and components. We'll cover the different configuration options that we can use when defining a component, see how to associate a template with a component, as well as look at the different lifecycle events that we have at our disposal. So join me in the next lesson and let's get our development area setup and ready to start on the coding examples.

1.2 Setup

Hi folks. In this lesson, we're going to get our development area set up and ready to work through the coding examples. You don't have to do this, of course, but if you want to, you can check out a branch of the repository called component-start and find the files in the exact same state as that portrayed at the start of this course. By the way, if you get stuck at all and things aren't working out, there's another branch that you can check out called component-end. This branch contains the code that we'll end up with at the end of the course. So you can skip ahead to this version and take a look if you need to. So all we need to do to get the source code is clone the repository from GitHub. The repository is up at https://github.com/danwellman/notes, and you can get the link by clicking into the text field next to where it says https. So let's copy that, and then from the command line, we can clone the repository. I'm gonna put mine in my Users directory for convenience and we'll just run the git clone command. So once that's cloned, let's move into the new directory which we can do with the CD or change directory command. So once we're in the correct branch, we'll need to do a quick npm install to download all of the project dependencies. So you should also have Node.js installed. Angular components were released in the 1.5 version of the framework. And the version of Angular that we're using in this course is 1.5.5, which is the latest version at the time this course was produced. So now that we're all set up, let's take a quick look at the project as it stands right now. In the root of the project, we've got some loose files including some configuration for Git, JSHint and Grunt. And we've also got LICENSE and README files and a package.json file that describes the project as an npm package. The working code for the example app resides in the app folder. And once we open this up, we can see that it contains a number of directories as well as an app.html file. This file loads all of the dependencies and hosts most of the markup for the application. There are folders in here also for CSS, JS, SCSS, templates and third party vendor code. The css folder contains the generated CSS for the application and we shouldn't update this manually. To change the styling, we'll want to work on the Sass file inside the scss folder. The js folder contains the controllers, services and directives that make up the app. And the templates folder contains a view template for the modal used by the application. We've also got a grunt-tasks folder, which contains the different Grunt tasks that come preconfigured with the example app. We have tasks to clean, run JSHint, compile the Sass into CSS and run the unit tests. There's also the node_modules folder, which contains the project dependencies and which gets installed by the npm install command that we have just run. Lastly, the test folder is where some Jasmine unit tests can be added. We aren't going to be adding any tests for our component in this course. The reason this folder exists is because I used this example app in a series of other courses that look at unit testing the various parts of an Angular application including Angular components. So be sure to check out those other courses, too. So now that we've taken a quick look at the structure of the project, let's just see the example application in action. It's a simple app for creating and storing plain text, simple notes. So on the left hand side here, we have a sidebar, and this is where we can access notes that are saved. If we want to create a new note, we can hit the New note button up here and then we can add our note. And once we've started typing into a new note, the Save note button becomes available. And if we hit that, it opens up a modal that lets us enter a title. And the new note now appears in the sidebar. And, of course, if we want to delete a note, we just need to hit the Delete note button and the new note is now gone. So the Save dialogue, where we entered the name for the new note, that is currently a directive. And that's what we're going to be converting into a component over this course. So, in this lesson, we checked out the source code and took a quick look at the structure of the project, the existing code, and we saw how it behaves in the browser. Thanks for watching.