A Model Driven Approach for Generating Angular 7 Applications

The proliferation of language and framework updates and the appearance of new ones has made the need for code generation tools an inescapable one. For this reason, many companies have started to invest in this area with the aim of perpetuating the sssknow-how.MDA-Model Driven Architecturehas enabled semi-automatic generation of code via models. The MOFM2T standard is independent of the generated language, but to date, no generator of Angular code from a UML diagram has never seen the light of day, the objective of this article is to propose a platform allowing from a class diagram to generate an operational application in Angular 7. Keywords—MOFM2T, Angular;MDA; models; frameworks;UML diagram,generation of code.


Introduction
It has been almost 3 decades that researchers in the IT field began to put the conceptual bases of the platforms which will allow to pass either models to new models or models to code, the OMG (Object Management Group) is a part of it by introducing MDA as a remedys [1].
From its creation in the 1990s to the present day, the Web has evolved enormously. Originally designed to share static documents on the Internet, today we can use real applications directly from our browser. Connectionless use, push notifications, interactions with the device (access to orientation, access to the camera), etc., most of the functionalities historically available on thick client applications are now available on the Web. Therefore, the browsers JavaScript engines and the HTML APIs had to evolve. Browsers now offer highly optimized engines to execute JavaScript code quickly even on low-end devices. The HTML APIs have become more complete, especially with the arrival of HTML 5, which has brought a lot (storage in the browser, CSS 3 animations, etc.). This allows offering many more features.
The tools have also changed. JavaScript has become a predominant language, whereas before it was used only sparingly, many frameworks and IDE were born in order to offer a better development experience. Node.js, created in 2009, allows executing JavaScript code outside a browser and has quickly become an essential tool in front-end development. Frameworks like React, Angular, Vue.js and many others have been created to facilitate the creation of web applications.
From 2005, the AJAX system (Asynchronous JavaScript and XML) allows interactions between the user and HTTP backend: it is finally possible to exchange the information and generate content from these interactions.
In 2010, the first version of AngularJS was launched. It makes it easier to create Single Page Applications, web applications that mimic native applications: no browser refresh, reduced loading times, a much less "internet" UI, etc. This version already allows you to do many things, but suffers from a rather complex syntax as well as the limitations of JavaScript. This is why Google chooses to completely rewrite the framework for its version 2. Today, we are at Angular8 (now simply called "Angular"); version 3 having been skipped for semantic reasons quite simply.
Our methodology to reach this objective will be articulated on the use of MDA by having a class diagram in input, this one will undergo a transformation guaranteeing the generation of an application in Angular.
This manuscript is started by the exhibition of works in this area, after we moved to a dissection of the concepts of MDA, before introducing our concept of code generation and after we ended with the conclusion and perspectives.

Related Work
Due to the proven benefits of MDA, many methods have emerged in the field of web engineering. Several methods have also been implemented to support their ideas such as: AndroMDA: AndroMDA takes as input a commercial model specified in UML ("Unified Modeling Language") and generates important parts of the layers necessary for building a Java application. AndroMDA's ability to automatically translate highlevel business specifications into quality code saves considerable time in the implementation of Java applications [2].
WebML: WebML provides designers with a platform that allows them to express the main functionality of a site at a high level, without engaging in detailed architectural details [3].
OOHDM: The object-oriented hypermedia design method is a model-based approach to creating hypermedia applications. It includes four different activities, namely conceptual design, navigation design, abstract interface design and implementation [4].

UWE:
The UWE approach provides domain-specific notation, a model-driven development process, and tool support for web application engineering [5].
ArcStyler: Enables companies to create and integrate software applications in a highly automated and industrialized environment: it bridges the gap between business and technology by automatically transforming business models into functional software applications [6].
We tried by the same concept to generate an application in AngularJS through UML profiles [7] 3 Model Driven Engineering

