TCorner is a serialized blog post from our newest Labs member, Taylor Cornelius. TCorn comes from a design background and these are his adventures on the development side of the fence.
A few months ago I was taking a Udemy course on Angular JS v.1. Near the end of the course came an assignment to create a single page weather forecast app. The assignment was to use many of the angular concepts demonstrated in the course as well as utilize an API to openweathermap.org to receive data based on a user’s input. The project result would be an input field for a user to enter a city and the API would return weather forecasts by number of days.
I first began by declaring my app with ng-app and gave it a name of weatherApp. I set the ng-app inside the html tag because I knew I would only have one module for my project and everything inside it would be relevant to weatherApp.
Part of the assignment was to use ngRoute as a directive so that the app could give the illusion it was multiple pages while not having to actually load new files only new views. For this I had to include a path ngRoute in a script tag within the head of my index.html file. The source path can be found on Angular’s website along with all of the other built in directives.
The weather app file setup structure was thus:
- A main index.html file to set up a top nav bar and an include for ng-view.
- A home.html file which would include an input field to search weather forecast by city.
- A forecast.html file which would show once a user searched by a city. In this file would include navigation back to home.html, filter options to show multiple days of weather forecast and set up an ng-repeat div block to repeat the forecasts returned from the API call.
- A weatherPanel.html file which included specific API information to include within each forecast.
- An app.js file to include all of my services, custom directives, routes, controllers and API call. A single file for all of these is not recommended but sufficed for a beginner project.
My first step was to establish my route destinations. I included “ngRoute” as a dependency in my weatherApp module, then added a config function which included $routeProvider as the only parameter. $routeProvider sets up route paths, which files or views they should point to and any controllers associated with those views.
You can see that $routeProvider works in that when a relative path ends in ‘/’, the templateUrl loads the home.html file and specifies which controller is tied to the view. However that is half of the battle because now I need to specify those route paths within my html file links.
So now each href, when clicked will load in the correct html view file and it’s associated controller.
Next I set up my two controllers. Each has a specific name to it’s function. Each loads in some of Angular’s built in services such as $scope, $http for API calls and my own custom service ‘forecastService’ which I will discuss later. I did not need to reference the controllers in my html views because ngRoute handled that when I specified controller in the .when statements. I did need to include the ng-view directive inside my index.html file. The ng-view empty div container will hold all of the routing information that is loaded into the page. I put the ng-view container just before my closing