Aspiring Architect: Basics of Angular SharePoint Framework Webpart

When you search angular sharepoint framework, you gonna encounter the "ToDoApplication". Let me tell you that is not an example suitable for a beginner to understand how to integrate angular with sharepoint framework.

Objective: Create a sharepoint framework webpart from scratch and integrate it with angular framework.

So to begin with, i assume you are aware of basics of angular and sharepoint framework. If not you can checking below mentioned articles before this article.

AngularJS : Basics

Basics of Sharepoint Framework Webparts

Lets start with creating a new solution for this project.

As i mentioned in earlier article, i maintain my code base in structured folder to the physical path appears in commands.

I reiterate that i assume you have setup your machine for sharepoint framework development. Installed NodeJS, Gulp, Yeoman, visual studio code.

Step 1: Create a sharepoint framework solution for this. Use the below commands.

cd C:\SPFx
md MyNGSPFxApp
cd MyNGSPFxApp
yo @microsoft/sharepoint

You will be prompted things like Solution name, which kind of project, webpart name, Description and what javascript framework to use.

This will take couple of minutes to download all the files required and would end-up like this.

Right away you can run "gulp serve" and see your webpart in action in workbench.html.

Step 2: Now to keep things simple i will not induce a lot of angular functionality.

Look at below markup.

<html>
  <head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
 (function(){
  var app= angular.module("myapp",[]);
  var mainFun= function($scope,$http){};
  app.controller("Main",["$scope","$http",mainFun]);
 })();
 </script>
  </head>

  <body ng-app="myapp">
    <h1>Hello Angular!</h1>
    <div ng-controller="Main">
     <input type="text" ng-model="name">
     <label>{{name}}</label>    
    </div>
  </body>
</html>

This is a simple angular application which has a textbox and the input value is automatically updates the label on its side.

Please note that our target is not to have a complex angular functionality. Our goal is to make angular work with sharepoint framework app.

Step 3: Open powershell again and change the path to your solution folder. In my case its "c:\SPFx\MyNGSPFxApp".
Run below commands.

npm install angular --save
npm install @types/angular --save

First one download the angular to one of the folders in solution and second one will download the typings for angular. Note that the second command will enable the angular intellisense in IDE.

Step 4: Run the command "code ." in powershell from path "c:\SPFx\MyNGSPFxApp" to open your code in VS Code.
Add a folder app and two files "appmodule.ts" and "HomeController.ts" as shown in the image.

You can also write the angular code right in the webpart html file, but its always a best practice to write angular code in separate modules files for ease of maintenance.

Now open "HomeController.ts" and add below code.

export default class HomeController{
   
}

and open "appmodule.ts" and add below code.

import * as angular from 'angular';
import HomeController from "./HomeController";

const myngspfxapp:ng.IModule = angular.module("myngspfxapp",[]);
myngspfxapp.controller("HomeController",HomeController);

Modify "MyNGSPFxAppWebPart.ts" file as shown below.
Add below 2 lines in import section :

import * as angular from "angular";
import "./app/appmodule";

Update the the html render part as below.

public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.myNgSpFxApp}">
        <div class="${styles.container}">
          <div ng-controller="HomeController">
            <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
              <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
                <span class="ms-font-xl ms-fontColor-white">Welcome to Angular SPFx!</span>
                <p class="ms-font-l ms-fontColor-white">Customize SharePoint Framework experiences using Angular!.</p>
                <input type="text" class="ms-font-l ms-fontColor-black" ng-model="name"></input>
                <p class="ms-font-l ms-fontColor-white">
                  <span class="${styles.label}">{{name}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>`;

      angular.bootstrap(this.domElement,["myngspfxapp"]);
  }

Now save all the files and run "gulp serve" command to check the webpart functionality in workbench.html

There it is, a working angular sharepoint framework webpart. Now familiarizing with the basics of integrating angular with SPFx, you can go and implement any complex angular functionality.

Just in case you can download code from here.

Happy Coding !

01/08/2017

Basics of Angular SharePoint Framework Webpart

AngularJS : Basics

1 comment: