Join Ray Villalobos for an in-depth discussion in this video Using the exercise files for this course, part of Learning AngularJS 2.
- [Teacher] All the files for this course are freely available in GitHub for all users at this URL. And on GitHub, you'll see that the project is organized into branches. Each branch corresponds to a video in the course. They're named according to the video they correspond to. If you see a branch that starts with a name like 02_01, that means that the branch corresponds to the second chapter and the first video. Also, if you see a b at the end of the name, those are how the files look at the beginning of the video.
And if you see an e at the end of the name, that's how the files look like at the end of the video. You can use GitHub if you just want to see the files at that state. The best way to work with the project is to clone all the branches at once. In order to do that, you'll need NodeJS as well as Git installed. You can find NodeJS and download the installer at this URL, and you can find Git and download the installer for your platform at this URL. When you install Git, make sure that you add the Git Bash terminal in Windows.
It makes running the commands a lot more consistent. So let me show you how to clone all the branches for this project. First, I'm going to go to the GitHub repo, and I'm going to click on this button, and click right here to copy the link to the repo to the clipboard. Once I do that, I can switch over to my terminal. And on a PC, I would want to use something like Git Bash or anything that is compatible with the Unix terminal commands.
And now I want to make sure that I'm on the desktop, so I'm going to issue a cd ~/Desktop command, and then I'm going to create a directory for this project. I'll use the mkdir command and type in learnangular. Now I'm going to switch over to that directory with cd learnangular, and now I can issue my git clone command. It's going to be a little bit different than most git clone commands. I'm going to say git clone and issue the bare option.
The bare option is going to download just the contents of the git folder. Now I can paste my URL, and I'm going to add an extra .git right here. Now I need to use the git config command. We can change a boolean variable called core.bare to false. That's going to change the repository from a bare repository to a normal repository. Now I issue a git reset --hard command, it's going to reset the HEAD pointer and convert this to a normal repository where we can see all the branches for this project.
Let's go ahead and clear this out and issue a git branch command. We can see all of the branches that are available at this GitHub repo. Before we do anything, we need to issue an npm install command so that we install all the dependencies for this project. If you have a Mac and you get any errors here, you may want to put sudo in front of the npm install depending on how your permissions are set. If you're a Windows user who has just installed NodeJS and you get an error here saying Bash Not Found, then you'll have to restart your computer before going further.
Alright, let's go ahead and clear this out. In this project, I'm using npm scripts for my animation. So now I can issue an npm start command, and this will open up a browser with the final version of the project. If I go back to my terminal, I can hit Control+C, let's clear this out, and switch to any other branch in the project. Let's go ahead and issue a git branch command and switch over to how the files look at the beginning of the second chapter in the first video.
We can switch to any branch in the course using the git checkout command. If you get some errors while you're trying to switch because you have maybe made some modifications and have committed them, you can issue a git stash command and then issue a git checkout command to the proper branch. If you've made some modifications and you just want to rewind to how the files looked at the beginning of the checkout, you can issue a git checkout . command. I'll start most of the movies with this folder open in my favorite text editor.
I'm using Visual Studio Code and with the npm start command already running. Visual Studio has an integrated terminal, which you can get to from the View menu, where you can issue any of these commands. If you're running a Windows operating system, the terminal in Visual Studio Code will default to the command prompt. If you want to run Visual Studio Code with the Bash terminal, you may need to edit your user preferences in order to make this work. Go to the File menu, then Preferences, User Settings, and add the following code, which I placed at this gist.
You can get more information about why this is necessary at this URL. There's lots of other ways to use Git and GitHub. For a quick introduction, check out Up and Running with Git and GitHub. For a super detailed treatment, you can also check out Git Essential Training. Now that we're ready to get going, let's get started with our application.
In this course, Ray Villalobos shows you how to start using Angular 2 in your own projects. He starts by defining what exactly Angular 2 is and how it differs from AngularJS 1. Then, once the basics are out of the way, he sets up the template that will drive the project and starts coding. Ray shows how to divide your project into modules, work with events, style content with CSS, and create components and subcomponents. Plus, you can find out how to change content dynamically using data pipes.
Note: Members can find a template to download in the exercise files.
- What is Angular 2?
- Setting up a template
- Creating a simple component
- Using multiple modules
- Displaying data in templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes