AngularJS is simply a framework that makes it easier to build single page and web applications.
- [Instructor] Before we get started, let's take a look at what AngularJS is. Now, AngularJS is simply a framework that makes it easier to build single-page web applications. A framework is simply a way to structure your programs so if we write code using the framework, it makes it easier to build complex functionality. One way that AngularJS makes this possible is by the use of directives, or commands that you can add to HTML to give it superpowers. They look just like HTML attributes that you would add to a normal tag.
Now, another interesting feature is the ability to bind the model and views together, this is called data binding and AngularJS has a unique way of doing this called two-way data binding. Now, that means that if something in the template causes the value of a variable to change, that something will also cause the scripts to do something related to that change. They're both tied or bound together. We're going to take a look at this concept in this course. In order to add Angular data to your HTML, AngularJS uses double curly braces to create expressions.
Now, there are some advantages to this approach, but it's a completely different way of thinking about things and so, a lot of people tend to use what they already know, or they have a lot of projects that are already built with AngularJS and they want to stay within the same structure. Another reason to stay with the first version of Angular is that it's pretty stable. The version of Angular is currently on a schedule that updates to a major revision every six months and that can be really disruptive if you've got a lot of code to maintain and you don't have time to do major revision of your code very often.
Also, the new version of Angular requires a lot of tooling in order to work, so it takes longer to set up. With AngularJS, all you have to do is load up the <script> tags into your HTML, so it's as easy as installing something like jQuery or Bootstrap. Now, in order to download AngularJS, you need to go to this website right here and then you want to pick the Download AngularJS link. This is where you can find the new version of Angular. If you click on this, you're going to be met with this sort of link right here where you can pick different versions of the framework.
Now, the easiest thing to do is just click on the Download button. There are a lot of differences between, say, the Legacy version and the latest version, you probably want to stay right here. Choose the Build if you want to control whether you want the smaller Minified version of the framework, or you want to do something to the framework, so you would choose the Uncompressed version. Now, you can also load the framework from CDNs and this is how you load the basic AngularJS file, just from a CDN so that you don't have to download anything.
Now, if you want to use some of the more advanced features like routing, you're going to need to click on Browse additional modules. Now, here you can see all of the different modules and this one right here is the official version of AngularJS all compressed into a single ZIP file, so this is sort of a good one to get, but if you need to download the routing version of AngularJS, you could just click on this right here. And these are the two that we're going to use in this course. Now, thankfully, I have already done all this work for you and downloaded these versions into our GitHub repo, so make sure that you watch the Exercise Files movie before going on onto the next video.
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