Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Learning AngularJS 1.
- [Instructor] All 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. They're named according to the video they correspond to. If you see a branch that starts with a name like 01_03e, that means that the branch corresponds to the first chapter and refers to the third video in that chapter. 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 looked at the end of the video. The best way to work with the project is to clone all the branches at once. In order to do that, you'll need to have node.js as well as git installed. You can find git at this URL and if you're on a PC when you install git, make sure that you add the git bash terminal in Windows. It makes running the commands more consistent. Now to download node.js, you can do so at this URL. 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 then click on this copy to clipboard button. Once I do that, I'm going to switch over to a terminal application. On a PC, I would use git bash. And then I want to make sure that I'm on the desk top so I'll do a cd ~/Desktop and then I'm going to create a directory for the project. I'll call mine angular. And then I'm going to go to that directory cd angular and once I do that, I'm going to issue a git clone command with a --bare option and then I'm going to paste the URL from git, and then add .git at the end.
This will create a bare git repository which is pretty much a git repository with the invisible git folder in it. Once I do that, I need to convert this to a regular repository so I'll need to issue two different commands. I'll use git config --bool and change a variable called core.bare to false. Once I do that, I also need to issue a git reset --hard command and now this will be a regular git repository.
If I issue a git branch command, I should be able to see all the branches for the project. The next thing we need to do is install the project appendices we'll need for this project to run properly. In order to do that, I need to issue an npm install command. Once I do that, I'm going to clear the screen. You should start the videos with the project opened in your favorite text editor. Look for the index.html file. In this course, I'll be using Visual Studio Code.
Now this project uses gulp.js to create and run a simple server which is required for angular projects that use the hctp as well as the router service. I've already created all the animation you'll need to run the gulp process, open up the terminal, and run the gulp command. This will open up the finished version of the project in a browser. I'll always have the gulp process running in my terminal at the beginning of each video.
Now this is now showing the code from the end of the course. If you want to watch a video, say, at the beginning of the course in chapter two and the fourth video, then we're going to need to create a new terminal window, make sure that we're in the project, I'll do cd ~/Desktop and the project name is angular and I can go to a different branch by issuing the git checkout command and then specifying a branch name.
Here, I'm going to pick in the second chapter, the fourth video and I want to see how the code looked at the end of that video. Now if I switch back to my editor, you can see that the code looks a little bit different. If you need more help learning to work with git and GitHub, make sure you take a look at this course Learning Git and GitHub. It's a simple introduction to both of those projects that'll make it easier to work with this course.
In this short, practical course, Ray Villalobos uses AngularJS to build a searchable directory—a project you can use as the basis for your own employee or user directory. He explains the MVC architecture underlying AngularJS, and the differences you can expect to encounter in Angular 2. Then he shows how to control the display of DOM elements and data; use services like $http and $routeProvider; modify content with filters; add two-way data binding; and work with routes and templates. Start watching, and learn the simple way to build your own complex web application with AngularJS.
- What is AngularJS?
- Binding data
- Defining modules and controllers
- Using the $http service to read a JSON file
- Controlling app logic with conditionals and loops
- Filtering content and lists
- Deep linking