SharePoint Framework and Angular–Introducing SPFX with Angular

GETTING STARTED

Getting started with Angular and the SharePoint is simple. First of all, close or fork the Github project. To clone the project and install all the necessary dependencies, execute the following commands in your environment :
git clone https://github.com/mananchoksi007/SPFX-Angular.git
npm install
gulp serve
The sample that you are running is very basic. It allows to render all the items (Id and Tile) of a specified list (by its name). I works on a local Workbench using mocked data and it works on the hosted Workbench using real data.

RUNNING THE SAMPLE

Once you have a browser running the local SharePoint Workbench, please add the "BasicAngular" webpart to your authoring canvas and see the result. You will see an Angular application running and you should be able to configure it through the editor panel by changing the title of the webpart and the list name. Once the list name is configured, you should see mocked results being rendered in your interface. At this point, to prove that the we can leverage multiple Angular webparts on the same page, you can add a second webpart and change its title. Both webpart will have a different configuration and will be completely isolated.

WHAT'S NEXT?

Isn't it cool? I find it amazing that we can finally run real code using Angular in the SharePoint Framework and that we can leverage the great features of Angular without compromises.
This is not the end of the Angular story in the SharePoint Framework. We absolutely need the community to test, contribute and use the concepts illustrated in this sample solution. Your feedback will impact this solution as we really want to support all the nice and shiny features that Angular add to the developer tool belt.
In the next post, we will cover the general concepts used to make this solution work and how it solves the challenges of the SharePoint Framework!
Oh! And (finally), happy Angular coding on the SharePoint Framework!