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)
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:
- Install Node.js
- Install Angular CLI by running
npm install -g angular-cli
- 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.
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).
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.|
|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’.
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.