ng-view

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 5 years ago

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.

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.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today