Category Archives: Angular

AngularJS – Controller code structure

Posted on by
8

The goal of this post is to define a structure to write AngularJS controllers.

I identify three different parts inside the controller:

  • Public methods and variables: On top of the code and just the definition of the methods, the implementation will be inside the private area.
  • Code that run when the controller is created. Right after the public methods.
  • Private methods and variables. Prefixed with ‘_’.

This is the structure schema of my controllers:

app.controller("myController", myController);
 
function myController() {
    'use strict';
    var self = this;
 
    //// ---------------- PUBLIC ----------------
    //// PUBLIC fields
                ...
    //// PUBLIC Methods
		...
    //// ---------------- CODE TO RUN -----------
		...
    //// ---------------- PRIVATE ---------------
    //// PRIVATE fields
		...
    //// PRIVATE Functions - Public Methods Implementation	
		...
    //// PRIVATE Functions
		...
};

This is one of my controllers, a lot of code but someone interested only in its use and not in its implementation can easily read the ‘public’ area only : Continue reading →

AngularJS – CRUD Data Grid I

Posted on by
30

The goal of this post is to write a single page application (SPA) to display a list of items inside a grid. This grid shall not only display a list of items but also allows all the CRUD operations: Create a new item and Read, Update and Delete for the contained items.

Additional requirements:

  • Show a notification when a server request success or fail.
  • Editing an item: Start editing with a double click and commit the edition with “Enter”.
  • Everything shall be executed without refreshing the web page
  • The complete list of items should only be requested one when the page is loaded.

UPDATE:

Results

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.

This is a screenshot of the AngularJS Crud Grid that we are going to implement:

AngularJS Crud Grid

Implementation

Let’s get our hands dirty, we will cover the following points:

  1. Domain: Entity Framework + Domain Services
  2. Server side: WebAPI + ViewModels
  3. Client side: AngularJS + Bootstrap + Toastr
  4. What’s next?

Continue reading →

Single Page Application (SPA) using AngularJS and WebAPI – Architecture

Posted on by
3

The goal of this post is to clarify an architecture of a single page application using the following technologies:

  • ASP MVC
  • AngularJS
  • WebAPI
  • Entity Framework

The next diagram shows at the left the client side and at the right the server side:

Single Page Application (SPA) using AngularJS and WebAPI – Architecture

 

 The first row is the communication between the different used technologies.

The middle row represent the logic of our application and the last the data containers used on these classes.

Using the previous diagram is easy to see which data each layer uses.

e.g:

  1. The Angular controller can only work with the Angular context.
  2. The WebAPI controller send and receive data in JSON format. The JSON objects are automatically translated to C# view models. The WebAPI controllers are also able to map the view-models to domain objects to use the domain services. WebAPI controllers can also request domain objects to the domain services and translate it to ViewModels c# before sending it back to the client-side in JSON format.

Data containers and layers:

  • AngularJS Context: The context is populated by the angular repository. HTML templates bind to it.
  • ViewModels Json: The data is sent from client to server side and vice versa in JSON format. The WebAPI controller send automatically by default the data in this format. The send and received data in JSON format is mapped automatically to the expected object.
  • ViewModels C#: The data the WebAPI controller send and receive as parameter. The conversion between Json and C# view models is done automatically by the WebAPI controller. This class is a subset of our entity domain objects plus some calculated properties that our views may need. It can be used for example to keep some server-side data hidden on the client-side.
  • Entities: Entity Framework entities or domain specific classes. All the data related to the domain. Theses classes are completely independent of the view. The domain services or application logic must use theses classes. The mapping from and to Entities to c# view models can be done automatically or Auto-mapper.

AngularJS AJAX calls

Posted on by
Reply

AngularJS is a JavaScript framework that allows us to create Single Page Applications (SPA). If we use AngularJS we can bind from our HTML views to JavaScript files (controllers). Controllers will offer the data to the view. Typically this data is retrieved from REST services using Ajax calls.

The goal of this post is to show how to make AJAX calls using AngularJS. I will illustrate two different ways to do it, the first one helps to understand how the asynchronous call works, the second one is an easier way to do it using a higher-level service.

Using $http and $q

One way to make AJAX calls using AngularJS is using the services $http and $q:

  • The $http service allows us to make the GET and POST calls.
  • The $q service is used to wait asynchronously for the response, basically it is a deferred result, it returns a “promise” that will response after some time. After some time the deferred can be “resolved” or “rejected”.   The method using this deferred can add two call-backs to it one to execute when it is resolved and one when it is rejected.

Let say we have a controller that needs to populate some data asynchronously. I like to dedicate the controller to define the binds for our views. The AJAX call will be executed in a different file, a repository.

AngularJS – Controller: The module will call a repository and add set the response in the scope when the deferred is resolved.

angular js controller

AngularJS – Repository: The repository make an AJAX Get request to a ASP.NET WebAPI Controller.

angular js repository

We can write the same repository with less lines using shortcut methods:

angular js repository

This solution works but there is an easier way to do AJAX calls…

Using $resource

This service lets us interact with RESTful server-side data sources with a higher-level than the $http service. The $resource service is defined in the module ‘ngResource’ and this module is in the file angular-resource.js.

The first thing that we need to do is to reference the angular-resource.js file and add this module as a dependency of our module:

ngResource reference

ngResource reference

Using the $resource we can write our controller and repository easier because we don’t have to deal directly with deferred objects.

This is now the implementation of our controller and repository using the Angular service $resource , really easy!

angular js repository and controller