In this video, learn to write the HTML portion of your AngularJS app.
- [Instructor] Finally, it's time to start writing some code. So let's start with index dot html. Let's create a simple html file, and inside of this html file, I'm going to start by referencing some scripts. Now these scripts are angular js. I'm referencing it from the cdn just to keep it easy, also I'm referencing adal from the aadcdn, and I'm referencing our own app dot js, where we will write our own code.
Now let's start talking about the actual application. So, this is an angular js app, so I need to put these attributes ng app, angular app, let's call it angular app, and ng controller, let's call it angular controller. Let's talk about the user interface a little bit. So there will be a button that will allow the user to log out, and there will be another button that will allow the user to log in.
Now, obviously, both buttons will not be visible at the same time. So, let's imagine that my controller will have a property called user info, and user info dot is authenticated tells me whether or not a button is visible or not. So I'm going to say ng show user info is authenticated, and similarly for the log in button, it will be ng hide user info is authenticated.
Okay, now what happens when you click log in and log out? Let's put ng clicks on these. Now, if you are familiar with angular js, what ng click ng show means are pretty obvious to you. But, basically ng click equals to logout is going to look for a java script method on the controller called logout and it will call it. And let's call this ng click login.
Simple as that. Okay, the next thing I need over here is, let's also display to the user, whether they're logged in or not, and who they are logged in as. So I'm going to say authenticated as user info. So this user info variable looks like it's very useful.
Well, you know adal js actually gives me a variable called user info. I don't even have to put in a lot of work for this. When I write the app dot js file, this will become very obvious. Okay, the next thing I need is the ability to run a simple command against Microsoft graph and return some results. So I'm going to say button ng click run command. So, we will write the method called run command.
And let's call this run command and when the user clicks run command, I will simply say return value and let's just call it return value so there will be a variable called return value where we will put the results of run command so the user can see them. That's it, my front end user interface is done.
- What is Microsoft Graph?
- Registering a web application in Azure AD
- Adding authentication logic and authentication UI
- Native applications calling Graph
- Reviewing scenarios where web apps involving Graph are useful
- Web applications with application identity and delegated identity calling Graph
- Daemons calling Graph