Pass value to a template pages using Angular - angularjs

Question

I'm pretty new in Angular since today. :)
I've followed a lot of tutorials since this morning and for each one the same question from my side without answer.
I saw that my navigation could be as simple as the following:
<h3>HTML</h3>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
JS
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
But how it works if I need to page some value to a template page ?
And how can I get this passed value to use it in my template page ?
Thanks for your help.

Answer 1

Simply
define variable in controller $scope.variablename=value;
access in template as variablename inside double quotes or access as {{variablename}} outside the tag.
Don't forget to inject $scope dependency in controller.

Answer 2

Its all about using REST.
So lets say you want to pass a email id to your contact page, this is how your code would change.
//change in your html link. I have hard coded email for convenience. You could get it from $scope
<li>Contact</li>
Then you have to add the variables in your REST URL
//changes in your app.js
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html/:emailId',
controller : 'contactController'
});
And finally changes in your controller.
You'll have to add dependency for "$stateParams" and then the variable value will be available in your controller
scotchApp.controller ('contactController',['$stateParams', function($stateParams){
var emailId = $stateParams.emailId;
]})