You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This feature is for handling large object graphs as query parameters - object graphs so large that they won't fit in a URL.
7
7
It updates the [Breeze AJAX adapter](/doc-js/server-ajaxadapter) to allow HTTP POST
8
8
for specially-constructed [.withParameters](/doc-js/api-docs/classes/EntityQuery.html#method_withParameters)
@@ -12,7 +12,7 @@ It works by telling jQuery's AJAX implementation, or Angular's $http service, to
12
12
13
13
This is an add-on to Breeze, and POST requires changes to the way your `.withParameters` queries are structured, so don't use it unless you really need it.
14
14
15
-
##Installation
15
+
##Installation
16
16
Get [breeze.ajaxpost.js](https://github.com/Breeze/breeze.js.labs/blob/master/breeze.ajaxpost.js) from GitHub.
17
17
18
18
In your HTML file (e.g. index.html), add a script tag for **breeze.ajaxpost.js*****after*** the breeze library:
@@ -34,7 +34,7 @@ That's fine if you're using breeze's *default* ajax adapter. If you change the a
34
34
//... your service logic
35
35
}]);
36
36
37
-
##Usage
37
+
##Usage
38
38
Server side method using GET (example using .NET Web API):
39
39
40
40
[HttpGet]
@@ -76,8 +76,8 @@ Special parameters:
76
76
- $encoding: ‘JSON’ or x-www-form-urlencoded (the default)
77
77
- $data: contains the data to be sent to the server
78
78
79
-
##Examples
80
-
###Live POST queries
79
+
##Examples
80
+
###Live POST queries
81
81
82
82
A StackOverflow question prompted us to produce [**this plunker example**](http://plnkr.co/edit/nhXIG62BDJpEJE77oLFT?p=info) of an Angular app making POST queries to a cross-origin server. All app JavaScript is in the *script.js* file. Be sure to follow along with the *README.md* which describes the mechanics in detail.
#Breeze Labs: AngularJS Validation and Required Indicator Directive
5
+
#Breeze Labs: AngularJS Validation and Required Indicator Directive
6
6
7
7
The **`zValidate`** Breeze/AngularJS validation directive displays and entity property's validation errors on screen. It can also visually identifies a required property with an asterisk.
8
8
@@ -21,7 +21,7 @@ And if there is an error, it displays like this:
Breeze entities have built-in model-level validation driven by metadata that describe client-side validation rules for properties and entities. Breeze invokes these rules automatically during four phases of the entity life-cycle (attached, queried, property changed, saved). You also can invoke these rules programmatically at any time.
27
27
@@ -33,15 +33,15 @@ Those sources describe how to define validation rules and how to invoke them. Th
33
33
34
34
But we can show you *one way* to present errors that you may use for inspiration or "as is". That's the purpose of this Breeze Lab.
35
35
36
-
##Display errors with the zValidate directive
36
+
##Display errors with the zValidate directive
37
37
38
38
The `zValidate` directive is a way to display property validation errors as error messages adjacent to the errant data value.
39
39
40
40
A <ahref="http://docs.angularjs.org/guide/directive"target="_blank"><em>directive</em></a> is the AngularJS mechanism for manipulating the browser DOM programmatically as part of the Angular binding process.
41
41
42
42
Angular ships with a core set of directives that cover many scenarios. But they can't cover everything and you are encouraged to extend the Angular binding system with your own directives as we are doing in this lab project.
43
43
44
-
##Sample
44
+
##Sample
45
45
46
46
Perhaps the best way to understand this directive is to see it in a live example of a "Person Edit" screen.
47
47
@@ -63,15 +63,15 @@ While this sample demonstrates the `zValidate` directive, it coincidentally demo
63
63
64
64
Let's tour the sample code.
65
65
66
-
###Load the directive files
66
+
###Load the directive files
67
67
68
68
Pick "index.html" from the "Source Code" drop down (you can get back to the displayed result by clicking the "forward" triangle button in the upper right). Scroll to the scripts near the bottom.
69
69
70
70
The `zValidate` directive is defined in <ahref="https://github.com/Breeze/breeze.js.labs/blob/master/breeze.directives.js"target="_blank">breeze.directives.js</a>. Notice that we load this script ***after*** loading the angular and breeze JavaScript files and ***before*** loading any application JavaScript files.
71
71
72
72
The directive paints error error messages and the required indicator with default templates that depend upon CSS classes defined in <ahref="https://github.com/Breeze/breeze.js.labs/blob/master/breeze.directives.css"target="_blank">breeze.directives.css</a>. Scroll to the top where we loaded that CSS file among the other CSS files. Alternatively, we could have incorporated its contents within the application "style.css".
73
73
74
-
###Apply the directive
74
+
###Apply the directive
75
75
The application is ready to display property validation errors.
76
76
77
77
You decide which data bound HTML controls should have this behavior by applying the `zValidate` directive as an attribute of that control. In this sample, we apply it to every textbox. Here is the markup for the "First Name" textbox:
@@ -99,7 +99,7 @@ Returning to the binding expression, we see that ViewModel (`vm`) exposes a `per
99
99
100
100
The directive drew a red asterisk next to the textbox to indicate that the first name is required. We'll see how it knew to do that in a little bit.
101
101
102
-
###Validators
102
+
###Validators
103
103
You can create and remove validation errors by playing with the textbox values. Breeze monitors your changes and updates the validation error(s) for each property accordingly. Angular updates the property with every keystroke so you get an immediate visual response.
104
104
105
105
Where are the validators defined? Open the "model.js" via the "Source code" combobox. Look at the `configureMetadataStore` method.
@@ -115,11 +115,11 @@ The `configureMetadataStore` method has three steps.
115
115
2. Add the `Person` entity type to the metadata
116
116
3. Discover and register all properties with a "required" validation.
117
117
118
-
###Create a custom validator
118
+
###Create a custom validator
119
119
120
120
Most of the Person properties are validated with stock validators, shipped with Breeze. A "twitter" validator is not one of them so we had to write one. Check it out; notice that it's built with the Breeze RegularExpression validator factory method.
121
121
122
-
###Client-side metadata
122
+
###Client-side metadata
123
123
This sample doesn't get data from a server. We're either editing a faked `Person` or a newly created `Person` entity that we won't save. There is no server. There is no server-supplied metadata.
124
124
125
125
A Breeze client needs metadata. Fortunately, we can define that metadata in JavaScript on the client ... which we do in the `addPersonType` method.
The `firstName` definition includes two stock validators: `required` and `maxLength`. The stock validators are produced by generator functions that are static members of the Breeze `Validator` class. We trust you can follow the pattern for the remaining properties.
137
137
138
-
###Required property indicator
138
+
###Required property indicator
139
139
140
140
The directive can paint a ***required property indicator*** next to the input control or combobox bound to a required property.
141
141
@@ -156,7 +156,7 @@ If you add custom validators that should be treated as required, add `.isRequire
156
156
}
157
157
}
158
158
159
-
###Reconfiguring the error and required templates
159
+
###Reconfiguring the error and required templates
160
160
161
161
The `zValidate` directive has a default template for displaying errors and another template for displaying the required indicator.
162
162
@@ -173,7 +173,7 @@ The app is resetting the templates (see the`configDirective` method) during the
173
173
174
174
>See the Angular <ahref="http://docs.angularjs.org/guide/module"target="_blank">documentation for modules</a> to learn about the life-cycle of an Angular module and "configuration blocks" in particular.
175
175
176
-
##zValidate in a repeater
176
+
##zValidate in a repeater
177
177
This sample shows how you can display validation messages while editing a single `Person` entity. What if the screen presented many `Person` entities and you wanted to see all of their property validation error messages?
178
178
179
179
You can do that in the manner you'd expect.
@@ -185,7 +185,7 @@ You can do that in the manner you'd expect.
185
185
</li>
186
186
</pre>
187
187
188
-
##Why not use HTML5 or Angular validation
188
+
##Why not use HTML5 or Angular validation
189
189
190
190
HTML 5 defines a collection of <ahref="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation"target="_blank">form validation attributes</a>. Angular forms and controls have <ahref="http://docs.angularjs.org/guide/forms"target="_blank">built-in validation services</a>. Why not use either of these facilities instead of Breeze validation?
191
191
@@ -209,23 +209,23 @@ Fortunately, there is a practical argument to bolster the philosophical: **the `
209
209
210
210
Markup validation makes sense when you are binding to a simple object that doesn't have its own business rules. It is a convenient declarative alternative to writing a lot of validation JavaScript in the ViewModel. But Breeze entities come equipped, out-of-the-box with a metadata-driven, extensible, model validation mechanism which is both more powerful and easier to use. Skip the markup validation and go straight to the source ... with `zValidate`.
211
211
212
-
##Limitations
212
+
##Limitations
213
213
The approach described and implemented in this directive doesn't cover every scenario.
214
214
215
-
###Property errors only
215
+
###Property errors only
216
216
217
217
This directive displays property validation errors only. The entity may have errors that are not specific to a particular entity. You'll need to find another way to display them.
218
218
219
-
###Message location and format
219
+
###Message location and format
220
220
You can configure the "required" and "error" templates but the directive is written to display those templates in a particular location relative to the data bound HTML control. You'll have to revise the directive if that doesn't suit your needs.
221
221
222
-
###Only input controls
222
+
###Only input controls
223
223
The directive only works for HTML controls with the `ngModel` directive which is to say, with controls that accept user input. If you wanted to display error messages next to a read-only display of person properties, you would probably revise the directive to get the property info from `ngBind` and devise another way to present the error message.
224
224
225
-
###Multiple errors
225
+
###Multiple errors
226
226
A property can have multiple validation errors. This directive concatenates their error messages, separated by semi-colons (;). You'll have to revise the directive if you want different behavior.
227
227
228
-
##What about Knockout?
228
+
##What about Knockout?
229
229
This directive is an Angular solution.
230
230
231
231
We love Knockout too. We expect to write a <ahref="http://knockoutjs.com/documentation/custom-bindings.html"target="_blank">Knockout Custom Binding</a> that implements the same behavior with the same simplicity of application.
Sometimes you hold one more root entities and want both those roots **and their related entities** in a single array. That array represents the "entityGraph" of the root(s).
Copy file name to clipboardExpand all lines: doc-breeze-labs/index.md
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -10,17 +10,17 @@ These projects leverage the in-depth knowledge of BreezeJS team members and cust
10
10
11
11
Breeze Labs projects are all open-source. If a project doesn't yet fully meet your specific needs, you are invited to get involved, help out, fork and clone and submit pull requests.
12
12
13
-
##Getting Started
13
+
##Getting Started
14
14
15
15
Each Breeze Labs project is designed to provide drop-in capabilities for your apps, support for your development workflow or example implementations of common Breeze app patterns. Most projects reside on GitHub within the <ahref="https://github.com/Breeze/breeze.js.labs"target="_blank">breeze.js.labs repository</a> although some may live in separate repositories.
16
16
17
17
Every project has its own guide, either within this documentation, in the project, or both.
18
18
19
-
##License
19
+
##License
20
20
21
21
Breeze Labs projects are all released under the <ahref="http://opensource.org/licenses/mit-license.php"target="_blank">MIT license</a>. This license applies ONLY to the labs project-specific source and does not extend to Breeze itself, or any other 3rd party libraries used in a repository. For licensing information about BreezeJS, see the [License Agreement page](/doc-main/license).
22
22
23
-
##Support
23
+
##Support
24
24
25
25
While the Breeze Labs projects are stewarded in part by members of the BreezeJS team, these projects are not covered under the support agreements afforded to Breeze commercial and trial license holders. Breeze Labs projects do not provide official Breeze features and are not to be considered part of any version of Breeze. As such, these projects are not officially supported by the BreezeJS team. Any and all support requests should be directed to <ahref="http://stackoverflow.com/questions/tagged/breeze?sort=newest"target="_blank">StackOverflow and tagged with "breeze"</a>.
The Breeze Labs **MetadataHelper** script extends Breeze with a `MetadataHelper` class. Visit the "[Metadata By Hand](/doc-js/metadata-by-hand#addTypeToStore)" topic to learn how `MetadataHelper` methods can reduce error prone repetition in your configuration and improve the metadata authoring experience.
A Breeze Labs plugin that extends Breeze with a method that creates useful error messages from the error data passed to the failure callback when `EntityManager.saveChanges` fails.
We may run into trouble when we try to display Breeze entities in a vendor grid control.
8
8
@@ -50,7 +50,7 @@ After <span class="codeword">ko.toJS</span> unwraps the entities, we iterate ove
50
50
51
51
If the entities had navigation properties that were giving you trouble, you could follow the pattern and zap them too.</p>
52
52
53
-
##Consider projections instead##
53
+
##Consider projections instead##
54
54
You may be paying a double performance price when you don't have to. The query may be pulling more data over the wire than you need to display. And <spanclass="codeword">ko.toJS</span> may be copying values that you aren't going to display either.
55
55
56
56
The cost may be negligible and having those entities in cache for some future purpose could save you unnecessary server trips down the line. Only you know what's best for your application.
0 commit comments