Join Chris Converse for an in-depth discussion in this video Hook in CSS and AngularJS, part of Creating a Calculation Tool with AngularJS 1.
- View Offline
- To begin our project we're going to go into the exercise files we're going to bring the ch01 folder and then I'll come in here and select the 01_01 folder now you can option drag this to your desktop or you can go to the edit menu and come down and choose copy, or if you want you can work in the files directly in the exercise folder. And then I come over here and paste this on the desktop. Now with the files copied to the desktop I'll come in here and rename the folder to my calculator. And then I'll open this up and make sure all of the files are here.
So we'll start a link tag then a space. We're going to set the relationship to stylesheet. We'll set the type to text/css. Then a space. Then we're going to set an href We'll go into the assets directory. And then set the file name to calculator.css. Let's end the tag. Then on the next line we'll add in a link to our angular js framework.
Using these lessons, and the free exercise files, you can build any kind of calculation tool for your clients, from shipping cost to mortgage payment calculators.
- Creating the HTML page structure
- Hooking in CSS and AngularJS
- Adding form elements
- Styling the layout with CSS
- Adjusting the layout for small (mobile) screens
- Defining the AngularJS application and controller
- Calculating usage and cost