Namepy step 1 – Angular “Hello World”

by coen · June 17, 2016

(This is part of the namepy project. Start at Namepy – on the shoulders of giants)

Let’s make a very simple start, with a webpage with a basic Angular controller, just enough to show that Angular is loaded and active.

Each step will build upon the previous and will live in its own folder/subpath. The external libraries will live in “external”.

Full code is in the git repo. The step-by-step instructions contain only the most relevant, new and/or tricky parts

Download latest version of Angular from https://angularjs.org/ and store in project_root/external
For date processing we’ll be using MomentJs. Download it from http://momentjs.com/ and store in project_root/external
Create a html page, called helloworld.html and save it in project_ root
Load angular.js and moment.js, using the <script src=”…”></script> tag

Create a simple Angular module and controller

angular.module('HelloWorldApp', [])
.controller('HelloWorldController', function($scope) {
$scope.dateToday = moment().format('MMMM Do YYYY')
});

Load the module and controller:

&lt;body ng-app="HelloWorldApp" ng-controller="HelloWorldController"&lt;/body&gt;

Create a curly-bracket expression to show the dateToday
```
Welcome, today is {{dateToday}}
```
Save the page

Done

Open the page in a browser and it should show something like

Welcome, today is June 7th 2016
The source code is at https://github.com/CoachCoen/namepy/tree/step1
The live page is at http://cm-demo.com/namepy_step1/helloworld.html