Architecture

&

Angular




Bit of back story


  • Coding for 5 years
  • Full stack developer for 3 years
  • Working with angular for about a year
  • Using only angular for an MVC framework
  • Experience using other MVC frameworks
  • Created an application structure that maximizes reusability




So what's this all about?

Let me tell you...



  • Structuring your angular app
    • Directories
    • Files
    • Code
  • Simple introduction to REST API interfaces



I'm a stickler for structure

   (should)
and you could be too!

Directories


The general structure I adhere to
└── static
    ├── assets
    ├── components
    ├── fonts
    ├── library
    │   ├── app.js
    │   ├── directives
    │   ├── modules
    │   └── services
    └── styles
  • assets - images/audio/video/etc
  • components - bower/decanter components
  • fonts - self explanatory
  • library - Angular stuff
  • styles - also self explanatory

-vendor-specific: none !important;

This structure can be used with any application server that supports the separation of static files...

Which is pretty much all application servers...

Unless it's maybe written in bash...

Which means you have other problems to deal with...


ALTHOUGH



For the love of Angular


No backend templating engines!

There's a time and a place for server side templating and it's not now!

Directories


Library is the meat and potatoes of your app

  • Directives
    • Work hand and hand with angular's HTML compiler to create custom element functionality
  • Modules
    • Act as a container for controllers, models, and views specific to one aspect of your application
  • Services
    • Shared interface to mutable objects for use with angular's dependency injection.
  • Angular application module
    • The initial bootstrap, config, and runtime for your angular app




Lets start with files



Directives and Services

There's far too much to say about directives and services to fit
all of it into this presentation...

But Here are the key points:

Directives
  • Function for Angular compiler
  • Write a new DOM element
    • Custom attributes
    • Custom functionality

Services
  • Shared functionality across application
  • Interface to API

Modules


For each module we have at least one of each of the following components.

└── modules
    └── {{module_name}}
        ├── controllers
        │   └── {{module_name}}Controller.js
        ├── models
        │   └── {{module_name}}Model.js
        ├── {{module_name}}.js
        └── views
            └── {{module_name}}.html
We'll get a little more in depth with these in application structure
  • controllers
  • models
  • views
  • module bootstrap





What about app.js


Directory and file structure is simple and brief
but the code is the most interesting part.





Code Structure


The finished product for the main app module


(function(window, angular) {
    'use strict';    angular.module('app', [        'ui.router',        'foo'    ])    .config(['$stateProvider', function($stateProvider) {            }]);}(window, angular));

Code Structure


STEP 1 - Wrap in a self firing anonymous function

(function(window, angular) {
    
}(window, angular));

  • Prevent namespace collisions with other modules
  • Maintain private reference to important globals
    • Sandbox your code 
    • Comes in handy for (Obfuscation || Minification)

Code Structure


STEP 2 - Declare the main angular module for your app

angular.module('app', [
    'ui.router',
    'foo'
])

  • Additional angular modules are included in inline array in the module declaration
  • Include any third party angular modules
  • Include child modules

Code Structure


STEP 3 - Configure the application

.config(['$stateProvider', function($stateProvider) {
    
}])

  • Use providers to globally configure your application
  • Well that's about it for config(), it's pretty simple!


Code Structure


STEP 4 - App

 (function(window, angular) {
    'use strict';
    
    angular.module('app', [
        'ui.router',
        'foo'
    ])
    
    .config(['$stateProvider', function($stateProvider) {
        
    }])

;}(window, angular));

A basic initial angular application!




Something function(al)

for working with modules

Angular Modules


We've seen the structure:
  • controller
  • model
  • view
  • module bootstrap



But how do we apply it to optimize modularity?

Let's create a couple pieces of the module


Controller - uses .controller()
(function(window, angular) {
    'use strict';    angular.module('foo.controller', [])    .controller('fooController', function() {});;}(window, angular));

Model - uses .factory()
(function(window, angular) {
    'use strict';    angular.module('foo.model', [])    .factory('fooService', function() {});}(window, angular));

Module Structure

Notice something?

 app.module('foo.controller')
 app.module('foo.model')

Lets take a look at the modules bootstrap file
(function(window, angular) {
    'use strict';
    angular.module('foo', [
        'foo.controller',
        'foo.model'
    ])
    .config(function() {})
;}(window, angular));
Child modules based on their parents namespacing


What's all that mean?


  • Simple namespace grouping of modules
  • Include main module namespace - no child modules in main app
  • Clean structure, reduced clutter
    • Multiple separate controllers, models, etc.
    • Individually configured modules


It means super clean, modular angular applications!




That's it for the slides!

Made with Slides.com