Getting started with angular

One of my main problems was how to get started with angular. Beside many new concepts like directives there is also plenty of examples and opinions out there which do stuff in a different way. Also it was difficult to find out what is a good and useful approach to separate concerns and files and of course avoid common pitfalls. Angular seed is the best place to start even this is imho for a small app a bit over engineered.

All paths are taken from my example.

So first thing you need to check is to install node.js to be able to run the web-server.js . Most of the stuff is done via XHR so file: vs. http:,… ist very often a pain because with Firefoy that works but not with Chrome. So I used that simple webserver: Go to root folder and simply type node util/web-server.js  and check via browser if it is running.

First pitfall is that the module must have the same name in html and javascript. I struggled a while before finding out that.

My use case was that there are a plugin like structure of many one page apps. So I decided to have controller.js for each of the one page app and a shared.js containing functionality that is used in all one page apps. I like code to be together until a certain line of numbers so for me separation in the way the seed does was from an overview point of view not the best choice.

In the main.js there is only the routes for that one page app plus all the controller logic. In shared I decided to separate into utilities, services, security stuff and of course directives. Everything is in an own module.

Finally the dependency injection needed some time for me. So don’t forget to inject the modules you need in a model in it as you see in my example in angular-app module with the controller module.

The rest is quite simple. 😉

The next time I will try to provide some information about services and how to handle http calls and futures in controllers.


GD Star Rating
Getting started with angular, 10.0 out of 10 based on 1 rating

Kommentar verfassen

This site uses Akismet to reduce spam. Learn how your comment data is processed.