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

Next lesson playing in 5 seconds

Cancel

Free Preview: Create a Foundation for Apps Controller Using AngularJS

Create a Foundation for Apps Controller Using AngularJS

01:00
  • Overview
  • Transcript

Foundation for Apps was created by Zurb to provide the same head start for web app design that their incredibly popular Foundation Framework already offers for web site design. Foundation for Apps is built on top of AngularJS, making that framework even simpler to use, with easy-to-configure routes and a command-line tool for scaffolding.

In this course, Envato Tuts+ instructor Kezz Bracey will teach you how to create a task management app with Foundation for Apps. This course goes hand in hand with the design-focused Up and Running With Foundation for Apps course, providing a step-by-step walkthrough on coding an AngularJS controller to bring the app to life. Let's get started!

We've built a comprehensive guide to help you learn Foundation, whether you're just getting started or you want to explore more advanced topics check out Learn Foundation.

1. Introduction

1.1 Create a Foundation for Apps Controller Using AngularJS

Foundation for apps is a fantastic framework for creating web applications. It works with AngularJS and it eliminates a lot of the steps that you have to go through if you creating a web application from scratch by setting the foundation for apps. If you wanna make an application like a task manager all you have to do is a little bit of UI code, along with creating a custom controller. In this course you're gonna learn how to create that custom controller so that you have all the functionality that's required in the task management web application. You'll learn how to set up a controller in the right ways that will work in properly with foundation for apps. And you'll learn how to create all the functions that bring a task management app to life, from task creation, tag management, and UI display to task deletion, editing, and updating, with everything that takes place in your application being saved into local storage. And then to cap it off, you'll also add in some functionality for presentational changes. Like switching the color of a test display or changing the task status. So let's get started with create a foundation for apps controller using AngularJS.

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.