- Create a Controller
- Create an element for Controller binding
- Create a public $scope method
- Display the $scope value in the View
Setup the directory structure as follows:
- js/
- app/
- controllers/
- angular.js
- app/
- index.html
You can find index.html
and angular.js
in this repo.
Create a new module in js/app/app.js
, named app
.
Create a controller named MainController
inside js/app/controllers/MainController.js
and attach it to a module named app
. The function should take one parameter - $scope
.
Don't forget to initiate our module app
using ng-app
on a HTML element - otherwise we won't see anything!
Initiate our controller MainController
using ng-controller
on a HTML element inside our previous one.
Inside MainController
, assign some values to the $scope
object. You could copy our previous example - create the properties name
, email
and phone
.
Now, we need to display these values inside our HTML. Using {{ }}
(double curlys), display the values you created.