Trevor Hart Trevor Hart - 6 months ago 10
Javascript Question

What exactly is app.js in Angular?

I'm learning Angular for a new job (1 at the moment, then we'll be transitioning to 2 later on). I have experience with ASP MVC but none with client side MVC so this is all new to me from the get go. Most tutorials use this file "app.js" or something along these lines, which I guess registers various things with Angular, like the name of your web app, etc. That's all fine, but I want to know what is the specific purpose of this file?

For example, I'm going through this tutorial currently and this is the code we're doing for routing and controllers:

var AngularWebApp = angular.module('AngularWebApp', []);

AngularWebApp.controller
('LandingPageController', LandingPageController);

var configFunction = function ($routeProvider) {
$routeProvider.
when('/routeOne', {
templateUrl: 'routesDemo/one'
})
.when('/routeTwo', {
templateUrl: 'routesDemo/two'
})
.when('/routeThree', {
templateUrl: 'routesDemo/three'
});
}
configFunction.$inject = ['$routeProvider'];


The reason I'm asking is I have yet to read a single explanation anywhere on what this file is actually for, it seems like we're just dumping a bunch of config settings in here, so is this sort of like in ASP MVC the web.config file? I just want a definitive answer rather than just guessing about it.

Answer

app.js (I use main.js) is just a common name given to the root bootstrapping file for an angular project. While you may concat all your js files for a production release, when developing, file separation is obviously a good thing.

When developing an angular project, you create a bunch of modules that do various things, but you need a primary module for your app that you use with the ng-app attribute in your html: https://docs.angularjs.org/api/ng/directive/ngApp

This module sets up dependencies, and usually houses app config, such as routing. Although you don't have to structure your app this way, as in the end it is just a naming convention.