7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Setup

Let’s get our development area set up and ready for the coding examples. In this lesson, you’ll see how to get the source files for the example and run the application.

Related Links

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.

Back to the top