AngularJS Front-end

Based on the job market and technologies sought after therein, AngularJS is the new de-facto standard for web clients. I have several years of experience with jQuery, Backbone and Handlebars, but none at all with AngularJS. Here’s a write-down of my first impression and experience. (when refering to AngularJS, I mean AngularJS 2. I’m not bothering with the 1 version)

Hello world

It’s important to go along with what the community is doing

There are many tutorials for AngularJS, and pretty much all of them use Node.js. Our webclient will eventually be hosted on an Apache HTTP server, and so initially I discarded “the whole Node.js business”. Trying to set up an AngularJS-only project, however, seems futile. It’s important to go along with what the community is doing, to ensure that you find solutions to your problems, and your own posts get replies.

So, my first steps were:

  1. Install Node.js
  2. Install Angular CLI by running
    npm install -g angular-cli
  3. Setup a new project with
    ng new webclient

This gave me a pretty rich directory structure. Running ‘ng serve’ showed that the project does work, and so I’m all set. What surprised me, is that running ‘ng build –prod’ produces a heavy-weight vendor.bundle.js (at 700+kB!). Also, for Eclipse users, make sure to add an “exclude rule” on the ‘node_modules’ directory for all validations.

Code language

One of the reasons for using Node.js along with Angular CLI is that an ng app is typically written in TypeScript (hence the .ts suffixes). In order to run TypeScript in a browser, you need to compile it. That’s what ‘ng build’ does for you (along with other things, of course).

Directory structure

As mentioned, the new AngularJS project has quite the directory structure, so here’s a quick field guide.

angular-cli.jsonDefines the project structure for ‘ng’ commands, ie. what files are located where.

Directory / File What is it for
e2e Home of end-to-end tests, written in Jasmine and using Protractor (a Node.js module)
node_modules A huge collection of Node.js modules need to run – and eventually build – the app. This is static code, ie. should be excluded from SCM, validation etc.
src Here is where the actual app code resides
 app.component.css Style definition for the main app, referenced in the app.component.ts.
 app.component.html The HTML template for the main app component (referenced in app.component.ts).
 app.component.specs.ts The test file for the main app component.
 app.component.ts Defines the main app component. Once development has started, there will be more components, named something like customeraddress.component.ts. Typically the definition has a tag ‘selector’, a template (string or URL), and a style.
 app.module.ts  The ,main app module definition, ie. imports for all components and services.
 assets Images, media files etc.
 environments Lets you define environment-specific properties
 index.html The single page. Somewhere the HTML will either have an ‘ng-app’ attribute, or a tag which is referenced as ‘selector’ in a component.ts file.
 main.ts Something like the main() method of a Java app, thus loads the main app module.
 polyfill.ts Polyfill: A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers. (from Stackoverflow)
 styles.css Global styles
 test.ts The main() method to start tests, using Karma.
 tsconfig.json Configuration for TS compilation, eg. ‘should a source map be generated’, ‘what is the target ES-version’
karma.conf.js Karma configuration (duh), needed for running tests (with ‘ng test’).
package.json Defines which Node.js packages are required by the app.
protractor.conf.js Protractor configuration (duh again), needed for running end-to-end tests.
tslint.json Configuration of how TypeScript should be used by defining a set of ‘rules’.

Funny enough, AngularJS provides it’s own Anatomy of the Setup Project, but there seem to some slight differences (no SystemJS, no tsconfig has moved, etc.). The above table is what I got from running ‘ng new’.

What’s next

Now that ‘Hello World’ is running (or, in the ng-world, ‘app works’), I’ll probably setup a user service to run a login, define a login component with a little username/password form, and look into how I can configure AngularJS to protect parts of a site from unauthenticated users.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s