search

BTMorton / angular2-grid

A drag/drop/resize grid-based plugin directive for angular2
https://bmorton.co.uk/angular/
MIT License
354 stars 159 forks source link

Nothing Works #76

Open pgorbas opened 8 years ago

pgorbas commented 8 years ago

The link to a running demo under "Try it out Test angular2-grid in your browser. (https://tonicdev.com/npm/angular2-grid)" and clicking "run" just produces error "Cannot find module 'angular2/package.json'".

Pulling down the code, and running all the MPM commands, then trying to run it with http-server either in the root directory, or the demo directory fails - lot's of 404 errors.

Your sample code as written doesn't work, or at best has large omissions... 1) "import { NgGrid, NgGridItem } from 'angular2-grid';" this will not work - you need to specify the path to the angular2-grid ts file ( for example if I were to copy the nggrid.ts file into the same directory as the hosting page's ts file I would have something like this "import {NgGrid, NgGridItem} from './nggrid';" or if I try to import from where the "npm install angular2-grid" put's it code it would be something like "import {NgGrid, NgGridItem} from '../../../../node_modules/angular2-grid/src/nggrid';"

Finally your sample block of using the grid dosn't work at all:

<div [ngGrid]="{'resizeable': false, 'margins': [5, 10]}">
    <div *ngFor="#box of boxes" [(ngGridItem)]="box.config">
        <div class="title">{{box.title}}</div>
        <p>{{box.text}}</p>
    </div>
</div>

Firstly the syntax of the ngFor is outdated - it should be :`ngFor="let country of _countriesDS"`

Then it uses an undefined array of undefined objects. Evidently an array of <unknown Objects> in the undeclared array variable: `var boxes: = [new (),...]

` I see some potentially good stuff in here, but noting is usable with the information provided.

BTMorton commented 8 years ago

OK, so I have no idea where the tonicdev link comes from. I think that's an npm thing? My demos are at https://bmorton.co.uk/angular/ and https://bmorton.co.uk/angular_test/, both of which work.

The root directory package is designed to be run from within another web server. I currently have it running behind apache. The built files end up in the dist/ folder and you can then serve them up from a http server of your choice.

