Setting Up Our Angular Application

Setting Up Our Angular Application

For our Angular application, we will want:

2 different pages (Home, Nerds)
A different Angular controller for each
An Angular service for Nerds
No page refresh when switching pages

Let’s create the files needed for our Angular application. This will be done in public/js. Here is the application structure for our frontend:



    - public 
    ----- js
    ---------- controllers 
    -------------------- MainCtrl.js
    -------------------- NerdCtrl.js
    ---------- services
    -------------------- NerdService.js
    ---------- app.js 
    ---------- appRoutes.js

Once we have created our controllers, services, and routes, we will combine them all and inject these modules into our main app.js file to get everything working together.

Angular Controllers

We won’t go too far in depth here so let’s just show off all three of our controllers and their code.

// public/js/controllers/MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {

    $scope.tagline = 'To the moon and back!';   

});

// public/js/controllers/NerdCtrl.js
angular.module('NerdCtrl', []).controller('NerdController', function($scope) {

    $scope.tagline = 'Nothing beats a pocket protector!';

});

Of course in the future you will be doing a lot more with your controllers, but since this is more about application setup, we’ll move onto the services.

#Angular Services

This is where you would use $http or $resource to do your API calls to the Node backend from your Angular frontend.

// public/js/services/NerdService.js
angular.module('NerdService', []).factory('Nerd', ['$http', function($http) {

    return {
        // call to get all nerds
        get : function() {
            return $http.get('/api/nerds');
        },


                // these will work when more API routes are defined on the Node side of things
        // call to POST and create a new nerd
        create : function(nerdData) {
            return $http.post('/api/nerds', nerdData);
        },

        // call to DELETE a nerd
        delete : function(id) {
            return $http.delete('/api/nerds/' + id);
        }
    }       

}]);

That’s it for our services. The only function that will work in that NerdService is the get function. The other two are just placeholders and they won’t work unless you define those specific routes in your app/routes.js file. For more on building APIs, here’s a tutorial for Building a RESTful Node API.

These services will call our Node backend, retrieve data in JSON format, and then we can use it in our Angular controllers.

Angular Routes

Now we will define our Angular routes inside of our public/js/appRoutes.jsfile.

// public/js/appRoutes.js
    angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'MainController'
        })

        // nerds page that will use the NerdController
        .when('/nerds', {
            templateUrl: 'views/nerd.html',
            controller: 'NerdController'
        });

    $locationProvider.html5Mode(true);

}]);

Our Angular frontend will use the template file and inject it into the <div ng-view></div> in our index.html file. It will do this without a page refresh which is exactly what we want for a single page application.

For more information on Angular routing and templating, check out our other tutorial: Single Page Apps with AngularJS.

Updated View Files

With all of the Angular routing ready to go, we just need to create the view files and then the smaller template files (home.html, nerd.html, and geek.html) will be injected into our index.html file inside of the <div ng-view></div>.

Notice in our index.html file we are calling the resources we pulled in using bower.

<!-- public/index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">

    <title>Starter Node and Angular</title>

    <!-- CSS -->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->

    <!-- JS -->
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<div class="container">

    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Stencil: Node and Angular</a>
        </div>

        <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
        <ul class="nav navbar-nav">
            <li><a href="/nerds">Nerds</a></li>
        </ul>
    </nav>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>

</div>
</body>
</html>

<!-- public/views/home.html -->

<div class="jumbotron text-center">
    <h1>Home Page 4 Life</h1>

    <p>{{ tagline }}</p>
</div>

<!-- public/views/nerd.html -->

<div class="jumbotron text-center">
    <h1>Nerds and Proud</h1>

    <p>{{ tagline }}</p>
</div>

Think Next Generation Technologies

Search This Blog