Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Learn AngularJS 2: The Basics.
- View Offline
- [Voiceover] Angular JS 2, The Basics doesn't use an Exercise Files folder. However, I've prepared a GitHub repo at this URL with all the necessary files so that you can work with the videos in this course. If you don't want to go through any complex installations, you can jump into our practice environments where all the setup has been done for you. If you do want to install the files on your machine, you're going to need to be familiar with Git and GitHub, as well as installing NPM modules.
I've got a couple of courses that could walk you through that, including Up and Running with NPM, the Node Package Manager, as well as Up and Running with Git and GitHub. So make sure you watch those courses before watching this one. If you do need to install Node.js and Git, you need to go to this website where you can get Git for your platform. It's a pretty easy installation. You click on the link and go through a regular installer, and installing Git on a PC is especially useful because it gives you a shell that you can use that is more similar to a regular Unix shell called GitBash.
Now you can go to the NodeJS website and click on the download link and go through the installer to get that version of Node.js and NPM. Once you do that, you're gonna need to install TypeScript globally into your machine. To do that, you can click on this download link and it's going to give you the script that you'll need to type in your terminal application, or GitBash on a PC, to install TypeScript for your system. So I'm gonna copy this and switch back over to the terminal, and I'm going to paste this to make sure that I install TypeScript.
On a Mac, you'll sometimes get these errors, and that depends on how your permissions are set. If that happens to you, just use the sudo command like this in front of the npm install -g typescript command. You may need to type in your password. You'll also need to install a copy of Gulp.js to run the examples on this course. So I'm gonna click on Try it now, and this will give you the string that you'll need to type in your terminal in order to install Gulp.js I'm gonna copy that, issue that command, and since I know I need sudo on this machine, I'll type that in the front of this command.
In order to get the files for this course, I prepared a special GitHub repo with everything you're gonna need for this course. What you need to do here is copy the link to the repo by clicking on this button in your browser. I'm gonna switch back to the terminals, and because I want to copy all of the branches for this repo, not just the master branch at the end of all the videos, I need to type in some commands that are a bit different. So first I need to make sure that I'm on the desktop, so cd ~/Desktop and I'm going to make a directory, I'll call it angular2.
I'm going to CD to that directory, so that'll take me into that one, and then I'm going to issue a git clone command, and I'll add the --bare option, and then I'm going to paste the location of the repo from my clipboard, and make sure that I also add a .git at the end. This will clone a bare version of the repo. Once that's done, I'll issue a git config -- bool and then a core.bare false command here.
This will switch the bare repo to a normal version of a repo, and then I'll issue a git reset --hard command, and now you'll see that if I do a git branch command, I'll have all the branches for this repo. One thing you should note is that all my branches are named in very specific ways. So for example, if you see a branch that is named 0202, that means that that branch comes from the second chapter of the course, and this is the second movie, and the b indicates that this is the beginning version, or what I started with at the beginning of that movie.
Of course, e means that that's what I ended up with at the end of the video on that movie. You can check out any branch in the course by issuing a git checkout, and then the specific branch. So you can checkout 0207b by issuing this command. Of course, you can also go back to the master, which is the finished version of the project, by issuing a git checkout master. Before you do anything else, make sure that you run an npm install command.
This will install all of the dependencies for this project. I know I need a sudo command at the beginning of this in order for the permissions to work properly on my machine. Once all that is installed, I'm going to run a gulp command, and that should run the animation for this project. Now this should bring up a finished version of the project up on your screen. I'll start each video with a copy of the folder in the right branch opened up in my favorite text editor.
Although I'm using Atom, you can use whatever editor you want for this course.
In these tutorials, Ray Villalobos shows you how to start using AngularJS 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, find out how to change content dynamically using data pipes.
The template is included as a free download for all members.
- What is AngularJS 2?
- Setting up our template
- Creating a simple component
- Using multiple modules
- Displaying data in our templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes