[SOUND] Obviously,
it would be pretty boring if all we could do with our Angular application is somehow
magically connect our JavaScript to some piece of HTML page and
really do nothing else with it.
So really we need some sort of a mechanism for
the view, which is our index.html, and for
app.js, which contains our view model, to be able to share data.
Right now, I'm located in the folder called Lecture05,
which is located in the fullstack-course5/examples folder.
And I've already set up my Browsersync so
it's displaying the page that we're looking at, which is this index.html.
In fact, let's give it a little bit of a better title than that.
Let's give it an h1, and we'll tell it, My first AngularJS App so
we can see something actually in the page.
Okay, so let's go ahead and close the file browser inside Atom.
And now what we're going to do is we're going to use a special object that
AngularJS provides for us in order to share data between our view model and
our view.
And that special object is called $scope.
Whenever, by the way, you see inside AngularJS a dollar sign in front of
some variable name, it means that this is something that is reserved for
Angular, this is something that Angular provides.
There's nothing really stopping you from naming your own variables with the dollar
sign, but the convention is for you not to do that, because Angular is reserving kind
of the dollar sign for anything that it provides out of the box.
So this scope variable right here, and
we'll discuss later how the scope variable or how the scope object even gets here,
can have properties defined on it that are going to be exposed to the view.
So if I say, $scope.name, and say, Yaakov,
this .name is actually now sitting on the scope, and
this scope is available inside my ng-controller or
anything below it or inside of it that this ng-controller is in charge of.
So I can place an expression here, which is double curly braces or
mustache or however you want to call these characters, and I could say, name.
If I place name over here, since name is sitting on the scope, and
the scope is defined right here with a name, the Angular framework will
assume that this is something that it should look for on the scope.
So if I save that, you'll see that all of a sudden, Yaakov here shows up in my page,
because it looked on the scope, which is bound to this particular ViewModel,
which is bound to this particular controller.
And it's being displayed, therefore, right here between these two divs.
Now, the value of name is not the only thing that we can reference here.
We can reference whatever we want on the scope and
then expose that to our index.html.
So for example, I could go ahead and create a function, let's say,
called sayHello, and it's going to be a function that
returns Hello Coursera.