0

Quick start with Angular UI Grid

On this article, we will try to create a page with a basic grid using ui-grid and base our output on example listed on http://ui-grid.info/docs/#/tutorial/101_intro.

Step 1

Go to https://github.com/angular-ui/ui-grid.info and download the latest release.

step001

 

Proceed to “releases” tab.

step001b

As of this writing, the latest release is v3.0.7. Download the release either by clicking the zip or tar.gz icon.

step001c

Here, we chose to download the .zip version of the release.

Step 2

Next, we replicate the working example listed on http://ui-grid.info/docs/#/tutorial/101_intro.

step002

Create a separate directory for this.

step002b

 

Create three (3) files:

  1. html
  2. css
  3. js

Copy the codes on that page and place them into their respective files.

Also, copy to and extract ui-grid.info-3.0.7 the First-Try directory

step002c

Step 3

Modify index.html to point to the correct download ui-grid release

step003

Now pointing to release 3.0.7. But look at line 11. That’s pointing to a CSS file!

step003b

Step 4

Test out and fix errors.

When you open index.html, you will encounter an error.

step004

To fix this, change index.html again. Notice the highlighted lines again?

step004a

It should be a <link> to the css file.

step004b

Step 5

Test again. It should work fine.

step005