Getting started with SPFx with AngularJS

SPFx banner

This article is a step-by-step tutorial to create a SharePoint Framework (SPFx) app with AngularJS. It shows how to store the content of the app in a separate HTML file. Additionally it utilizes Office UI components.

Why I like SharePoint Framework (SPFX)

Every time Microsoft releases a new version of SharePoint, it comes along with a new development model. With SharePoint 2010 I built SharePoint web parts and then added them to web part pages. Next, With SharePoint 2013 Microsoft introduced the add-in model and a lot of great functionality in JavaScript Client Object Model and SharePoint APIs. As a result, this allowed customizing portals without server-side deployments. I could use content editor or script editor for embedding some JavaScript code. SPFx

Both models (add-in model and inline JavaScript) have some disadvantages. In the add-in model the script is executed in the iFrame so it is difficult to reach the DOM of the page, use host site’s styles, have responsive design, etc. Inline JavaScript does not have this problem but there is a risk that someone will just delete or modify your solution. To make your life more difficult, some pages do not allow embedding JavaScript.

SharePoint Framework (SPFx) is the new model introduced with SharePoint 2016 and SharePoint online. It allows building client-side web parts for SharePoint that:

  • have access to the DOM
  • support responsive design
  • can use React, Angular, Knockout and other JavaScript frameworks
  • communicate with SharePoint via the JavaScript Client Object Model or REST APIs
  • have settings property pane – this minimizes the need for creating additional lists where you would normally store app’s settings

SPFx addresses the disadvantages of the previous models and hence makes SharePoint development easier and nicer.

My toolset

My toolset

For SPFx development I am using the following:

  1. SharePoint environment – I am using SharePoint online. The best way to get it for one year for free? Sign up for the Office 365 Developer Program
  2. Node.js – JavaScript runtime environment
  3. Yeoman – a scaffolding tool for web development projects
  4. Visual Studio Code – Microsoft’s free cross-platform code editor
  5. cmder – a console emulator which makes your console look pimp!

The whole SharePoint Framework documentation and step-by-step instructions to set up your environment are here.

Yeoman home screen for SPFx

getting started with spfx

The most straightforward way to get started with SPFx web part is to use Yeoman’s generator to build the structure of the solution. First of all, I create a new folder and within this folder I run the following command:

Next, there are some questions from the generator to answer and the important one is:

What framework would you like to start with?

Here ideally I would like to see AngularJS but it is not available yet. For now I am choosing “No JavaScript Web Framework”.

Once the configuration of packages and solution structure is done, I will have a working SPFx template which I can start customizing.

Then, I will add Office UI Fabric to the project (ngOfficeUIFabric). Office UI Fabric is “the official front-end framework for building experiences that fit seamlessly into Office and Office 365” and ngOfficeUIFabric is its implementation for Angular.

Now I will go ahead and add AngularJS to the solution.

Angular JS banner

Building an angular application

There are few ways of adding AngularJS to your project. In SharePoint Framework I like adding templates because I am used to .html extensions when building a page.

Add following items to your project:

Solution structure for AnularJS with SPFx

Here is the content of MainController.ts:

And main.template.html:
HTML code
This is my main content file with pure HTML hence I can comfortably edit it with my favorite HTML editor. I have a separate HTML file and as a result the solution is cleaner. Consequently HTML markup is easier to edit and read.

Finally, in the webpart.ts file I modified the render method to reference the template:

Note that I point to a separate file in line 3.

Finally, in the webpart file I added references:

This is very minalistic starting point for the further development. I have a clean html file which connects the controller to the view. I can also start using Office UI Fabric components.

And here is the proof it is actually working!

SPFx App with AngularJS and Office UI

Never miss an update by subscribing to our monthly newsletter!

Mateusz Orlowski

Senior SharePoint Consultant at Atos Consulting CH
I work with SharePoint, Office 365 and Azure.
My answer when something doesn't work:

Mateusz Orlowski

Latest posts by Mateusz Orlowski (see all)

SPFx with AngularJS - getting started
Article Name
SPFx with AngularJS - getting started
This article is a step-by-step tutorial to create a SharePoint Framework (SPFx) app with AngularJS. Additionally it utilizes Office UI components.
Publisher Name
Atos Consulting CH
Publisher Logo

4 thoughts on “Getting started with SPFx with AngularJS

  1. Pingback: Getting started with SPFx with AngularJS - Angular News

  2. Pingback: How to build SPFx Extensions with React - Atos Consulting CH

  3. Avatar
    Scott Reply

    When I create a new Web Part application using Yeoman scaffolding, it creates a folder with close to 300mb or node modules. I have tested with using multiple web parts under one “yeoman project” however the web parts that are build dependent on the “parent” project. Basically if anything breaks in your Gulp serve, all of the sub-projects will break as well. Is it “best-practice” to use a separate packages for each web part you are building?

    • Avatar
      Mateusz Orlowski Post authorReply

      Hi Scott,
      When you add a second webpart to a project using Yeoman, the generator will detect that it’s running on an existing project and instead of scaffolding, it will just add a new Web Part.
      When running multiple webparts in dev environment, I use one gulp instance to serve them all but I am not so concerned about the stability of the dev environment. I wouldn’t call it a “best-practice”, it depends on your expectations from dev environment.

Leave a Reply

Your email address will not be published. Required fields are marked *