- Be able to use ngRoute
- Be able to associate different templates with different routes
- Be able to wire up a custom angular service
- Be able to get user input from a form
- Be able to share data and functions between two controllers using that service
- Be able to use the Angular $location service to redirect a user after an action
Use the included Angular application to practice implementing routes, controllers, and services in an Angular app.
Take it one step at a time, ensuring along the way that each step has been successfully completed.
Don't just copy and paste from a past exercise!! Try to remember and look things up online!
ngRoute is an Angular module that we can use to add routing to our application.
There are 3 steps for setting up ngRoute. See if you can remember them. (Don't add any routes yet! Just get ngRoute configured in your app)
In your route configuration, add routes for the following:
All Messages
When a user visits /
it should:
- render
messages.html
- use the
MessagesController
Post A New Message
When a user visits /new
it should:
- render
new_message.html
- use the
PostMessageController
Other than configuring the above routes, a few more things need to be done
to get everything wired up. See if you can remember. You'll know you've got it right when you see the Success!
message on each page. Stay calm!
The factory has been built for you, you just need to get everything talking.
This requires two steps similar to previous steps you've taken to wire up new things.
In MessagesController
add the following:
$scope.vw.messages = MessagesService.all;
In messages.html
add the following:
<div class="well" ng-repeat='message in vw.messages'>
<h2>{{message.id}}. {{message.text}}</h2>
</div>
You know you're successful when you see the seed message displayed
Now it's time to take in user input and add it to our messages array using our
service. But this time, we'll use the PostMessageController
.
Remember to take it one step at a time.
- Use the
ng-submit
directive to trigger a function on submit - Use
ng-model
to get the user input - Pass the model into your
ng-submit
function. - In the
PostMessageController
see if you canconsole.log
the user input
- Just like you did in
MessagesController
, inject our service intoPostMessageController
In PostMessageController
:
- In your submit function, call the
add
function from our service and pass in the user input.
If you're stuck, look back at the MessagesController
. How did we use our service
there?
$location
is an Angular service that we can use to tell the app what url to go
to after certain user actions are triggered. In this case, we want to redirect
the user to /
after they submit a post so they can see it displayed.
Go to the Angular docs for $location
and see if you can figure out how to
use this service to add a redirect to the end of your submit function. It is two
simple steps, so see if you can scan the docs to find just what you need.
STUCK?
- Did you include the
script
in yourindex.html
? - Did you inject the dependency into your controller?
- Are you missing the
angular-route
CDN?