h1. Angular : Hands On

Angular is one of the most famous client side development (as of 2018). Its strength is to provide an industrial approach to web application, as initially, web was made to share content and not to build applications.
As one of the Angular developers stated: _Angular is the web if the web had been designed to develop applications_ 
Angular is an MVx framework the "x" stands for "whatever", which means that it is not necessarily a controller as in the MVC case. The "x" is usually replaced by a REST service. In that way, Angular helps to make a cleaner Service Oriented Architecture (SOA).

h2. Quick Start: Angular IDE

To get started quite quickly with angular, without learning nor understanding all the backbone tools (node, npm etc.), you can start with angular IDE.
You can get angular IDE by following this link : "Angular IDE": https://www.genuitec.com/products/angular-ide/download/
Angular IDE is a revamped version of Eclipse which contains everything to start an angular based IDE.

Once you have downloaded it an started it, you can then create a new "Angular Application"

h2. Creating a new Angular Application

From Angular IDE, go to Menu File > New > Angular Project 

!images\angular.ide.newproject.png! 

Give a name to the project (here : "tutorial"), and click finish. Angular IDE may download the missing requirements automatically, which can lead to a long setup, but don't worry that's only for the first time.

bq. note that angular uses the dependency resolution system "NPM" (Node Packets Manager), which is really close to how maven works. 

Once you have created it, the project structure looks like this :

!images\angular.ide.newproject.structure.png!

h3. The source code location

In the angular projects, the source folder is located under @src/app@. this folder will contain all our source, including :
* the datamodel classes (yes Angular is strongly Object Oriented and Domain Driven Oriented!)
* the services classes
* the html templates that will allow us to build our application


h3. Launching the application

To launch the application, simply right-click on the project > Run As > Angular Web Application

h2. Creating components

h3. the component concept

Angular is based on the "component" concept, the goal of a component is to achieve a specific part of the application. A component will contain both the client side code and the presentation.

bq. This allows to focus on a precise part of the application without having to deal with a too large/complex amount of code.


h3. Our first component

To create a component, select @src/app@ > (right click) > @New@ > @Component@ as shown below :
!images/angular.ide.newcomponent.png!

We will name this component

Have a look to what is produced :


h2. Data Binding

h2. Actions


h2. Routing



p(breadcrumb). "Tutorials":../../../../tutorials > Advanced > "angular":../../angular > Angular Introduction > Angular: Introduction