Starting a new project

 

Following the first post: "Structure your AngularJS project", this post will be concerning how to start a new project, or probably a better definition for starting a new angular project: how to create the app.js file and include it in HTML.

The first thing that needs to be done, is to create a file with the name "app.js". This file is the main app file for your project, and therefore the most important one. Here is a example of an app.js file:

 

var app = angular.module('wmp', [
    //
    // Shared
    //

    // Routes
    'shared/wmpRoutes',

    // Navigation
    'shared/navDirective',

    // Sidebar
    'shared/sidebarDirective',

    //
    // Services
    //

    // User auth
    'services/userauth',

    //
    // Pages
    //

    // Front page
    'frontpage/frontPageDirective',

    // Contact page
    'contactpage/contactController'
]);

// Any unmatched URL - redirect to home
app.config (['$urlRouterProvider', function($urlRouteProvider) {
    $urlRouteProvider.otherwise('/');
}]);

 

The example above uses the file structure from the first post. All the app does, is to include other files such as controllers, directives and services. You could see the "app.js" file as a "portal" for all your files in your project. The app.js should, in most cases, only contain includes, to keep the app simple and effective.

 

In the code example above, on the vey first line, we've given the app.js the name "wmp". Therefore we need to include this in our HTML, to take use of the app.js, like this:

<body ng-app="wmp">

 

Now the app.js is included in the HTML. All that needs to be done, is to include AngularJS files in your page, and the app is up and running:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>

Jesper Martinussen

Posts