Dissecting Angular: Code Organization
I’ve been reading a lot about design patterns and building modular JavaScript applications lately, but I wanted to see a real life example. I decided to start dissecting the Angular source to look at how they make use of some popular patterns. This is the first post in a series that looks at what makes Angular tick.
Use the src, Luke
If you want to understand how Angular works, the first thing you’ll need to look at is how the code is organized. Head on over to the Angular GitHub repo and take a look at angularFiles.js. This file defines some configuration information for the Grunt task that builds Angular, but it also provides a really nice map of the files that we actually care about when we are trying to understand the structure of Angular.
The first thing you’ll notice is that the file is broken out into sections.
angularFiles = {
'angularSrc': [
'src/minErr.js',
// ... Utilities and the Angular.js core
'src/auto/injector.js',
'src/ng/anchorScroll.js',
// ... Angular services
'src/ng/filter.js',
// ... Angular filters
'src/ng/directive/directives.js',
// ... Angular directives
],
'angularLoader': [
// ... Angular loader files
],
'angularModules': {
// ... Other Angular modules
},
// more stuff we don't care about right now
};
// ...
The Angular files are concatenated in the order they are defined in this file. We can see that they start by including some utilities, like minErr.js, in addition to the core (Angular.js) that provides everything available via the global angular object.
The next thing they load is injector.js, which provides the utility needed to load the Angular services in the section after it. After the services we see the other Angular filters and directives being included. It’s cool to see that there’s not a lot of magic going on here and that Angular is mostly comprised of just services, directives and filters.
One other section worth looking at is the angularModules object, which contains, you guessed it, the other Angular modules we have at our disposal when creating our own modules.
Looking at /src again, we can see that all the directories, except for /src/auto, are actually Angular modules. Notice that /src/ng contains all the services, directives and filters that come with Angular. You’ll see that this maps very closely to what’s available in the documentation.
There are a number of other files at the root of /src. We’ll be digging into some of these in other posts in the series, but for now it’s important to note that the .prefix and .suffix files are used during the build process to prepend or append code at the beginning or end of other files. For example, if you open /src/angular.prefix you’ll see the Angular license along with the opening function declaration for the framework. This gets appended to Angular.js during the build process.
What’s Next?
Now that we have a basic understanding of how Angular is structured, we are ready to look at how it bootstraps an application in the next post.
Source: