Basics in Angular and Node (Part 1)

Stuff we need

You just need nodejs, on their homepage they got a great tutorial how to install and how to get started.

Init our project

Start your favorite IDE (WebStorm) and start with literally nothing (empty project), grab your terminal (Alt+F12 in WebStorm), type ‘npm init’ and hit enter. Now a new file called ‘package.json’ should be created where all your info about your project is stored. For the next step we need express. Switch to your terminal again and type ‘npm install -S express’. The dependency should be added automatically to your package.json because of our ‘-S’ flag.

Integrate express

Create your entrypoint javascript file (default ‘index.js’, we defined ‘server.js’) and fill it with code.

server.js

express = require('express');

app = express();

app.get("/", function(req, res) {
    res.send("hello world");
});

app.listen(3000);

Now you have your first express app and can browse to http://localhost:3000 to see your output.

Integrate Angular

Create a folder called public, an index.html and an app.js file inside our new public folder.

In our app.js we create a new module and a controller for our app.

app.js

angular.module("pubertown", [])
    .controller("mainctrl", function($scope) {
        $scope.text = "Hello World";
    });

In our index.html we have to include the Angular CDN and our app.js file. After that we only have to add a new ng-app property (the value is the name of our module) to our html tag and a ng-controller property (the value is the name of our controller) to our body tag.

Now we can use template style syntax to access our fields in our fancy scope.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="pubertown">
<head>
    <meta charset="UTF-8">
    <title>Pubertown</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="mainctrl">
    
</body>
</html>

Don’t forget to restart the server, checkout your new app with Angular at your http://localhost:3000.

Add functionality

Now we want to use the basics of Angular to add values to a list. We need to add to our index.html a inputfield for our values and a button which calls a function to add the current value to our list, we also need a list to populate our values.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="pubertown">
<head>
    <meta charset="UTF-8">
    <title>Pubertown</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="mainctrl">
    <input type="text" ng-model="txtField" />
    <button ng-click="addText()">Add</button>

    <ul>
        <li ng-repeat="item in items"></li>
    </ul>
</body>
</html>

After updating our index.html we should take a look on our new node app with express and server. Just restart your server again and take a look at http://localhost:3000.

On the next part we will integrate mongodb and add the functionality to add images to each entry. We will store all the images on our own cdn with nginx in a Docker container on our Fedora server.

You can find the source code from this part in my github repo.