Join Ray Villalobos for an in-depth discussion in this video Working with the exercises, part of AngularJS 1: Building a Data-Driven App.
- [Narrator] The files for this course are freely available in GitHub for all users at this URL. In GitHub you'll see that the project is organized into branches. Each branch corresponds to a video in the course. So, for example, 01_02 means that this is how the files looked at the beginning of chapter one, video two. The b at the end means that this is how the files looked at the beginning, and if you see an e, it means that that's how the files looked at the end. So for example, 02_01e would be how the files looked in chapter two, video one, at the end.
You can clone this repo into your local hard drive if you want to follow along. The best way to work with the project is to clone all of the branches at the same time. To do that you'll need to have Node.js installed as well as Git. You'll also need a terminal like Git BASH or something that will allow you to use UNIX commands if you're working on a PC. You can get Node.js at this URL and get a copy of Git from this URL. When you install Git, make sure you add the Git BASH terminal in Windows.
It makes running the commands more consistent. So let me show you how to clone all of the branches in this project. From the GitHub page, I'm going to click on this button right here and then click on this icon to copy the Git URL to the clipboard. Now I'm going to my desktop, and I'm going to open a terminal, and on a PC you would be opening something like Git BASH. Now, the first thing you want to do on your terminal or Git BASH appication is make sure that you are in a location that's easy to find.
I'm going to switch over to my desktop so we can see everything on the right. So I'll do a cd ~/Desktop, and then I'm going to create a directory. That makes a folder on your desktop. I'm also going to change to that directory, and now I'm ready to clone the GitHub repo. I'm going to issue a Git clone command with a bare option. That makes it a special kind of repository that will allow us to download all the branches at once.
Now I'm going to paste a link from GitHub, and I'm going to add and extra .git at the end. Once I do that I need to change this from a bare repository to a normal repository. So here I need to issue the git config - -bool core.bare false. Now I need to issue a git reset --hard command, and if I clear my screen and do a git branch, I can see that I've downloaded all of the branches for this project at once.
I'm in the master branch, which is the final version of the project. Now, after you do this the next thing you want to do is to issue an npm install command. Npm install will install all of the automation necessary to run this project. Once npm install is done, lets go ahead and clear this, and now I should be able to issue the gulp command. This will start my automation, open the project in a browser, and run a server.
Let's go ahead and cancel this automation by hitting control+C, and I'll clear the screen. Let me show you how you can switch to another branch. I'll issue a git branch command. Take a look at all the available branches, and let's say that I want to go to the way the files looked at the end of chapter three, movie five. I'll issue a git checkout 03_05e. Now, all my files look like how they looked at the end of the third chapter in the fifth video.
I can pull this up into a text editor. Here's my folder I'm going to open up in the Atom text editor, and this is how my files looked at that point in the course. Now, if I do make some changes to this project, and I try to switch to another branch, I may get an error like this. That means that the changes that I've made would be overwritten by the checkout. To fix that, I can issue a git stash command, that puts the files away, and then issue a git checkout command.
I'm going to checkout master again. I'm going to start every video with the gulp command running in the background and the files opened in my text editor as well as in my browser. If you want to learn more about Git and GitHub and how this process works, check out Up and Running with Git and GitHub. You should definitely be comfortable with Git and GitHub, as well as running gulp processes before taking this course.
Learn how to create forms, edit database records, create methods, randomize record selections, and style and secure your app. With these project-based lessons, you'll learn how to see how data-driven programming with AngularJS can help your apps react to real-time data streams.
- Customizing an Angular template
- Adding forms to create meetings and check in users
- Adding, showing, and deleting database records
- Using events to track meetings
- Adding a form to the app
- Creating methods
- Randomizing prizes
- Creating conditional styles
- Managing app permissions