This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    ng-view

    John LindquistJohn Lindquist

    AngularJS's ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (typically the index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    John Lindquist:  Now that we've talked about template URLs, and we've looked into loading in other HTML files into our app by setting up a Web server, it's the perfect time to segue into something called ngView. Now ngView is going to allow us to go into our app and set up. The config function is when you can still only access the providers. You can't access the actual... For instance, I'm going to access the route provider. I can't access the route object. The route and the services, and everything aren't ready yet. This is before everything's ready. This is the time to say things like, route provider. You can configure it for when it's injected into other things. Well say, when the path is this... If you are used to any other Web framework, there's always some routing. This is just basically how it's done here. When the path is just slash, we'll say, the template URL is going to be ‑‑ we'll just call it app.html, and then our controller is going to be our app controller. Let's set up our app controller here. We'll say, app controller and with a scope. Then our scope model message, this is my app. If you can see what's going on here, we're just going to load in a template called app.html. We're going to give it a default controller of app controller, which we define here. Then if I just simply create the view, just say, we name it app. Let's delete all of this. Let's put a big h1 in there. We have our binding to the model message. That should be ready to go. We have, this is my app. The way this was wired up, just a quick review, all we used was this one simple tag. Any single‑page app, you want to be able to change pages. This is the way to change pages, because ngView tag relates to the routing and the route provider. It's going to check the URL. It's going to load based on this object. There's some other options we'll get into later. Based on this object, the template URL, it's going to look up this. We talked about the template cache in another video. Load that in there. Apply the app controller to it, so it gives us this scope with the model and message on it. Then, we'll just plop that right into our template that we load up. That's ngView. We'll go into more detail soon.

    Discuss

    Discuss