Use office-ui-fabric-js inside angularjs

Question

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?

It's a bit confusing what you are trying to do here. You *appear* to be trying to inject angularjs modules `'officeuifabric.core'` and `'officeuifabric.components'` into `YourApp`, but it doesn't look like these are angular modules. — Claies, Jul 25 '17 at 22:38
Short answer is yes, you will either need to use `ng-office-ui-fabric`, or write your own implementation that makes these libraries angular-compatible. — Claies, Jul 25 '17 at 22:39
`officeuifabric.core` and `officeuifabric.components` are angular modules. I have been injecting them like that, eg, [here](https://stackoverflow.com/questions/45178137/width-of-contextual-menu). — SoftTimur, Jul 25 '17 at 22:41
right, but those **definately** are `ng-office-ui-fabric` modules. They are not part of the non-angular script you are trying to inject in this sample. Your question seems to ask how to *not* use the library that was designed to do the exact thing you are trying to accomplish, and you are continuing to try and inject the library even though you aren't including it. — Claies, Jul 25 '17 at 22:42
OK... but is there a way to enable `
...
` part in a code having angularjs? — SoftTimur, Jul 25 '17 at 22:46
I am asking this because sometimes i have trouble using `ng-office-ui-fabric` like [here](https://stackoverflow.com/questions/45304625/dont-hide-items-when-there-are-still-space). — SoftTimur, Jul 25 '17 at 22:46
what does " enable `
...
` part in a code having angularjs?" even mean? **In theory**, if you just removed the dependencies on `ng-office-ui-fabric`, (i.e. `angular.module('YourApp', [])`), your app will not throw errors anymore. As far as using `office-ui-fabric`, you can certainly try using it without the angular support, but it's likely to be buggy, since it will be unable to tell angular when to update bindings. — Claies, Jul 25 '17 at 22:50
I see... I just realise we can do bindings (ie, `{{...}}`), `ng-click` and `ng-show` with `office-ui-fabric` and `angularjs` like [here](https://jsbin.com/lojezudito/1/edit?html,output).... Then, in this case, what's the value-added of `ng-office-ui-fabric`? — SoftTimur, Jul 25 '17 at 22:57
it looks to me like it's just meant to be an implementation to help manage the interaction between the two libraries. I don't have a lot of experience with the library to know what it adds or removes, but I was investigating your other question a bit. it seems to me that what you are seeing in that question might be a bug that needs to be reported, but I am still working through it. — Claies, Jul 25 '17 at 23:08
Cool, do you want to put an answer for this question? "if you just removed the dependencies on `ng-office-ui-fabric`, (i.e. `angular.module('YourApp', []))`, your app will not throw errors anymore. " — SoftTimur, Jul 25 '17 at 23:16

score 2 · Accepted Answer · answered Jul 25 '17 at 23:23

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.

Is there a standard way to use `office-ui-fabric` JavaScript functions with AngularJS? Will moving all these JS functions inside the controller be better? — SoftTimur, Jul 25 '17 at 23:29
creating a directive for the non-angular code is the standard, which is why `ng-office-ui-fabric` is a series of directives. — Claies, Jul 26 '17 at 00:54

Use office-ui-fabric-js inside angularjs

1 Answers1