- Create a $timeout that updates the View
Let's inject one of Angular's built in services into our controller.
For this lab, we're going to make use of $timeout
. $timeout
allows us to create timeouts (similar to setTimeout
) in our applications whilst ensuring that any changes to our model done inside a timeout gets reflected in the view.
$timeout
accepts the same parameters as setTimeout
- a function and an integer for how many milliseconds delay.
$timeout(function () {
// this would be fired after 2 seconds!
}, 2000);
Fork and clone this repository to get started.
Let's create our controller inside ContactController.js
, this should have two parameters - $scope
and $timeout
(it doesn't matter what order you put them in, if you don't believe me - try it!).
Attach the controller to our app
module.
Now, inside our controller, set $scope.name
to your name. We previously touched on using controllerAs, but as we need to use two simple services for this lab, we will be using $scope
.
Below that, set a $timeout for 5 seconds. Inside the function, set $scope.name
to something else.
Open up index.html
and wait 5 seconds - you'll see the view get updated with our new name!