<commit_before>---
layout: post
title: "A Look Into The Latest Javascript Frameworks - Angular 2"
date: 2017-03-21
tags: [Angular2,Javascript,Frameworks,.Net Core,WebAPI]
---
{% include JB/setup %}

This is a multi-part post that will take a look into the latest Javascript frameworks:
- [Angular 2](https://angular.io)
- [Aurelia](http://aurelia.io)
- [React](https://facebook.github.io/react)
- [Vue](https://vuejs.org)

[Part 1 - Installation]({% raw %} {{ {% endraw %} site.url {% raw %} }} {% endraw %}/2017-03-14-a-look-into-the-latest-javascript-frameworks-installation)

The overall repository can be found [here](https://github.com/r-abbott/JSFrameworks-EventManager).
The Angular specific repository can be found [here](https://github.com/r-abbott/JSFrameworks-EventManager/tree/master/em-angular).

This post will cover building a an API backed web application with Angular 2.

<h2>Overivew</h2>

The Angular [Quickstart](https://angular.io/docs/ts/latest/cli-quickstart.html) really does a great job of describing the project structure, so I don't feel it necessary to repeat what they say here.

The application I am building is a pretty simple Event management application. It has 2 views: an Events listing view, and an Event detail view.

Event Listing
<img src="{% raw %} {{ {% endraw %} site.url {% raw %} }} {% endraw %}/assets/2017-03-21/EventListingView.PNG" alt="Event Listing View" style="width: 600px;"/>

The requirements of this view are:
- List each Event and display the Date, Name, and the Price of the Event.
- If the Event's Price is $0, display "FREE" instead of the Price. Otherwise, display the formatted USD Price.
- The New Event button will navigate to the Detail view for a New Event.
- Clicking on an Event will navigate to the Details view of that Event.

Event Detail
<img src="{% raw %} {{ {% endraw %} site.url {% raw %} }} {% endraw %}/assets/2017-03-21/EventDetailView.PNG" alt="Event Listing View" style="width: 600px;"/>

The requirements of this view are:
- Display all of the Event's properties, with the exception of its Id.
- All Fields are editable.
- Each piece of Additional Information should be displayed individually in an text box, with the option of deleting the individual piece.
- Can add more Additional Information as needed
- Back button navigates back to the Event Listing
- Save button saves the Event using the Api, and navigates back to the Event Listing.
- Delete button deletes the Event using the Api, and navigates back to the Event Listing.

The backend is a .Net Core Web API that has the following signature:
- [GET] /events - returns all of the Event Listings
- [GET] /events/{id} - returns the Event Detail of a specific Event
- [POST] /events - creates a new Event
- [PUT] /events/{id} - updates an existing Event
- [DELETE] /events/{id} - deletes an existing Event<commit_msg>Fixing url<commit_after>---
layout: post
title: "A Look Into The Latest Javascript Frameworks - Angular 2"
date: 2017-03-21
tags: [Angular2,Javascript,Frameworks,.Net Core,WebAPI]
---
{% include JB/setup %}

This is a multi-part post that will take a look into the latest Javascript frameworks:
- [Angular 2](https://angular.io)
- [Aurelia](http://aurelia.io)
- [React](https://facebook.github.io/react)
- [Vue](https://vuejs.org)

[Part 1 - Installation]({% raw %} {{ {% endraw %} site.url {% raw %} }} {% endraw %}/2017-03-14-a-look-into-the-latest-javascript-frameworks-installation)

The overall repository can be found [here](https://github.com/r-abbott/JSFrameworks-EventManager).
The Angular specific repository can be found [here](https://github.com/r-abbott/JSFrameworks-EventManager/tree/master/em-angular).

This post will cover building a an API backed web application with Angular 2.

<h2>Overivew</h2>

The Angular [Quickstart](https://angular.io/docs/ts/latest/cli-quickstart.html) really does a great job of describing the project structure, so I don't feel it necessary to repeat what they say here.

The application I am building is a pretty simple Event management application. It has 2 views: an Events listing view, and an Event detail view.

Event Listing
<img src="{{ site.url }}/assets/2017-03-21/EventListingView.PNG" alt="Event Listing View" style="width: 600px;"/>

The requirements of this view are:
- List each Event and display the Date, Name, and the Price of the Event.
- If the Event's Price is $0, display "FREE" instead of the Price. Otherwise, display the formatted USD Price.
- The New Event button will navigate to the Detail view for a New Event.
- Clicking on an Event will navigate to the Details view of that Event.

Event Detail
<img src="{{ site.url }}/assets/2017-03-21/EventDetailView.PNG" alt="Event Listing View" style="width: 600px;"/>

The requirements of this view are:
- Display all of the Event's properties, with the exception of its Id.
- All Fields are editable.
- Each piece of Additional Information should be displayed individually in an text box, with the option of deleting the individual piece.
- Can add more Additional Information as needed
- Back button navigates back to the Event Listing
- Save button saves the Event using the Api, and navigates back to the Event Listing.
- Delete button deletes the Event using the Api, and navigates back to the Event Listing.

The backend is a .Net Core Web API that has the following signature:
- [GET] /events - returns all of the Event Listings
- [GET] /events/{id} - returns the Event Detail of a specific Event
- [POST] /events - creates a new Event
- [PUT] /events/{id} - updates an existing Event
- [DELETE] /events/{id} - deletes an existing Event
{'fraction_non_alphanumeric': 0.10756901157613535, 'fraction_numerical': 0.01674087266251113, 'mean_word_length': 4.124087591240876, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1981472', 'n_tokens_mistral': 1713, 'n_tokens_neox': 1592, 'n_words': 714}