If you've ever worked with something like BootStrap or JQuery Mobile, you're probably familiar with how this works. You do things a certain way, and that gives you super powers. Now, Angular JS is designed to allow you to create single page applications. That means that regardless of the size of your application, your browser is going to load a single page. Additional content will be loaded into the application as needed. So, don't worry that you won't be able to load other quote unquote pages. Your users are not going to know the difference. And, in some ways this is going to be faster, since your site loads only the content it needs, instead of an entire page.
So, in a real application that will look something like this. You have regular index.html page, which right now you can see is very short. And then you have additional partials for the different pages. So, you may have a partial for listing some of your content as well as a partial for detailed information and that would look like this in your application. This is a partial that shows not just the main document, but also a list of some of the data that you have in your application. And if you click on one of these You go into the detail view and you can go through the different data by clicking on these icons right now.
And Angular will replace those tags with data. So let me show you one of those. Now as you can see right here in the Details page, you have special tags like previous item and next item. They're wrapped around these curly brackets and you have a place right here where the picture of the artist will get inserted into this template. Here's where the bio would go and you can see We use another one right here to populate the all tag. That gets converted by tying it into data into a page that looks like this. Now, unlike other templating engines, Angular doesn't make you build the template separately like some other libraries.
Your templates are an integral part of your HTML. So, it's easier than using libraries like Mustacheor JS or handle bars, another great feature of AngularJS. Is the way that it works with html's Document Object Model, or DOM. In traditional applications, you have to worry about checking for event triggers. With Angular, the data is directly bound to your template. So pulling in your data or interacting with your elements lets you populate your html. So let me go back to the beginning page here. So I have a form element and right now, you can see that the template that I have for this content, automatically gets populated with my data.
So let's talk about some of the core features behind AngularJS. Angular uses something called Directives. And you place those in your HTML. Directives are nothing more than commands sprinkled throughout your HTML. Those commands tell Angular to do its job. The commands begin with a letter ng and then a hyphen. So if you look at some AngularJS code, you can see attributes in your HTML like this ngApp attribute. As well as this command right here called ng-view. Whenever you see something in an Angular template that starts with ng, it means that it's directive.
Data-binding is what makes templating possible. You can create placeholders for content as we saw when we looked at the templates, and that gets linked to data information. But you can also create form elements that are tied to the data. So in our sample application, this form right here is tied to the view or this data. So we can for example type in part this name and the application updates just to show us just the records that match this data. If you look at how that's implemented, it's actually pretty cool. Take a look at this list view right here.
We can see that we essentially have a normal input field right here. And all we're doing is tying this to a query attribute. That query attribute is going to be used to create a filter that organizes the data in this template right here. Speaking of filters, Angular has a filtering language, so that data can be organized in a certain way automatically. Or easily change by form elements. Once again, if we go back into our code, we can see that we have a couple of input fields right here. And these input fields are tied to a model called direction.
Modules make your code easier to maintain. This particular application has a single module, but there's no reason why you can't create multiple modules for different functionality in your applications. Routes lie at the heart of any single page application. It lets you divide your templates so that the functionality behind your application can exist in different places. So if we take a look at the code for our application, you'll see that we have two different routes right here. This one sends the application to a partial called a list.
So that it uses this template whenever somebody puts slash list in the URL and whenever somebody goes to a detail page by using this URL you go a different details template. We took a look at those earlier their in the Partials folder under list or details. Now controllers are how you tie this together. So if we take a look at the controllers in our application, we have a separate file for those, you can see that the functionality for each of our different views is controlled by these different controllers. We have a list controller and this one's loading up some data.
- What is AngularJS?
- Working with complex models
- Using a the $http service to read a JSON file
- Binding data
- Dividing your app into partials
- Creating a details template
- Using AngularJS animation events
Skill Level Intermediate
Q: This course was updated on 12/11/2015. What changed?
A: We updated two movies ("Creating our details template" and "Adding navigation to our details page") to reflect changes to AngularJS 1.4.8 and the 1.5 beta.