Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Basic Controller Setup

In this lesson we’ll define the basics of the controller: establishing the essential code in the main app.js file, connecting the controller to the Foundation for Apps UI, and verifying the controller is correctly loaded.

Related Links

2.1 Basic Controller Setup

Hey, welcome back to create a foundation for apps controller using Angular JS. In this lesson, we're gonna start building your controller and we're gonna begin by putting some essential code into the app.js file of your app, which is the central JavaScript file. And then we're gonna connect that controller to the UI system. Once that's done, we're just gonna double check to make sure that everything is wired up and working properly. All right, so the first thing you're gonna need to do is go into your task manager and find the app.js file. So you're gonna wanna look for the client folder. This is where all of your source files are gonna be. And they will be compiled into the build folder, which is where you'll fully built app will end up. So into the client folder, and then into the assets folder, and the JS folder. And then this is the file that you wanna open up and start editing. Okay, so here we are inside our app.js file, and this is the core file of any foundation for apps application. This handles all of the essentials for making Angular work in with the UI. And we're gonna write our custom controller inside this app.js file. The first thing we're gonna need to do is set up a function, and that function will contain our entire controller. And we're also going to need to extend foundation for apps default controller. And the reason is, foundation for apps works with a front meta system, inside any of the UI templates. And in order for our controller to properly access that front meta information, we need to make sure that we extend the default controller. That processes all of that front meta information. All right so, we'll scroll down to the bottom of a file and we'll make a new function, and we'll name it TaskController. Now that we have our function in place, we're gonna need to pass the scope variable into our new controller. Now, all the data that gets processed through an Angular interface gets attached to the scope variable. So for example when somebody creates a new task in our task manager, they are gonna enter in some information. And Angular is gonna attach that information, things like task name, task description and so on, to the scope variable. So then, in order for us to be able to access that data and process it into local storage, which is what we're going to be doing a bit later. We need to make sure that our controller has had that scope variable pass through. So up here. We're just gonna pass $scope as an argument. Now, there's also another variable that we're gonna need to pass as an argument. And that is the controller variable. And I already mentioned that we're gonna be extending the default controller, and that's why we need to make sure that we have the controller variable pass in. Because we'll need to access that variable in order to extend the default controller. So after that scope, we'll pass $controller. And now, we're ready to extend the default controller which will do with this code here. So using angular.extend, and we're extending the controller named DefaultController. And we're not gonna add any actual task management functionality into our controller right now. But what we do wanna do is just send a message to the console so that when we hook this up to our UI, we can make sure that everything's working properly. So we're just gonna say console.log, and then the message custom controller loaded. Okay, so that's all the code that we need for our custom controller right now. The only thing left to do is to hit up here to our Angular module line. And then right at the very end, we wanna add controller. And then we're gonna connect our TasksController, and we do say like this. All right, so that's everything that we need to do in our app.js file for now. Now, we're gonna switch into one of the template files in the UI of our application. And we're gonna use foundation for apps front meta system to load our custom controller into the UI. So here we are inside our task manager project again. And once more, we wanna go into the client folder. And now, we're gonna go into the template folder, which is where our UI templates are held. And then we're gonna open up home.html for editing. This is our home.html file, and all we need to load up our controller is to make a new line at the end of our front meta here. And just add controller:, and then the name of our controller which is task controller. And now here we are back in our app, the foundation watch process has already recompiled all of our files. It's recompiled our templates and it's recompiled our app.js file. So now when we refresh, we should see the message that we added in, show up in our console here. And there we go, there's our message and that's verified that our custom controller, the basics are in place, and everything is working just as expected. So now we have those essentials in place. We're ready to make our controller start to actually do something. So in the next lesson, we're gonna set up the process of adding new tasks into the task manager. So we're gonna set up some new variables inside the app scope. We're gonna create a form for adding new tasks into the UI, and we're gonna process submissions from that form into local storage. I'll see you in the next lesson.

Back to the top