Angular Walkthrough- Angular Setup
In this activity, you'll be creating the frontend part of your project that the user will actually see. You'll use AngularJS to get data from your server and then render that data on the page. By the end of this section, you'll have a fully working webapp that you can take home and show off!
Installing Angular
We're going to be working in the frontend folder for this part of the project. Open a new terminal and run these commands to install a program called bower.
cd ~/workspace/how-to-api/frontend/
npm install -g bower
bower init
Bower is a package manager like npm, except it's meant for frontend projects. These commands install bower and then create a bower.json file to store your frontend dependencies. Press enter multiple times to go with the defaults.
To install angular and bootstrap, we just need two more commands:
bower install --save angular
bower install --save bootstrap
The --save will store these packages in your bower.json. That way, when another user wants to download your app, they only need this file to run bower install and all of the packages in this file will be included in the project.
Getting Started
We've given you an index.html to start with, and it contains the basics that will make up your web page. Angular requires us to work in two places: the app.js file, and the index.html file. For each part of the project, we'll need to add our logic into the app.js file and then add angular tags to the index.html to display information to the user.
Let's get started by opening the app.js file inside of the app folder. We're going to create a module called movies. Modules are a way to divide up our code into different sections, but we only need one for this project. To create it, add this line:
var app = angular.module('movies', []);
Next, we'll create a controller called MoviesController. Controllers are where we place all the logic for our app. We can make one using this code:
app.controller("MoviesController", function() {});
Angular has a set of powerful tools called services. To use one, we just need to let Angular know which ones we want to use. You can think of it a little bit like require() in node. We will be using the $http service, so we will add it to our controller function:
app.controller("MoviesController", ['$http', function($http) {
//Your code here
}]);
Don't forget all of the brackets! Now we can use the $http service anywhere inside this controller.
Before we add logic to the controller, we need to do a few things to the index.html file. This will let our html communicate with the angular code in app.js. We need to let angular know that we want to use the movies module we created earlier. Modify the <html> tag at the very top to look like this:
<html ng-app='movies'>
Now we need to let angular know which controller we want to use. We add the ng-controller attribute to the <body> tag, like this:
<body class='gradient-background' ng-controller='MoviesController as collection'>
collection is the alias we will use to refer to the controller. You can think of it like a nickname we're giving to the controller so it's easy to reference.
Normally you would need to add html <script> tags to include the angular library, but we've already done it for you. Now that we've got the boring stuff out of the way, we can start adding features...