Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Prerequisites and Preparation

Hey, this is Kezz Bracey for Envato Tuts+. Welcome to Create a Foundation of Apps Controller Using AngularJS. Now, before we actually get into creating our controller, just need to make sure that you have all of the prerequisites set up in order to work with Foundation for Apps. And that means getting set up so you can use their CLI, their command line interface. I'm not actually going to demonstrate the entire installation process because we wanna make sure we can put as much focus as possible on the actual coding that you need to do for the controller. But what we are going to do in this lesson is go through each of the steps that you are gonna have to follow it and I'll point to some written tutorials that we already have available that will step here everything that you need to know to get all of the prerequisites in place for working with foundation for apps CLI. So, first you're going to need to install all the prerequisites and then you'll need to install Foundation for Apps CLI. After that you'll be able to scaffold out a new foundation for apps project and then you'll be ready to move into the main section of the course. Okay, so there are six prerequisites for working with foundation for apps CLI and they are Node, Bower, Git Gulp, Ruby and Sass. So if you've never worked with command line before or if you're not quite sure how to go about installing these prerequisites, then the first place that I want you to look is this free command line for web design tutorial series. And this series will take you through all the essentials of working with command line. So even if you've never done it before you should feel comfortable to proceed with the rest of the course. Now in that series you can follow this tutorial on taming third party packages. And when you follow that tutorial you'll have Node installed, you'll have Bower installed, and you'll also have Git installed. Then the next tutorial you can look at is automation with Gulp. And if you follow this tutorial you'll have Gulp set up and ready to go. And then finally, if you follow the tutorial Powering Up Front End Code, it will take you through the process of installing Sass. And you're gonna want to follow the subsection that shows you specifically how to install Ruby Sass. So by the time you've gone over those three tutorials, you should have Node, Bower, Git, Gulp, Ruby, and Sass all installed and you'll be ready at that point to move on to installing the foundation for Apps CLI. In order to install the foundation of App CLI, you can just follow the installation instructions that are included on the Foundation For Apps documentation page. And I'll include a link for that in the notes below this video. You're gonna wanna scroll down to the section headed Install Instructions. And run the first command that you see here, npm install -g foundation-cli. So at this point you should have foundation for app CLI installed and you'll now be ready to scaffold out a new project. Okay, now, to scaffold out a new project, you're gonna wanna open up a terminal inside the folder in which you wanna create your project. And then you gonna run the command foundation new. And from here, you just wanna follow the prompts. So in this case we're building a Web App so we choose this selection, you can call the project task manager and then just sit tight for a moment while Foundation for Apps CLI performs all the necessary downloads. Then when it's done, you wanna change into the Task Manager directory then run the command foundation watch and that's gonna spin up a local host preview of the app that you're working on and also start watching all of your code and automatically re-compiling that into your app for you. And when you done you should see this default app open up in your default browser and you now need to move on to the next section of the course where we'll start creating your controller. In the next lesson we're gonna get the basics of your controller set up, we're going to add the essential code for your controller into the app JS file of your application. We're gonna connect your controller to the Foundation for Apps UI that you see here, and then we're gonna verify that that controller is correctly loaded. So I'll see you in the next lesson.

Back to the top