Angular/Server layout

from the backend (Server)

starts up and loads

  • express
  • path
  • bordy-parser
  • morgan
  • mongoose
  • config file

We have our express and app variables and initializes them using other modules.
Then we use mongoose to connect to database and make sure it checks.

Then it loads up our routes by using api.js. We require the function that’s in /app/routes/api.js, and throw in our app and express variables. Thus, we get our apiRoutes, and then init the api root path at /api.

This is where our backend router takes care of HTTP verbs GET/POST/PUT/DELETE…etc by implementing function definitions such as:

/app/routes/api.js

Once the router is initialized in api.js, we say we want send the browser the index.html like for a root url access:

The start of this html file will load up this router in api.js among other angular js files such as controllers, services, etc.

from the front end – index.html loads up js scripts

When the server starts, this index.html gets loaded up. Angular loads up its controllers, services, etc via js script files at the beginning of this index.html file.

Front End Routing templates to Controller

In the app.routes.js file, we create our routerRoutes module using Angular module ngRoute. We use .config and assign templateUrl, controller, and controllerAs for each individual html page. We will be using this module in another module shortly.

Notice the angular.module, what this means is that we it to group our defined modules together and have angular run and use all of these modules via injection dependencies.
see https://docs.angularjs.org/guide/module

Just like how the main function wire everything together, module is Angular’s way of bootstrapping all of our functionality.


Boostrap is a technique of loading a program into a computer by means of a few initial instructions that enable the introduction of the rest of the program from an input device.

public/js/api.routes.js

Then we also have the app.js. What this app.js means for this particular example is that it is the Angular app. It contains the controllers, which uses services via dependency injections.

First, notice that it uses our routerRoutes. It injects the routerRoutes module by passing it into the parameter array.

public/js/app.js

What this means is that we define a module called routerApp, which uses routerRoutes defined in app.routes.js for its routing mechanism. In our routing mechanism, we have .when(‘url’, {..}), which routes templates to controllers. Hence, we define these controllers by declaring our .controller in our app.js.

Services used by Controllers

Also notice the authService in the parameter array. authService is a service defined in authService.js.

authService.js

so we declare a module called authService, and we use .factory to create this service:

First, we can use either factory, or service. In factory, we return a object, which can be injected into a controller.
Here’s an example:

Notice the creation of authFactory, its usage and declaration of properties, and then the return of that object.

Where as in service, you see that we attach attributes and behavior to this:

When inside a service we are dealing with the object using this and not returning anything.
Both are singletons.

Angular services are:

Lazily instantiated – Angular only instantiates a service when an application component depends on it. So when another component uses it by calling it in its dependency array parameter, Angular will instantiate that one singleton Service and then pass it via reference to the component in need.

Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

From the knowledge above, we can see that we declared an AuthFactory for getToken setToken. Then we use the AuthFactory, inject it into Auth, which we use to see if the current browser has a token, then uses the http to call createSampleUser in our backend API.

Angular service or factory

What is an AngularJS service or factory?

Singleton.

Yes! That one word is enough to define AngularJS services. The purpose of AngularJS service / factory function is to generate a single object or function that represents the service to rest of the application.

An AngularJS service can be created or registered or created in four different ways,

Using the service() method
Using the factory() method
Using the provider() method
Using the value() method
Using the constant() method

For example, here we are saying, we want to create a module called CalculatorService, which uses no other modules, hence the empty array parameter. This module has a service called Calculator, which has a function to square a number a. The result square will be a property for this singleton.

That object or function is passed as a parameter to any other factory function which specifies a dependency on this service.

mainCtrl.js

Notice the name Calculator declared in module CalculatorService, and used here as a parameter to inject dependency from the controller to the service.

On the view we are using the controller to do the data binding as shown below,