Question

hasse_76 on Sun, 14 Dec 2014 01:59:40


I've tried to implement Jan Van Bladels article

http://app.pragmaswitch.com/CrudGrid/ng-app/index.html

and unlike other articles I have seen this one doesn't seem to involve mvc and app_start and so on, everything is done client side?

I am able to access the index.html file at http://localhost:somenumber/HTMLClient/ng-app/index.html

If I click the HTML client, I am redirected to the LS Browse screen I set up. There I have one post that I made in the LS client.

However I can't seem to get this to show in the custom index.html file?

If I click Add, nothing happens no modal window sliding down(guess I must make some .html file for this?), but the save button turns red, if i click this I get an error message saying "An error occured. Cannot read property 'extend' of undefined"

However it is saved to the db, but as a blank post.

I have uploaded the project to OneDrive

https://onedrive.live.com/redir?resid=48547E6FC0593A30%21434

If anyone please could take a look at it, and help me a litte bit, in getting it to function as pr. Jan's example I would be very grateful.


Sponsored



Replies

Paul Van Bladel on Sun, 14 Dec 2014 09:14:02


Indeed, this solution is a pure client side integration.

I'll upload the sample to the visual studio gallery. That will make it easier for you to debug what's going wrong in your app. Check my blog later today, I'll post a link.

BTW. my name is paul :)

Maybe you confuse with Jan Van der Haegen, but he's not an AngularJs believer, he's more in Durandal :)

Take care

paul.

Paul Van Bladel on Sun, 14 Dec 2014 09:23:56


see: http://blog.pragmaswitch.com/?p=1895

paul van bladel ==independent enterprise application architect== http://blog.pragmaswitch.com


hasse_76 on Sun, 14 Dec 2014 11:14:14


Thank you very much Paul, I'm sorry I wrote your name wrong, was a little bit tired tonight trying to figure your article out. I am sure this will help me alot with "branding" my LS project.

Paul Van Bladel on Sun, 14 Dec 2014 11:32:30


Haha,  no worries, I hope the sample is useful for you. Remember it is just a first version on angular breezeJs integration.

hasse_76 on Sun, 14 Dec 2014 12:40:06


One more thing Paul, by the way you truly are a programming god!

I feel really stupid, but first of all do I really need the SilverLight client?

Second and most important (and where I feel really stupid), I've tried to add a new propertyfield to the table. Lets call it comments.

I'am able to change the index.html to show a new column named comments, I also added this to the customerEdit.html file. If I click OK, the comment shows in the column of the index file.But if I go to the HTML client, nothing is showing there, and a refresh removes the added comment from the grid.

I've been looking through your code, but I can't seem to find out where to set up the binding to new fields I might want to add to the table.

Paul Van Bladel on Sun, 14 Dec 2014 12:47:40


One more thing Paul, by the way you truly are a programming god!

:) I'm definitely really definitely not, but it's very kind of you.

You don't need the silverliight client at all. You can change the startup client to html client if you want.

You need also to update the html client to add over there the new comments field. Did you add it correctly server side in the data table designer?

cheers

paul.

hasse_76 on Sun, 14 Dec 2014 21:27:41


I really like what you have done here Paul, and if anyone else can give me some advise so I don't have to keep bugging Paul, I would be very happy.

I've been messing around in the example, trying to recreate a new LS app, but getting some errors, so for now keeping to the working example.

The things I have tried to do is, I really would like to create some more tables with relationship to the Customer table, and then from the angular editCustomer pull in those fields as dropdowns. Tried but failed miserably.

I did however make a field in the customertable, made it as a choicelist and edited the index.html.

If i do changes to an element in the LS Screen, it shows up in the index.html file, however I am uncertain as to how I can populate a dropdown in the editCustomer file.

I've tried several options

<form name="customerEdit" class="form-horizontal" novalidate>
            <fieldset>
                <div class="form-group">
                    <label class="control-label col-md-2" for="lastName">Last Name</label>
                    <div class="col-md-4">
                        <input name="lastName" type="text" ng-model="item.lastName" class="form-control"
                               placeholder="Last Name" required />
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="firstName">First Name</label>
                    <div class="col-md-4">
                        <input name="firstName" type="text" ng-model="item.firstName" class="form-control"
                               placeholder="First Name" required />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="firstName">Type</label>
                    <div class="col-md-4">
                        
                            <select ng-model="item" ng-options="item.type for item in items" class="form-control"></select>

but this doesn't work, I can't seem to get the information stored in the db to show up.

Of course what I really would like is to store this info in another table and then be able to present this as dropdowns in the editCustomer.

hasse_76 on Mon, 15 Dec 2014 13:35:30


anyone?

Paul Van Bladel on Mon, 15 Dec 2014 20:42:00


I would start with defining on the controller a plain old array with option values and get that working first.

In a next step you can take also these option data from a the service and create something similar to customerService.getCustomers()

Here is the angular documentation for ng-options:

https://docs.angularjs.org/api/ng/directive/select


jim bancroft on Tue, 16 Dec 2014 05:26:29


Just saw the sample online Paul, looks great.  And thanks for uploading the source to msdn, I pulled it down before you had a chance to change your mind!

 

Paul Van Bladel on Tue, 16 Dec 2014 21:13:20


I'm happy it is useful for you Jim.

Dave Vorgang on Tue, 16 Dec 2014 22:18:50


Thanks Paul!

I do have a question.  Why does it initially show double brace field placeholders when it first loads?  Is that just how Angular works?

Thanks,

Dave

ADefwebserver on Tue, 16 Dec 2014 23:02:57


Thanks Paul!

I do have a question.  Why does it initially show double brace field placeholders when it first loads?  Is that just how Angular works?

Thanks,

Dave

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

https://docs.angularjs.org/api/ng/directive/ngCloak