Update Angular to 1.2.0 RC2
This commit is contained in:
Colin Frei
parent
7416269494
commit
0d3a40980e
184 changed files with 17993 additions and 21133 deletions
|
|
@ -2,8 +2,8 @@
|
|||
<div><span class="hint"></span>
|
||||
</div>
|
||||
</h1>
|
||||
<div><div class="forms-page"><p>Controls (<code>input</code>, <code>select</code>, <code>textarea</code>) are a way for user to enter data.
|
||||
Form is a collection of controls for the purpose of grouping related controls together.</p>
|
||||
<div><div class="forms-page"><p>Controls (<code>input</code>, <code>select</code>, <code>textarea</code>) are ways for a user to enter data.
|
||||
A Form is a collection of controls for the purpose of grouping related controls together.</p>
|
||||
<p>Form and controls provide validation services, so that the user can be notified of invalid input.
|
||||
This provides a better user experience, because the user gets instant feedback on how to correct the error.
|
||||
Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted.
|
||||
|
|
@ -13,10 +13,10 @@ Server-side validation is still necessary for a secure application.</p>
|
|||
The <code>ngModel</code> directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
|
||||
In addition it provides an <a href="api/ng.directive:ngModel.NgModelController"><code>API</code></a> for other directives to augment its behavior.</p>
|
||||
<h3>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-224" source-edit-css="" source-edit-js="script.js-223" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-225" source-edit-css="" source-edit-js="script.js-224" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-224" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-224">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-225" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-225">
|
||||
<div ng-controller="Controller">
|
||||
<form novalidate class="simple-form">
|
||||
Name: <input type="text" ng-model="user.name" /><br />
|
||||
|
|
@ -34,8 +34,8 @@ In addition it provides an <a href="api/ng.directive:ngModel.NgModelController">
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-223"></pre>
|
||||
<script type="text/ng-template" id="script.js-223">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-224"></pre>
|
||||
<script type="text/ng-template" id="script.js-224">
|
||||
function Controller($scope) {
|
||||
$scope.master= {};
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ In addition it provides an <a href="api/ng.directive:ngModel.NgModelController">
|
|||
</script>
|
||||
</div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-224" ng-eval-javascript="script.js-223"></div>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-225" ng-eval-javascript="script.js-224"></div>
|
||||
<p>Note that <code>novalidate</code> is used to disable browser's native form validation.</p>
|
||||
<h1>Using CSS classes</h1>
|
||||
<p>To allow styling of form as well as controls, <code>ngModel</code> add these CSS classes:</p>
|
||||
|
|
@ -66,10 +66,10 @@ In addition it provides an <a href="api/ng.directive:ngModel.NgModelController">
|
|||
In the example both <code>user.name</code> and <code>user.email</code> are required, but are rendered with red background only when they are dirty.
|
||||
This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.</p>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-226" source-edit-css="" source-edit-js="script.js-225" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-227" source-edit-css="" source-edit-js="script.js-226" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-226" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-226">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-227" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-227">
|
||||
<div ng-controller="Controller">
|
||||
<form novalidate class="css-form">
|
||||
Name:
|
||||
|
|
@ -96,8 +96,8 @@ This ensures that the user is not distracted with an error until after interacti
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-225"></pre>
|
||||
<script type="text/ng-template" id="script.js-225">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-226"></pre>
|
||||
<script type="text/ng-template" id="script.js-226">
|
||||
function Controller($scope) {
|
||||
$scope.master = {};
|
||||
|
||||
|
|
@ -114,7 +114,7 @@ This ensures that the user is not distracted with an error until after interacti
|
|||
</script>
|
||||
</div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-226" ng-eval-javascript="script.js-225"></div>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-227" ng-eval-javascript="script.js-226"></div>
|
||||
<h1>Binding to form and control state</h1>
|
||||
<p>A form is an instance of <a href="api/ng.directive:form.FormController"><code>FormController</code></a>.
|
||||
The form instance can optionally be published into the scope using the <code>name</code> attribute.
|
||||
|
|
@ -128,10 +128,10 @@ This implies that the internal state of both the form and the control is availab
|
|||
<li>custom error messages for <code>user.email</code> and <code>user.agree</code></li>
|
||||
</ul>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-228" source-edit-css="" source-edit-js="script.js-227" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-229" source-edit-css="" source-edit-js="script.js-228" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-228" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-228">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-229" ng-html-wrap=" angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-229">
|
||||
<div ng-controller="Controller">
|
||||
<form name="form" class="css-form" novalidate>
|
||||
Name:
|
||||
|
|
@ -161,8 +161,8 @@ This implies that the internal state of both the form and the control is availab
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-227"></pre>
|
||||
<script type="text/ng-template" id="script.js-227">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-228"></pre>
|
||||
<script type="text/ng-template" id="script.js-228">
|
||||
function Controller($scope) {
|
||||
$scope.master= {};
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ This implies that the internal state of both the form and the control is availab
|
|||
</script>
|
||||
</div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-228" ng-eval-javascript="script.js-227"></div>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-229" ng-eval-javascript="script.js-228"></div>
|
||||
<h1>Custom Validation</h1>
|
||||
<p>Angular provides basic implementation for most common html5 <a href="api/ng.directive:input"><code>input</code></a>
|
||||
types: (<a href="api/ng.directive:input.text"><code>text</code></a>, <a href="api/ng.directive:input.number"><code>number</code></a>, <a href="api/ng.directive:input.url"><code>url</code></a>, <a href="api/ng.directive:input.email"><code>email</code></a>, <a href="api/ng.directive:input.radio"><code>radio</code></a>, <a href="api/ng.directive:input.checkbox"><code>checkbox</code></a>), as well as some directives for validation (<code>required</code>, <code>pattern</code>, <code>minlength</code>, <code>maxlength</code>, <code>min</code>, <code>max</code>).</p>
|
||||
|
|
@ -212,10 +212,10 @@ Note that we can't use input type <code>number</code> here as HTML5 browsers
|
|||
</li>
|
||||
</ul>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="form-example1" source-edit-deps="angular.js script.js" source-edit-html="index.html-230" source-edit-css="" source-edit-js="script.js-229" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div source-edit="form-example1" source-edit-deps="angular.js script.js" source-edit-html="index.html-231" source-edit-css="" source-edit-js="script.js-230" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-230" ng-html-wrap="form-example1 angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-230">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-231" ng-html-wrap="form-example1 angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-231">
|
||||
<div ng-controller="Controller">
|
||||
<form name="form" class="css-form" novalidate>
|
||||
<div>
|
||||
|
|
@ -241,8 +241,8 @@ Note that we can't use input type <code>number</code> here as HTML5 browsers
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-229"></pre>
|
||||
<script type="text/ng-template" id="script.js-229">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-230"></pre>
|
||||
<script type="text/ng-template" id="script.js-230">
|
||||
var app = angular.module('form-example1', []);
|
||||
|
||||
var INTEGER_REGEXP = /^\-?\d*$/;
|
||||
|
|
@ -285,7 +285,7 @@ Note that we can't use input type <code>number</code> here as HTML5 browsers
|
|||
</script>
|
||||
</div>
|
||||
</div><h2>Demo</h2>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="form-example1" ng-set-html="index.html-230" ng-eval-javascript="script.js-229"></div>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="form-example1" ng-set-html="index.html-231" ng-eval-javascript="script.js-230"></div>
|
||||
<h1>Implementing custom form controls (using <code>ngModel</code>)</h2>
|
||||
<p>Angular implements all of the basic HTML form controls (<a href="api/ng.directive:input"><code>input</code></a>, <a href="api/ng.directive:select"><code>select</code></a>, <a href="api/ng.directive:textarea"><code>textarea</code></a>), which should be sufficient for most cases.
|
||||
However, if you need more flexibility, you can write your own form control as a directive.</p>
|
||||
|
|
@ -297,10 +297,10 @@ However, if you need more flexibility, you can write your own form control as a
|
|||
<p>See <a href="guide/directive">$compileProvider.directive</a> for more info.</p>
|
||||
<p>The following example shows how to add two-way data-binding to contentEditable elements.</p>
|
||||
<h2>Source</h2>
|
||||
<div source-edit="form-example2" source-edit-deps="angular.js script.js" source-edit-html="index.html-232" source-edit-css="" source-edit-js="script.js-231" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div source-edit="form-example2" source-edit-deps="angular.js script.js" source-edit-html="index.html-233" source-edit-css="" source-edit-js="script.js-232" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
|
||||
<div class="tabbable"><div class="tab-pane" title="index.html">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-232" ng-html-wrap="form-example2 angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-232">
|
||||
<pre class="prettyprint linenums" ng-set-text="index.html-233" ng-html-wrap="form-example2 angular.js script.js"></pre>
|
||||
<script type="text/ng-template" id="index.html-233">
|
||||
|
||||
|
||||
<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
|
||||
|
|
@ -315,8 +315,8 @@ However, if you need more flexibility, you can write your own form control as a
|
|||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" title="script.js">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-231"></pre>
|
||||
<script type="text/ng-template" id="script.js-231">
|
||||
<pre class="prettyprint linenums" ng-set-text="script.js-232"></pre>
|
||||
<script type="text/ng-template" id="script.js-232">
|
||||
angular.module('form-example2', []).directive('contenteditable', function() {
|
||||
return {
|
||||
require: 'ngModel',
|
||||
|
|
@ -341,5 +341,5 @@ However, if you need more flexibility, you can write your own form control as a
|
|||
</script>
|
||||
</div>
|
||||
</div><h2>Demo</h3>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="form-example2" ng-set-html="index.html-232" ng-eval-javascript="script.js-231"></div>
|
||||
<div class="well doc-example-live animate-container" ng-embed-app="form-example2" ng-set-html="index.html-233" ng-eval-javascript="script.js-232"></div>
|
||||
</div></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue