AngularJS (v1.6.10) directives specific to the Office UI Fabric

June 2018 - Now in Archive Mode

As of June 2018, this project is now in archive mode. This means there are is no planned work / updates for this project going forward. This project was 100% run and maintained by the community. As most of the world has moved on from AngularJS (v1.x) to Angular (v6) at the time of this update, we have decided to archive this project. There will be no more updates.

At this time there are no updates planned on supporting Angitgular 6.

Branch Status

This project, ng-OfficeUIFabric, is a community effort to build the Office UI Fabric components as a suite of AngularJS 1.6.10 directives to make it easier to use in Angular-based applications.

This library is intended to be used with AngularJS v1.6. It is not intended for Angular (aka Angular 2 or Angular 4). Please refer to issue #405 for a discussion on moving to future versions of Angular. At the moment, this repo is only focused on AngularJS but would like to move to Angular (ng2/ng4) as soon as this project is complete.

See it running

We have a web site where you can see these directives running at http://ngOfficeUiFabric.com. This is a great way to see what components are available and the ease of use for you as a developer.

Dive Right In

Want to see things working right away? Check out our Minimal Path to Awesome doc! Using it you'll clone the repo locally, install all the dependencies, run tests, see code coverage reports, build the library & see a working directive demo!

Basic installation & usage information is found on this page... more docs are in the docs guides.

• Installation
• Support
  • Supported Browsers
  • Need Help?
  • Found a Bug?
• Contributing to the Project

Installation

Other than manually downloading the library, ng-OfficeUIFabric will be available in the following options. Then you just need to add references to the AngularJS, ngOfficeUiFabric JS & and Office UI Fabric CSS libraries and import the ngOfficeUiFabric modules and you're good to go. Check the package-ngofficeuifabric for simple usage info.

Bower

Install the library (which should also download the Angular & office-ui-fabric dependent libraries:

bower install ng-office-ui-fabric --save

NPM

Install the library (which should also download the Angular & office-ui-fabric dependent libraries:

npm install ng-office-ui-fabric --save

NuGet

Install the library (which should also download the AngularJS.Core & OfficeUiFabric dependent libraries.

Install-Package ng-office-ui-fabric

Direct Download

You can also directly download the built library if you wish. Grab either the unminified ngOfficeUiFabric.js or minified ngOfficeUiFabric.min.js from the package-ngofficeuifabric repo. You will need to also grab copies of Angular 1.6.10 and Office UI Fabric (you only need the CSS from Office UI Fabric). Installing from NPM, Bower or NuGet includes the dependencies.

CDN

Hosting facilitated by CDNJS, a community driven CDN. Simply add a reference in your page to the desired version available on CDNJS (check this page for the correct CDN reference for the desired version).

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/{{version}}/ngOfficeUiFabric.min.js"></script>

NOTE: Be sure to use the most current version!

Usage

To use the ngOfficeUIFabric in your project, you will need to add a reference to the Office UI Fabric's CSS files (which the ngOfficeUIFabric takes a dependency on) and the ngOfficeUIFabric library.

Add Reference to Office UI Fabric MDL1 Core CSS

At the present time, use the MDL1 version of the Office UI Fabric Core CSS files. This is the 2.6.* branch of the library.

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />

This assumes you are using the recommended Office UI Fabric CDN reference & not a local reference.

Add Reference to ngOfficeUIFabric LLibrary

We recommend using the CDN option when including the ngOfficeUIFabric in your projects:

<!-- add AngularJS... make sure to update for the desired version -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/{{VERSION}}/angular.min.js"></script>
<!-- add ngOfficeUIFabric... make sure to update for the desired version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/{{VERSION}}/ngOfficeUiFabric.min.js"></script>

Support

Supported Browsers

All directives in ng-OfficeUIFabric will work against the same versions that are commonly supported between the Office UI Fabric & AngularJS 1.6.10.

• Google Chrome
• Firefox
• Internet Explorer (IE9+)
• Edge
• Safari

Think You Found a Bug

First check the issues list to see if someone else has already found it and there's an ongoing discussion. If not, create an issue or jump in the .

Contributing to the Project

This project is currently in maintenance mode. There are no planned updates to this project going forward. If you are interested in taking the project over, please submit a issue to the issue list expressing your interest.

We want help! Please take a look at the Contribution Guide for guidance.