Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



The config function

2:55 Angular 1.x lesson by

AngularJS 1.2.x Routing Changes: ngRoute

In AngularJS 1.2.x routing has changed. It is now required that you explicitly import ngRoute in your applications! This lesson uses an older version of AngularJS that pre-dates this change.

Load the ngRoute library
<script src="angular.js">
<script src="angular-route.js">
Import the ngRoute module
angular.module('app', ['ngRoute']);

Scroll down to view the full corrected code for this lesson.

This episode explains the config phase of an AngularJS application and how is it special in regards to $routeProvider (routing configuration) and providers in general.

Get the Code Now
click to level up

AngularJS 1.2.x Routing Changes: ngRoute

In AngularJS 1.2.x routing has changed. It is now required that you explicitly import ngRoute in your applications! This lesson uses an older version of AngularJS that pre-dates this change.

Load the ngRoute library
<script src="angular.js">
<script src="angular-route.js">
Import the ngRoute module
angular.module('app', ['ngRoute']);

Scroll down to view the full corrected code for this lesson.

egghead.io comment guidelines

Avatar
egghead.io

This episode explains the config phase of an AngularJS application and how is it special in regards to $routeProvider (routing configuration) and providers in general.

Avatar
Alexander

Hello, I'm wondering about the following thing:

I have Project structure with an Index.html code and many directories where I put html templates and corresponding css, and js files.
in js files I have .config with routs and .controller with a controller.

The problem is:
When I develop my application everything works just fine, but when I build my app using Grunt the "public" folder appears with index.html and uglified js files. After building my /paths are broken and templates do not work anymore.

How to get rid of that? Thank you

In reply to egghead.io
Avatar
John

It sounds like you'll have to configure your Grunt build deploy directories to what you really want them to be. I don't know what you're Grunt tasks look like, but telling the task to place your files in the directory you expect should be fairly straight-forward.

In reply to Alexander

John Lindquist: I want to take a second to talk about the "config function" and "providers" without going into too much detail because we will create our own providers later.

We are going to be using the "route providers" quite extensively so let's dive into it. If I try and inject the route provider into my app controller and see if I reload this, it will say, "unknown provider, provider, provider." Meaning that it is looking for a provider with the word "provider" on the end. This is actually unavailable, because it is looking for a service being created by a provider.

What that means is, what you actually do is you inject the route in here and it's going to find the route so no error. It's going to find the route because it found a provider.

Now if I were to try to inject route in here, I see an unknown provider route.

So at this point, in this phase, if your application is configuring it, all you have are these providers, which are the factories which generate an instance of things like "route," is the service that comes from the route provider.

At this point, when you are configuring your app, you are basically saying, "When I generate route, this is how I want it to appear." If you were to try for instance, you can actually access all the stuff you see in here from the route itself. So you could say, "a route routes." Access it like this, then try and paste in this guy. That's totally the gist.

It's just that if I do that, I am going to see a "Run Fine." So no errors were thrown. But what's going on is, this is way too late in the process because we need to reference the app controller so it can be initiated when you navigate to this URL. It has no idea that when you navigate to that URL that it wants to [inaudible 02:03] app controller.

Now you are going to see that its way too late. We can't find any controller and the services are not expected to do anything because the configuration needs to happen before you inject it into anything you want to use it in.

Just a quick review, again, these providers are available in the config function. You can generate your own, we'll talk about that later. But in the config function, we're going to be injecting a provider which will then...When you try to access the instance of it like a route, inside the controller then you can get things. A pre-configured instance based on what you do to configure it in here.

That's the basics of "provider" and we are going to dive a lot more into route provider here next.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?