How to add and set up AngularJS framework to Office365 for
Outlook Add-in
Hi,
Today I’ll show you how to add and set up AngularJS for
Outlook online in Office365
1. First, creat App for Office in Visual Studio
2013
2.
Choose the app type “Mail”, click “Next” and
3. After the project and it’s strucutre was created, open AppCompose folder and add the following folders :
a.
Controller
b.
Service
c.
View
4.
Add the javascript files in newly created
folders:
a.
Controller > MyControler.js
b.
Service > MySerice.js
c.
View > MyView.js
d.
Home > angularApp.js
5.
Add the following code snippets to files
angularApp.js
///<reference
path="../../Scripts/angular.min.js" />
var myApp =
angular.module("myApp", []);
MyControler.js
myApp.controller("myController", function ($scope, myService) {
var self = $scope;
});
MySerice.js
myApp.service('myService', function ($q, $http) { });
6. Update the Home.html file with following code in
according lines of the file you see in screenshot below:
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script src="angularApp.js" type="text/javascript"></script>
<script src="../Service/MyService.js" type="text/javascript"></script>
<script src="../Controller/MyController.js" type="text/javascript"></script>
<div id="content-main" data-ng-controller="myController">
<p><strong>Add home screen content here.{{1+2}}</strong></p>
7.
Compile the project by pressing F5 key and enter
you developer credentials
8.
Open Outlook App in your Office365
9.
Create new message and click on Add-ins button
above. You should see you project in a right navigation panel
10. If you’ve done everything right you will see number 3 (Note:
Remember we added this line of code {{1+2}}) near text “Add home screen content here”. So AngularJS
framework is ready and you can start developing a great applications J
Have a good time, J