The OMG approach
The concept of model in IDM explicitly refers to the definition of the languages used to build them. The language in which this model is expressed must therefore be explicitly defined. This modeling language is called meta-model. A meta-model is a model that defines the expression language of a model, that is, the modeling language. The notion of meta-model leads to the identification of a relationship, linking the model and the language used to build it, called "it conforms to". A model is said to conform to a meta-model if each of its elements (objects and relations) corresponds to an element of the meta-model, and if it respects all the properties (for example, invariant constraints) expressed on the meta-model.
It is on these basic principles that the OMG (Object Management Group) relies to define all of its standards, in particular UML [8].
MDE (Engineering Directed by Models) is on the way to become the new paradigm in terms of application development. The objective behind the use of such a paradigm is to increase productivity and reduce time development of complex systems by means of models which are much less related to technology and which are much closer to the industry. This abstraction of complex problems makes systems easier to specify and maintain [9][10] [11].
One of the best-known variations of MDE is the MDA (Model Driven Architecture) standard which, through the use of three levels of abstraction, aims to separate the business logic of the application of the technology that will be used to achieve it. The objective is to remove the direct link between applications and their coding associated, facilitating their interoperability and thus making them less sensitive to changes technologically [12].
In the field of MDE, meta-modeling plays a very important role. Indeed, it is considered a common technique of defining the abstract syntax of models and interrelationships between the elements of the model. If the model is an abstraction of the elements of the real world, the meta-model represents yet another abstraction, defining the properties of the model itself [13].
This approach emphasizes the development of models of higher level of abstraction and promotes the approach of transformation from one model to another. MDA recommends the development of the three types of following models:

Transformation of MDA models
Model transformations are at the heart of the model-driven engineering approach. But there is not yet a consensus on defining and implementing a transformation. In the literature, multiple approaches are proposed.
To carry out model transformations, these must be expressed in a certain modeling language or meta-model. Starting from the source and target meta-models of the transformation, there are two types of transformations: Endogenous and exogenous transformations. A transformation is said to be endogenous if the models involved come from the same meta-model. But when the source and target models are of different meta-models, the transformation is said to be exogenous or else translation [14].
Models and meta-models often have a graphical representation related to a graph. A model, in this case, can be considered as a labeled graph, constrained by consistency rules essentially defined as a MOF meta-meta-model. Graph-rewriting systems combine graphical notation and textual notation to express these transformations. A transformation program essentially composed of rewriting rules will first select a fragment of a source graph identified using a navigation language [15].

4
AngularGen Workflow I will expose our code generator that we have designed and developed, it will cover the transformation developed between the PSM and the code, AngularGen is our code generator implemented to cover this need. The input of this generator will be a class diagram, which will be translated into XML, the latter will be parsed and thanks to the design pattern interpreter to generate an application in Angular versions 7.

Fig. 2. AngularGen Workflow
The first phase was to define a source meta-model, of the class diagram as shown in Figure 3.  For example, for any class of the source model, a module, component, route, service, template, style file, directive will be generated with the same name.

Fig. 4. Our proposed target meta-model
Each application has a root module, the latter defines the descending modules, when the ngDoBootsrap is triggered all these modules will be loaded, each module imports its services, providers, diagrams and components [16].
A module can be considered as container for different parts of application like components, directives, services.
Angular applications must be developed as a hierarchy of Components. Each Component is an isolated part of the application for maintenance reasons.
Initially, Angular is a framework for developing One-Page applications [17]. Therefore by definition, there is no need to change pages (since there is only one) and the routing is not useful [18]. However, as the growing framework and its uses became more diverse, it's soon become possible to integrate a routing system. In versions prior to 1.2, which were beta versions, developers natively integrated this routing system to the framework for the sake of simplicity (they had many other priorities). However, as of version 1.2 which is stable and which made the renown of AngularJS, it was necessary to refocus it on these primary objectives: these famous applications One-Page. As the project progressed, many functionalities were born and the team decided to separate those weren't essential, a certain page load in AJAX and the result will be added in a portion of the DOM. Template collects a set of directives which will be added to the DOM when loading the component [19].
For our code generator, we will define static rules for the configuration files, suddenly all the generated applications will have the same configuration files, the version of the packages @ angular / * installed is "~ 7.2.14".

Study Case
As I mentioned in the previous sections, the class diagram will be the entry point of our code generator, the majority of class diagram editors guarantee the conversion of the class diagram into XML.
We will take this diagram as an example: For this class diagram, the xml file obtained:

Fig. 6. Generated XML
By loading this xml file into our AngularGen platform, the transformation rules cited in table 1 will be established, and an application in Angular 7 will be generated.

Conclusion
In this paper, UML class diagram concepts have been taken as the basis on which we can ensure the generation of an application, the use of an UML class diagram was the way with which we finally proceeded to generate our application, and such a methodology will ensure a gain on the time and durability side.
As a perspective, we want to extend what our code generator produces, by adding pattern publish subscribe between linked classes and adding the lazy loading mechanism between entities that have inheritance relationships, in addition to an automatic generation of elements of the graphical interface