CODEWITHSUNDEEP
javascriptangularjsms-officeoffice-jsoffice-ui-fabric
SoftTimur
SoftTimur

Reputation: 5550

Use office-ui-fabric-js inside angularjs

I have made a jsbin with office-ui-fabric-js.

Now I would like to add an angular controller around. So I tried this JSBin:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css">
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css">
  <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
</head>
<body ng-app="YourApp">
  <div ng-controller="YourController">
    <div class="ms-CommandBar">
      <div class="ms-CommandBar-mainArea">
        <div class="ms-CommandButton">
          <button class="ms-CommandButton-button">
            <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>
          </button>
        </div>
      </div>
    </div>
    {{haha}}
  </div>

  <script type="text/javascript">     
    var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
    for (var i = 0; i < CommandBarElements.length; i++) {
        new fabric['CommandBar'](CommandBarElements[i]);
    }
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
    .controller('YourController', ['$scope', function ($scope) {
      $scope.haha = true
    }])
  </script> 

</body>
</html>

However, it gives an error Failed to instantiate module YourApp. Does anyone know how to fix this?

By theory can we use office-ui-fabric and office-ui-fabric-js inside angular, or do we have to use ng-office-ui-fabric?

Upvotes: 3

Views: 707

Answers (1)

Claies
Claies

Reputation: 22323

ng-office-ui-fabric is a module for Angular.js which is a wrapper around office-ui-fabric. It is designed to give you AngularJs Directives that may make using office-ui-fabric easier.

In your code, you are still including the dependencies for this module, even though you aren't actually loading it. Removing these dependencies in your app load, i.e. angular.module('YourApp', []) will fix your app and allow it to load properly.

Using the office-ui-fabric library in this way might be challenging, because any time you use JavaScript functions outside AngularJs, you have to manually execute a $digest cycle for AngularJs to know that values on the page have changed. This may or may not be an issue with the office-ui-fabric library.

Upvotes: 2

Related Questions