The demo folder should be self-contained, however, as of the angular 2 rc there are quite a few fixes required (see #75). You'll need to make sure that the angular 2 version is correct. That should then be able to run behind http-server, though I don't personally use that as I have an apache server running.

The sample code, is just that - samples. It's not designed as a fully running/working component.

  1. import { NgGrid, NgGridItem } from 'angular2-grid'; will work (unless something has drastically changed in TypeScript's module resolution). If you have TypeScript configured correctly, it will work (see this demo file)
  2. Yes the sample block in the readme is out of date. I haven't updated it since the change. Thanks for pointing it out.
  3. The sample block assumes that you have an array called boxes in your component. Though, as there is no actual component created in the sample you're gonna have to create that yourself.

The readme is intended as a "quick start", assuming that you have a component that already exists and that you are trying to add to it. Hence not being a 100% complete example of how to use the grid. For a full example of how to use it, see https://github.com/BTMorton/angular2-grid/blob/master/src/app.ts and the accompanying files.

For what it's worth, the readme could probably be improved. If you're willing to give that a go, I'll gladly accept a pull request.

pgorbas commented 8 years ago

I appreciate the reply Ben,

        I’ll have to see what direction my boss wants to go in. We are currently developing an Angular2 application which has page displaying a list of Counties obtains from a table in our M$ Sql Server database.  Our Angular2 application is built on the M$ MVC.Net framework.

We can display the data find in a simple HTML table from an array of data called “” like this:

<table border="1" *ngIf="(_countriesDS != null) && (_countriesDS.length > 0)">

    <tr>

        <th>DisplayName</th>

        <th>CountryId_Guid</th>

        <th>Abbreviation</th>

    </tr>

    <tr *ngFor="let countryDS of _countriesDS">

        <td>{{countryDS.DisplayName}}</td>

        <td>{{countryDS.CountryId}}</td>

        <td>{{countryDS.Abbreviation}}</td>

    </tr>

</table>

But cannot get anything to display trying your grid like this:

<div [ngGrid]="{'resizeable': false, 'margins': [5, 10]}">

    <div *ngFor="let country of _countriesDS" [(ngGridItem)]="box.config">

        <div class="title">{{country.DisplayName}}</div>

        <div class="title">{{country.CountryId_Guid}}</div>

        <div class="title">{{country.Abbreviation}}</div>

    </div>

</div

With my component file like this ( I copied the nggrid.ts file from '../../../../node_modules/angular2-grid/src/nggrid' from the same file the component was defined in from where the npm install put it --- I also tried “import {NgGrid, NgGridItem} from 'angular2-grid';” and “import {NgGrid, NgGridItem} from '../../../../node_modules/angular2-grid/src/nggrid':

…

import {NgGrid, NgGridItem} from './nggrid';

…

@Component({

selector: "angularUiGrid",

templateUrl: "app/components/sandbox/angular2_grid.html",

providers: [CountryService, NotificationService],

directives: [NgGrid, NgGridItem]

})

…

export class Angular2_grid implements OnInit {

private _countriesDS: Array<Country>; // for data obtained from DataService?    

constructor(public countryService: CountryService         //We inject the CountryService in the constructor...

    , public notificationService: NotificationService)    //We inject the NotificationService in the constructor...

{

    this.getCountriesDS();

}

…

I don’t have a config file nor am I sure WHERE to set up the configuration, but figured it was just styling and SOMETHING should get displayed without it, but I get nothing ( and the array length is 247 ).

If you can see the issue and feel inclined to reply with suggestions I’d be happy to try again.

From: Ben Morton [mailto:notifications@github.com] Sent: Wednesday, May 4, 2016 14:00 To: BTMorton/angular2-grid angular2-grid@noreply.github.com Cc: fubar pgorbas@yahoo.com; Author author@noreply.github.com Subject: Re: [BTMorton/angular2-grid] Nothing Works (#76)

OK, so I have no idea where the tonicdev link comes from. I think that's an npm thing? My demos are at https://bmorton.co.uk/angular/ and https://bmorton.co.uk/angular_test/, both of which work.

The root directory package is designed to be run from within another web server. I currently have it running behind apache. The built files end up in the dist/ folder and you can then serve them up from a http server of your choice.

The demo folder should be self-contained, however, as of the angular 2 rc there are quite a few fixes required (see #75 https://github.com/BTMorton/angular2-grid/issues/75 ). You'll need to make sure that the angular 2 version is correct. That should then be able to run behind http-server, though I don't personally use that as I have an apache server running.

The sample code, is just that - samples. It's not designed as a fully running/working component.

  1. import { NgGrid, NgGridItem } from 'angular2-grid'; will work (unless something has drastically changed in TypeScript's module resolution). If you have TypeScript configured correctly, it will work (see this demo file <https://github.com/BTMorton/angular2-grid/blob/master/demo/app/app.component.ts> )
  2. Yes the sample block in the readme is out of date. I haven't updated it since the change. Thanks for pointing it out.
  3. The sample block assumes that you have an array called boxes in your component. Though, as there is no actual component created in the sample you're gonna have to create that yourself.

The readme is intended as a "quick start", assuming that you have a component that already exists and that you are trying to add to it. Hence not being a 100% complete example of how to use the grid. For a full example of how to use it, see https://github.com/BTMorton/angular2-grid/blob/master/src/app.ts and the accompanying files.

For what it's worth, the readme could probably be improved. If you're willing to give that a go, I'll gladly accept a pull request.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/BTMorton/angular2-grid/issues/76#issuecomment-216967440 https://github.com/notifications/beacon/ALLv9Sx3TvUetOFjpX-_pallGQVVRZIpks5p-OzLgaJpZM4IXbIk.gif

BTMorton commented 8 years ago

OK, first question: are you looking for a dynamic data table? If so, I don't think is the plugin for you.

If not, the first thing I see is that you have:

<div [NgGridItem]="box.config">

You don't have box defined in this config. I suggest you either add a new function which returns the item config (e.g. [NgGridItem]="getConfig(country.Id)") or you add a property to each country with the config in ([(NgGridItem)]="country.config"). Note: no two-way binding on the function version.

The config file I was referring to is your tsconfig.json. In there you should have a line moduleResolution: 'node', or similar. That should then take care of the include issues. Assuming of course that a) your typescript compilation root directory is the same as your node_modules directory location and b) your node_modules folder is accessible on your public root (or you have a System.js redirect in place for it). If that's all correct then I have no idea. I'd have to see a working example, I'm afraid.