Compare commits

...

245 Commits

Author SHA1 Message Date
Lucas Galfaso 9474ec120a docs(CHANGELOG): add v1.3.4 changes 2014-11-25 00:05:18 +01:00
Pawel Kozlowski 09a9832358 fix(Angular): properly get node name for svg element wrapper
Fixes #10078
Closes #10172
2014-11-24 22:11:00 +00:00
Jason Bedard bf6a79c348 perf(*): use Object.create instead of creating temporary constructors
Closes #10058
2014-11-23 22:37:08 +00:00
Lucas Galfaso 8ee8ffeba0 fix(linky): encode double quotes when serializing email addresses
Email addresses can (under certain restrictions) include double quote
characters. See http://tools.ietf.org/html/rfc3696#section-3.

For example, `"Jo Bloggs"@abc.com` is a valid email address.

When serializing emails to the `href` attribute of an anchor element,
we must HTML encode these double quote characters. See
http://www.w3.org/TR/html-markup/syntax.html#syntax-attr-double-quoted

This commit does not attempt to improve the functionality (i.e. regex)
that attempts to identify email addresses in a general string.

Closes #8945
Closes #8964
Closes #5946
Closes #10090
Closes #9256
2014-11-23 21:58:18 +00:00
Peter Bacon Darwin 42d09f1772 docs(NgModelController): clarify the value parameter for $isEmpty 2014-11-23 15:24:36 +00:00
Martin Staffa 8692f87a46 fix(input): set ngTrueValue on required checkbox
Fixes #5164
2014-11-23 15:08:39 +00:00
Peter Bacon Darwin 40406e2f22 fix(input[date]): do not use $isEmpty to check the model validity 2014-11-23 15:08:39 +00:00
Peter Bacon Darwin 4644c5840f revert: fix(input): always pass in the model value to ctrl.$isEmpty
This commit tried to create consistency by ensuring that `$isEmpty` is not
called on both model and view values but it chose to only use `$modelValue`,
which is not actually correct.

`$isEmpty` is designed to compute whether the `$viewValue` is empty. In
practice this is the only part of the parse/format system that the
directive has control over. We can't rely on the `$modelValue` being in
any particular format since other directives can add in their own formatters
and parsers to completely change this.

(reverted from commit 3e51b84bc1)
2014-11-23 15:08:39 +00:00
thorn0 addb4bdd57 chore(docs): regroup version selector options into major branches and latest
Before this change we grouped by the  discontinued stable/unstable distinction.

Closes #10053
2014-11-23 13:26:33 +00:00
Gonzalo Ruiz de Villa 7496e8e5b7 refactor(*): combine sequence of .push() into one statement
Closes #10192
2014-11-23 09:38:36 +01:00
Dustin e9b9421cdb fix ($http): throw error when string URL is provided 2014-11-22 15:34:55 -08:00
Rado Kirov 7a374691b9 docs(injector): adds a missing backtick and reformat list.
Closes #10189
2014-11-22 14:48:02 -08:00
Shang Heng (Shawn) Wei 3be6835e0f docs($location): add examples for some methods
Closes #9754
2014-11-22 14:16:57 -08:00
shwei a3d79775e1 refactor(ngForm): Remove checking event.preventDefault and calling event.returnValue. Related to issue #4557. Worked with @bullwrinkle on this. 2014-11-22 14:13:12 -08:00
Rado Kirov 920b595080 doc(injector): adds strictDi documentation to appropriate methods.
Closes #9624
2014-11-22 14:01:37 -08:00
Jack Franklin 3109342679 docs(guide/unit-testing): improve unit testing guide
This commit adds to the unit testing guide:

- an explicit section on additional libraries: Karma, Jasmine and
  angular-mocks and link to the docs for those projects too. Explain the
  benefit and use case for each of these libaries
- fully featured test examples and add more documentation
  around them, in particular the controller test
- a clear separation between the section on principles of testing
  and the actual tutorial on writing a test

Closes #8220
2014-11-22 13:47:41 -08:00
Pawel Kozlowski aa01be8b2c test($http): parsing headers with multiple values
Closes #9473

Closes #10176
2014-11-22 22:11:59 +01:00
Brian Ford bb4d3b73a1 fix(ngModelOptions): preserve context of getter/setters
Many thanks to @NevilleS and @jbedard for collaborating with me on a solution to this!

Closes #9394
Closes #9865

BREAKING CHANGE: previously, ngModel invoked getter/setters in the global context.

For example:

```js
<input ng-model="model.value" ng-model-options="{ getterSetter: true }">
```

would previously invoke `model.value()` in the global context.

Now, ngModel invokes `value` with `model` as the context.

It's unlikely that real apps relied on this behavior. If they did they can use `.bind` to explicilty
bind a getter/getter to the global context, or just reference globals normally without `this`.
2014-11-22 12:36:12 -08:00
Wesley Cho 6dbd606ad7 fix($locale): Allow currency filter to fall back to maxFrac from locale
- Modify default fallback to `NUMBER_FORMATS.PATTERNS[1].maxFrac`

- Remove unnecessary resetting

Closes #10179
2014-11-22 12:29:06 -08:00
thorn0 764fa869dd fix($browser): allow chaining url() calls in setter mode
Closes #10157
2014-11-22 16:48:54 +01:00
Neville Samuell 7812dfcee8 fix($location): allow empty string URLs to reset path, search, and hash
Currently, providing '' to $location#url will only reset the hash, but otherwise has no effect. This
change brings the behaviour of $location#url more inline with window.location.href, which when
assigned to an empty string loads the page's base href.

Before:
$location.url() // http://www.example.com/path
$location.url('') // http://www.example.com/path

After:
$location.url() // http://www.example.com/path
$location.url('') // http://www.example.com

Fixes #10063

Closes #10064
2014-11-22 16:30:41 +01:00
Georgios Kalpakas 00b623e86b docs(ngMaxlength): document what happens on negative/non-numeric values
Closes #9998
2014-11-22 16:00:44 +01:00
Georgios Kalpakas 92f87b1142 fix(ngMaxlength): ignore maxlength when not set to a non-negative integer
This makes the behaviour of maxlength/ngMaxlength more inline with the
spec.

Closes #9874
2014-11-22 16:00:44 +01:00
Georgios Kalpakas 5c1fdff691 feat(ngMaxlength): add support for disabling max length limit
Previously, setting the maxlength to a negative number, would make all
input values invalid (since their length should be less than maxlength,
which is impossible).
This commit changes the behaviour of maxlength/ngMaxlength, effectively
disabling the maxlength validation (always returning true) when maxlength
is set to a negative number. This is more inline to how the HTML5
`maxlength` attribute works (both in browsers and according to the spec:
http://dev.w3.org/html5/spec-preview/attributes-common-to-form-controls.html#attr-fe-maxlength).

Related to #9874
Closes #9995
2014-11-22 16:00:43 +01:00
Georgios Kalpakas 891acf4c20 fix($route): fix redirection with optional/eager params
Previously, when (automatically) redirecting from path that fetured a
trailing slash and optional or "eager" parameters, the resulting path
would (incorrectly) contain the special characters (`?`,`*`) along with
the parameter values.

Closes #9819

Closes #9827
2014-11-22 15:34:16 +01:00
Georgios Kalpakas 93552fed1c test($route): fix test names 2014-11-22 15:34:16 +01:00
Peter Bacon Darwin b5fbd6a2f6 chore(favicon): provide retina friendly favicon
See https://github.com/angular/angularjs.org/pull/143
2014-11-22 10:54:28 +00:00
Peter Bacon Darwin 5c43b94fc4 chore(i18n): update locale to CLDR v26 2014-11-21 14:42:44 +00:00
Georgios Kalpakas 7dd94b9595 docs(ngAnimate.$animate): fix classes during the various animation phases
Closes #10124
2014-11-21 13:57:35 +00:00
Peter Bacon Darwin 95f8a8bab0 style(ngBind): remove trailing whitespace 2014-11-21 13:51:04 +00:00
Tony Rizko dc5bba8615 docs(ngBindHtml): fix awkward wording
Fixes #10097
Closes #10129
2014-11-21 13:29:16 +00:00
Peter Bacon Darwin 16c8f29ef6 docs(ngShow/ngHide): add spaces to improve readability of CSS
Closes #10101
2014-11-21 11:08:22 +00:00
Pawel Kozlowski d3fb8dd776 docs($filter): clarify what is a valid filter name
Also updates the CHANGELOG to add info about this breaking some
previous invalid uses of $filter

Closes #10054
Closes #10131
2014-11-21 11:04:24 +00:00
Caitlin Potter 95e03bce7e style($http): make jscs happy 2014-11-21 00:26:39 -05:00
Dustin Chilson 5388ca5710 docs($http): describe how to remove a header on a per request basis
Closes #10144
2014-11-21 00:26:17 -05:00
Brian Ford 1b275fb00e chore(scripts): fix 1.2.x tag name 2014-11-20 15:02:34 -08:00
Lucas Galfaso 1c68d00fbf docs(ngAnimate): Fix typo
The ngAnimate makes reference to a function `$animateProvider.classNamePrefix`
that does not exist, the correct function is `$animateProvider.classNameFilter`

Closes #10142
2014-11-20 23:34:37 +01:00
Brian Ford 158241e212 chore(scripts): publish 1.2.x releases to npm with correct tag 2014-11-20 14:31:58 -08:00
AlexChan eab271876c fix(input): call $setTouched in blur asynchronously if necessary
If the model is blurred during an apply it should trigger
$setTouched asynchronously.

Fixes #8762
Fixes #9808
Closes #10014
2014-11-20 23:01:43 +01:00
Peter Bacon Darwin 637d3b47d1 docs($httpProvider): add info about defaults.cache
Closes #10134
2014-11-20 21:25:38 +00:00
Martin Staffa 8ac369e829 docs(ngModelController): update wordings, add more general info
The wordings in setDirty etc. were specific to inputs, but ngModelCtrl
is agnostic to this and the preferred term is 'control'. I also
added some more info about this to the description, and linked to
the example that now lives at the bottom of the page.
2014-11-20 22:19:02 +01:00
Jeff Cross 5c611e898a docs(CHANGELOG): update changelog with 1.2.27 2014-11-20 10:28:02 -08:00
Peter Bacon Darwin dc9775da96 doc(ngModelController): move example below members 2014-11-19 21:31:56 +00:00
IShotTheSheriff e8941c0fe5 feat(ngModelController): add $setDirty method
- extract existing functionality to public method: $setDirty
- add tests to corresponding changes
- refactor code to use extracted method

Closes #10038
Closes #10049
2014-11-19 20:07:07 +01:00
Toilal bb16759f0b docs(jqLite): clarify that Debug Data must be enabled for scope/isolateScope methods
Closes #9515
Closes #10123
2014-11-19 19:54:15 +01:00
Georgios Kalpakas 2b41a5868a feat(ngPluralize): add support for count to be a one-time expression
Closes #10004
2014-11-18 23:49:24 +01:00
Jamshid Afshar 637c020f82 fix($http): return empty headers, ignore properties in Object prototype
Fix response headers with an empty value Empty response header values are legal
(http://www.w3.org/Protocols/rfc2616/rfc2616-sec4.html).

The headers getter fn will now only return null if the header property is not an own property.

Closes #7779
Closes #10113
Closes #10091
2014-11-18 16:37:38 -05:00
Georgios Kalpakas f7fde935d5 docs($location): fix method-name and typos in ihshprfx error
Closes #10106
2014-11-18 19:05:45 +01:00
Peter Bacon Darwin 5f552896ab chore(docs): update to dgeni-packages 0.10.7
This update to dgeni-packages fixes some trimIndentation issues

Closes #10101
2014-11-18 14:24:22 +00:00
Peter Bacon Darwin d5968c7853 docs(CHANGELOG): add 1.3.3 changes 2014-11-18 08:23:38 +00:00
PatrickJS 4f4ff5f31b fix(NgModelController): typo $rawModelValue -> $$rawModelValue 2014-11-18 08:08:47 +01:00
Martin Staffa e3764e30a3 fix(ngModel): don't run parsers when executing $validate
Previously, $validate would execute the parsers to obtain a
modelValue for validation. This was necessary, because a validator
that is called outside of model / view update (e.g. from an observer)
otherwise might only an undefined modelValue, because a previous
view update has found a validation $error and set the model
to undefined (as is tradition in angular)

This is problematic as validators that are run immediately after
the ngModelController initializes would parse the modelValue
and replace the model, even though there had been no user input.

The solution is to go back to an older design: the ngModelController
will now internally record the $$rawModelValue. This means a model
or view update will store the set / parsed modelValue regardless
of validity, that is, it will never set it to undefined because of
validation errors.

When $validate is called, the $$rawModelValue will passed to the
validators. If the validity has changed, the usual behavior is kept:
if it became invalid, set the model to undefined, if valid,
restore the last available modelValue - the $$rawModelValue.

Additionally, $validate will only update the model when the validity
changed. This is to prevent setting initially invalid models other
than undefined to undefined (see #9063)

Fixes: #9063
Fixes: #9959
Fixes: #9996
Fixes: #10025

Closes: #9890
Closes: #9913
Closes: #9997
Closes: #10048
2014-11-17 20:26:27 +01:00
Martin Staffa c9899c53ac test(ngModel): group validation tests 2014-11-17 20:26:17 +01:00
Jeff Cross 4d4e6036a9 chore(docs): add favicon to docs app 2014-11-17 09:32:21 -08:00
samuel durand 4d885cbd62 docs($anchorScrollProvider): remove repeated word
Closes #10093
2014-11-17 14:44:23 +00:00
Brian Westrich eec2020518 docs(tutorial/step-5): include sort and filter in json view experiment
Closes #10082
2014-11-17 14:33:50 +00:00
Brian Westrich 2901c53f42 docs(tutorial/step-4): "unknown" option is actually blank
The name 'unknown' doesn't appear as a choice, the new choice is just blank.
Side note: once I choose one of the non-blank options, I no longer see the blank option.

Closes #10079
2014-11-17 13:47:47 +00:00
Peter Bacon Darwin e80053d91f fix($rootScope): handle cyclic references in scopes when creating error messages
Use the new private function `stringify` to convert scope values to strings,
since this can cope with cyclic references and other oddities.

Closes #10085
2014-11-17 13:38:04 +00:00
Peter Bacon Darwin fa12c3c86a fix(ngRepeat): support cyclic object references in error messages
Now that `minErr` can cope with objects that cannot be normally stringified
to JSON, just pass the error arguments straight through without trying to
stringify them first.

Closes #9838
Closes #10065
Closes #10085
2014-11-17 13:37:58 +00:00
Peter Bacon Darwin cf43ccdf9b fix(minErr): stringify non-JSON compatible objects in error messages
Fix the JSON stringification to output a more meaningful string when an
object cannot be normally converted to a JSON string, such as when the
object contains cyclic references that would cause `JSON.stringify()`
to throw an error.

Closes #10085
2014-11-17 13:37:52 +00:00
Shahar Talmi a9352c19ce feat($location): allow to location to be changed during $locationChangeStart
Closes #9607
Closes #9678
2014-11-15 23:25:21 +00:00
Jakub Hampl 6f19a6fd33 fix($http): don't parse single space responses as JSON
Closes #9907
2014-11-15 12:43:24 +01:00
Kent C. Dodds f30163e63a docs(nav): highlight current nav-index-listing
Color the current nav-index-listing item dark red
to make it easier to know where you are.

Closes #9970
Closes #9974
2014-11-15 11:30:23 +01:00
Marcy Sutton 5b23bc9b07 docs(ngAria): Add Usage Details and Examples
Closes #10031
2014-11-14 18:08:42 -05:00
Marcy Sutton 9d1e87a3f1 docs(guide/accessibility): Content updates
Also includes new section on ngMessages
2014-11-14 18:06:59 -05:00
Peter Bacon Darwin 6604c23614 fix(select): ensure the label attribute is updated in Internet Explorer
Only changing the `<option>` text value is not enough to trigger a render
change in IE. We need to explicit update the `label` property too.

Closes #9621
Closes #10042
2014-11-14 21:17:28 +00:00
Peter Bacon Darwin 195deca6e2 test(select): refactor option elements expectations to use toEqualOption matcher
By using a new matcher our tests become less brittle with respect to unimportant
extra attributes.
2014-11-14 21:16:42 +00:00
Caitlin Potter 85eb9660ef fix(ngPattern): match behaviour of native HTML pattern attribute
From https://html.spec.whatwg.org/multipage/forms.html#attr-input-pattern

> The compiled pattern regular expression, when matched against a string, must have its start
anchored to the start of the string and its end anchored to the end of the string.

Closes #9881
Closes #9888
2014-11-14 20:18:57 +00:00
David Stensland d81ff8885b fix(ngMock): call $interval callbacks even when invokeApply is false
Make ngMock.$interval behave like ng.$interval

Closes #10032
2014-11-14 11:42:24 -05:00
Caitlin Potter eca14d98a4 chore($q): make jscs happy
jscs loves to be happy and does not love trailing whitespace.
2014-11-14 11:11:39 -05:00
Bernie Telles 22ecbc50f4 docs($q): explain what the $q service does in description
Explain what the $q service does in description, instead of origin document.

The original explanation was less accessible to people new to promises and JS in general.

Closes #10056
2014-11-14 11:09:37 -05:00
Chatchavan Wacharamanotham 7f857e44a2 docs(guide/compiler): replaced 'locals' with 'scope'
In "Understanding How Scopes Work with Transcluded Directives" section, a text referred to an
obsolete 'locals' instead of 'scope'.

Closes #10018
2014-11-14 11:03:24 -05:00
Caitlin Potter be6920b356 test(orderBy): add test cases for ordering array-like objects
Closes #10060
2014-11-14 10:02:23 -05:00
Karol Wypchło 8eabc5463c perf(orderBy): copy array with slice instead of for loop
Use array slice method to copy entire array instead of a for loop
http://jsperf.com/new-array-vs-splice-vs-slice/54

Closes #9942
2014-11-14 09:34:16 -05:00
Anton Savchenko 14ff529fbb refact(angular.bind): use concat() rather than duplicating code
Closes #4200
2014-11-13 13:33:24 +00:00
Jason Bedard fbad280570 refactor($parse): separate tokenizing vs parsing more
Fixes `a.b` and `a .b` generating different getterFns
Fixes `{'': ...}` turning into `{"''": ...}`
Fixes `{.: ...}` parsing as `{'.': ...}` instead of throwing
Fixes #9131
2014-11-12 23:36:23 +01:00
Pawel Kozlowski 8b775a0d58 docs(guide/expressions): clarify regexp literals usage in expressions
Closes #10026

Closes #10030
2014-11-12 22:50:21 +01:00
Pawel Kozlowski 0bbc6ee481 docs($route): fix description of the caseInsensitiveMatch property
Closes #10028
2014-11-12 21:02:24 +01:00
Blaise Kal 381b185117 docs(guide/expressions): replace curly quotes with straight quotes in code example
REAL QUOTES HAVE CURVES

Closes #10017
2014-11-12 13:50:09 -05:00
Henrique Ramos Limas fa0d8c47c3 docs($controller): mention "controller as" syntax
Closes #10011
2014-11-12 08:13:43 +00:00
PatrickJS 7e233eb58a docs($q): missing finally notifyCallback API
finally allows for notifyCallback and is missing in the Docs
https://github.com/angular/angular.js/blob/v1.3.2/src/ng/q.js#L288

Closes #10010
2014-11-12 08:04:56 +00:00
Caitlin Potter b7afd11d26 refactor($parse): don't use bind-once interceptor for non-bind-once expressions
Side-effects:
  - Logic for allOrNothing watches now lives in $interpolate rather than $parse

Credit to @jbedard for idea to remove $watch interceptors craziness from $interpolate. Even though
it technically didn't actually work, it was worth a shot, and helped clean things up a bit. Go team!

Closes #9958
Closes #9961
2014-11-11 20:29:36 -05:00
Georgios Kalpakas 8582088b36 docs($q): remove IE8-specific notice
Closes #10008
2014-11-11 21:03:51 +01:00
Pawel Kozlowski 0db573b749 feat($routeProvider): allow setting caseInsensitiveMatch on the provider
Fixes #6477

Closes #9873
2014-11-11 20:20:16 +01:00
codef0rmer 5e78af769e docs(guide/Index): add book AngularJS UI Development
Matthias and I wrote a book on AngularJS which might be helpful for Angular developers.

Merci~!

Closes #9971
2014-11-11 14:13:28 -05:00
AlexChan 804e75045c docs(ngModel.NgModelController) use $evalAsync instead of $apply for event handling
Have the apply called safely during events by using `$evalAsync` rather than `$apply`
This will help ensure that an apply for a user directive is not called during a digest cycle.

Closes #9891
2014-11-11 13:59:17 -05:00
Dim ebc3b7b1c3 docs(minerr/unpr): fix code example
Closes #10000
2014-11-11 12:35:19 +01:00
Andreas Fischer 830846f664 docs(guide/Modules): missing "a" in "a collection"
Closes #10001
2014-11-11 12:24:30 +01:00
yarsh 0462ee6659 docs(ngModelOptions): minor grammer error
Closes #9928
2014-11-11 10:20:32 +01:00
rsperberg 9cc6835819 docs(guide/Conceptual Overview): change "a" to "an" before "ng-controller"
Closes #9895
2014-11-10 20:41:04 +01:00
inphovore ee1fc1dc13 docs(guide/Bootstrap): batarang link correction
Closes #9869
2014-11-10 19:42:20 +01:00
Nicholas Albion 41b36e689c docs($compile): bindToController clarification
It was not clear that `bindToController` is a boolean.

Closes #9835
2014-11-10 19:19:05 +01:00
Georgios Kalpakas 52545e5a74 docs($browser): minor docs fixes
Remove obsolete `XHR` param from the docs and correct
`$log` param description.

Closes #9810
2014-11-10 19:07:15 +01:00
Justin 2abea7514a docs(select): minor markdown syntax fix
Half the sentence was being highlighted as code.

Closes #9983
2014-11-10 12:05:46 -05:00
Martin Staffa f157d02793 docs(ngModelController): clarify parse errors
Closes #9952
2014-11-09 23:31:27 +01:00
Rouven Weßling 77d8ae1d45 refactor($location) Remove unused variables
These were left around in 736c8fbbae

Closes #9482
2014-11-09 16:18:00 +01:00
Henry Zhu e21b6ff3ff style(*): add rule requireSpacesInConditionalExpression
Closes #9973
2014-11-09 15:51:01 +01:00
Henry Zhu 06016bb12c style(*): add rules requireSpace(After|Before)BinaryOperators 2014-11-09 15:51:01 +01:00
Arjunkumar 50e72fcae1 docs(guide/migration): typo fix
spell check propery to property

Closes #9937
2014-11-08 14:56:39 +01:00
micellius b84e62bd28 docs(CHANGELOG): ohmygosh they're different ohmygoshohmygosh
Align versioning format

Closes #9968
2014-11-08 08:11:51 -05:00
Igor Minar b6fd184a93 docs(CHANGELOG): add a security note to the 1.3.2 log 2014-11-07 17:09:44 -08:00
Caitlin Potter 1db9e617ce docs(CHANGELOG): slight fixup 2014-11-07 14:11:10 -05:00
Caitlin Potter 0918f146e4 docs(CHANGELOG): add v1.3.2 changes 2014-11-07 14:09:32 -05:00
Brian Ford 6dfd938bbc docs(guide/index): link to security 2014-11-07 10:32:10 -08:00
Brian Ford 4f5a60bcca docs($parse): formatting, link to security docs 2014-11-07 10:32:10 -08:00
Brian Ford e593939411 docs(security): add security doc 2014-11-07 10:32:10 -08:00
Martin Staffa 9e305948e4 fix(select): use strict comparison for isSelected with selectAs
Closes #9639
Closes #9949
2014-11-07 13:22:01 -05:00
Lucas Galfaso ed99821e4d fix($parse): stateful interceptors override an undefined expression
When using `$parse` with a stateful interceptor and the expression
is `undefined`, then return the result from the interceptor

NOTE from Igor: this is not the best solution. We need to refactor
this and one-time + $interpolate code to properly fix this. @caitp
is on it. See discussion in the PR.

Closes #9821
Closes #9825
2014-11-07 10:17:32 -08:00
Chirayu Krishnappa e057a9aa39 fix($parse, events): prevent accidental misuse of properties on $event 2014-11-06 19:30:48 -08:00
Chirayu Krishnappa e676d642f5 fix($parse): add quick check for Function constructor in fast path 2014-11-06 19:30:48 -08:00
Lucas Galfaso 288b531626 docs(CHANGELOG): Document breaking change from 23bc92b1
Document the breaking change from 23bc92b1

Closes #9947
2014-11-06 15:27:44 -05:00
rsperberg 7a4df50480 docs(guide/concepts): spell "Angular" with cap "A", fix typos
In these two instances, Angular was spelled with a lower-case "a." All occurrences should be spelled
consistently.

Compound adjectives preceding the noun they modify should generally be hyphenated (cf Chicago Manual
of Style, 6.40), e.g., "so-called directives."

Closes #9896
2014-11-06 14:16:16 -05:00
Adir 6550198003 docs(guide,tutorial): fix outdated Protractor API link
Link to the gh-pages deployment of protractor docs, it's much easier on the eyes.

Closes #9946
2014-11-06 13:57:50 -05:00
Marcy Sutton c6909ed144 docs(guide/accessibility): Add in-depth guide
Closes #9930
2014-11-06 10:17:37 -05:00
Marcy Sutton 187e43185d feat(ngAria): announce ngMessages with aria-live
By including the `ngAria` module, `ngMessages` will automatically include the aria-live
attribute with an assertive voice, allowing validation messages to be spoken throuhg a
screenreader.

Closes #9834
2014-11-05 17:50:18 -05:00
Peter Bacon Darwin 91834bcf37 test($compile): use ngMock.Scope.$countChildScopes() 2014-11-05 20:41:51 +00:00
Dave Longley 841c090755 fix($compile): do not rebind parent bound transclude functions
The `$compile` public API documentation indicates that
a transclude function may be passed as a second parameter, but
it was not clear that this is **not** the same function that is given
to directive link functions as the `transcludeFn` parameter.

We would like to be able to pass in a transclude function the public
linking function that is returned from `$compile` if we wish to, for
example, use lazy compilation inside a directive.

Doing so, however, highlighted two bugs:

* First, the transclude function would get rebound, incorrectly, changing
its scope from its original binding.
* Second, the `containingScope` would not be updated and the wrong
`$parent` would be assigned to the `transcludedScope` resulting in a
memory leak.

This patch fixes both of these issues.

It also converts various private optional positional parameters on `publicLinkFn`
into an `options` parameter, which is an object hash. The new `options`
parameter is documented as part of the public API.

Thanks to @lgalfaso, @tbosch, and @petebacondarwin.

Closes #9413
2014-11-05 20:41:51 +00:00
Kent C. Dodds da960544f1 docs(guide/Running in Production): ng-strict-di
Adding note about Strict DI mode.

Closes #9908
2014-11-05 14:43:13 -05:00
Igor Minar 74981c9f20 feat(ngMock): decorator that adds Scope#$countChildScopes and Scope#$countWatchers
When writing tests it's often useful to check the number of child scopes
or watchers within the current current scope subtree. Common use-case for advanced
directives is to test that the directive is properly cleaning up after itself. These
new methods simplify writing assertions that verify that child scopes were properly
destroyed or that watchers were deregistered.

Closes #9926
Closes #9871
2014-11-05 13:23:19 -05:00
danielmbarlow dc4b06559f docs(tutorial/step_12): added 'see phone-detail change'
This one caught me out for a while because, despite the note underneath, I didn't notice the addition
of <div class="phone-images"> and it's repeater until later.

Closes #9924
2014-11-05 12:13:57 -05:00
danielmbarlow 56138bdd63 docs(tutorial/step_12): small change to overview
The bullet points at the beginning of the article were a little hard to understand because they
didn't follow the grammatical form of the preceding articles. I hope these small modifications make
it a little easier for someone else to read.

Closes #9922
2014-11-05 09:08:56 -05:00
danielmbarlow 0ccc4fcd89 docs(tutorial/step_05): explain need for $httpBackend.flush in tests
There is an excellent explanation for the need for this in the documentation that may be helpful to
tutorial users, so I added a link to it.

Closes #9919
2014-11-05 08:36:37 -05:00
Julie Ralph b7e2b01bb5 chore(ci): update protractor to version 1.4.0 2014-11-04 17:16:19 -08:00
Tobias Gesellchen 0c19482d03 chore(.gitignore): ignore IntelliJ IDEA module files
Ignore IntelliJ IDEA modules files in the git repository

Closes #5273
2014-11-04 12:46:31 -05:00
Tero Parviainen 0f7bcfdf93 docs(guide/scope): describe watch depths
Describe and visualize the three watch strategies: By reference, by collection items, and by value.

Closes #9388
2014-11-03 12:44:16 -08:00
Loring Dodge 9a26ab5870 docs($route): replace comma with "and"
Remove a comma and replace with "and" on line 444

Closes #9889
2014-11-03 20:58:46 +01:00
jbnizet d906ed3100 docs(input): replace dateTimeLocal by datetime-local
Fixes #9856
Closes #9870
2014-11-02 19:58:32 +01:00
Martin Staffa 0b16d10d2d docs(ngValue): clarify the limitations of ngValue and option elements 2014-11-02 19:47:09 +01:00
Martin Staffa e0198c1cda docs(ngModelController): add $name property 2014-11-02 18:43:52 +01:00
Martin Staffa ba731ab850 docs(ngModelController): remove bogus @param fields 2014-11-02 18:43:52 +01:00
Caitlin Potter e69c1806a8 style(routeSpec.js): make jshint happy 2014-11-01 18:11:51 -04:00
cmichal b4770582f8 fix(ngRoute): allow proto inherited properties in route params object
copy route params with angular.copy before using angular.extend which looks only for enumerable own
properties

Closes #8181
Closes #9731
2014-11-01 18:08:24 -04:00
Henry Zhu 2a2fd14c08 docs(guide/Forms): clarify ngModel behavior for validation
Bueno!

Closes #9866
2014-10-31 18:08:22 -04:00
Jeff Cross e4eb382f2d docs(changelog): add release notes for 1.3.1 spectral-lobster 2014-10-31 10:39:14 -07:00
Ryan Smith ed6e91b318 fix($animate): properly handle class resolution when element data is missing
Closes #9636
2014-10-31 12:28:58 -04:00
Julie Ralph 7b7b082125 chore(ci): fix broken sauce connect download url 2014-10-31 09:24:07 -07:00
eltacodeldiablo 3831e45a7d chore(.editorconfig): remove settings for ngLocale after change to scripts 2014-10-31 11:27:35 -04:00
Henry Zhu 018991f8c8 chore(build): exclude generated files in src/ngLocale from jscs check
The robots don't generate super-clean code ._.
2014-10-31 11:27:35 -04:00
Henry Zhu c77f5d1a29 chore(travis): reorder linting tasks to after unit tests 2014-10-31 11:27:34 -04:00
Henry Zhu 030101a43a style(*): add numerous JSCS rules to unify code-styles in the tree
Changes:

  - add rule requireSpaceBeforeBlockStatements (require space before brace when opening block statement)
  - add operators to rule disallowSpaceAfterPrefixUnaryOperators (no space after prefix inc/dec ops)
  - add rule disallowSpaceBeforePostfixUnaryOperators (no space before postfix inc/dec ops)
  - add rule disallowSpacesInsideArrayBrackets (array literals no longer padded with spaces)
  - add rule requireCommaBeforeLineBreak (line can't start with comma token)
  - add rule validateLineBreaks (require LF linebreaks)

Closes #9792
2014-10-31 11:27:16 -04:00
Uri Goldshtein 2a0254e181 docs(guide/index): add link to angular-meteor
Bueno!

Closes #9844
2014-10-30 11:12:54 -04:00
Tim Raymond ce20dd06fe docs(ngValue): replace input[select] with option for clarity
It is impossible to create an `input[select]`, so it appears
the intention here was actually `option`.

Fixes #7994
Closes #8203
2014-10-29 20:40:48 +01:00
Jeff Cross d7a78e420a docs(select): add more notes about ngRepeat and clean up style
Closes #9592
2014-10-29 12:15:39 -07:00
Juan Gabriel Jimenez Campos 4b4098bfca fix(select): assign result of track exp to element value
Fixes a regression where the option/select values would always be set to
the key or index of a value within the corresponding collection. Prior to
some 1.3.0 refactoring, the result of the track expression would be bound
to the value, but this behavior was not documented or explicitly tested. A
cache was added in order to improve performance getting the associated
value for a given track expression.

This commit adds one explicit test for this behavior, and changes several
other trackBy tests to reflect the desired behavior as well.

Closes #9718
Fixes #9592
2014-10-29 11:37:48 -07:00
Ralph Samuel c3b3b90bc9 docs(guide/Scopes): add "the" in front of "DOM" on line 42
Closes #9818
2014-10-29 13:50:57 -04:00
kboutsen 43b1a3739a docs(tutorial/step_4: update test to match new $bindings behaviour
var phoneNameColumn = element.all(by.repeater('phone in phones').column('{{phone.name}}'));
should be
var phoneNameColumn = element.all(by.repeater('phone in phones').column('phone.name'));

Closes #9823
2014-10-29 11:02:04 -04:00
Jeff Cross b4db713cde fix(jenkins): reset baseUrl in protractor conf
Commit 22b817ec11 changed the url
used by protractor in all docs tests to prepend "build/docs", which
was already set to the `baseUrl` in `protractor-jenkins.conf`. This
commit just changes the protractor config's `baseUrl` to adapt
to the changes in the spec files.

Closes #9783
2014-10-28 13:19:25 -07:00
Georgios Kalpakas df3d739654 docs(guide/*): fix typos and links
Fix some typos and link-errors introduced in
https://github.com/angular/angular.js/commit/d1ccf176351cda2b49599374c7d4ba594796012f.

Related to #9786
Closes #9800
2014-10-27 12:32:30 -04:00
ChristianKohler 99ec8d66c5 chore(docs): clarify comment which was copy&paste from dgeni example
It makes people happy, so why not

Closes #9798
2014-10-27 12:23:04 -04:00
Brian Ford d1ccf17635 docs(guide/*): improve explanation of strictDi
Closes #9786
2014-10-27 04:26:43 -07:00
Brian Ford c3fcbbd750 docs(guide/services): use array annotation in example 2014-10-27 02:51:02 -07:00
Brian Ford 29d727210d docs(guide/bootstrap): link to batarang 2014-10-27 02:24:07 -07:00
Christian Liebel 875f8f6557 test(ngSanitize): fix test descriptions
SVG attribute test splitted, descriptions changed accordingly

Related to #9770
Closes #9787
2014-10-25 14:03:26 +02:00
Judy Tuan f34c1ff53f docs(misc/Develop): update required Java version 2014-10-25 13:53:26 +02:00
Peter Bacon Darwin 54ddca537e chore(docs/search): ensure that default search goes to API first
Closes #9736
2014-10-25 09:39:24 +02:00
Kent C. Dodds 2cd5b4ec44 fix($compile): returning null when an optional controller is not found
Currently, `undefined` is returned. However, the desired behavior is to
return `null` when the controller is optional and not found.

(If this breaks your app, it really shouldn't .v.)

Closes #9404
Closes #9392
2014-10-24 15:14:31 -04:00
Kent C. Dodds 4bf254c155 test($compile): add test for optional require in directives with ^ operator
The directive property `require` allows optional requirement via
the `?` before or after the `^` operator. Add tests to ensure this
functionality is not lost inadvertently.

Closes #9391
Closes #9392
2014-10-24 15:14:20 -04:00
Shahar Talmi d0226ebbbf chore(npm): updated some packages so shrinkwrap works with npm@2.x
some packages were using versions that do not match semver@4 semantics and therefore generated
errors when trying to create shrinkwrap with npm@2.x. this shrinkwrap will make it much easier to
update the shrinkmap from now on

Closes #9706
2014-10-24 15:09:03 -04:00
Shahar Talmi 3df9de2e31 chore(npm): add cheerio to npm shrinkwrap
Closes #9706
2014-10-24 15:09:00 -04:00
Shahar Talmi 4d12812bb4 refactor(tests): remove some duplicate conditions
Closes #9706
2014-10-24 15:08:56 -04:00
Shahar Talmi 42f7c80bb6 chore(tests): remove redundant file
Closes #9706
2014-10-24 15:08:43 -04:00
Georgios Kalpakas 7574dd25d9 style(filterSpec): fix white-space and newline inconsistencies
Closes #9765
2014-10-24 14:51:34 -04:00
flezen 3b3d9218e8 docs(tutorial/step_11): it says there are 4 tests, BUT THERE ARE 5!
Bueno!

Closes #9775
2014-10-24 11:17:47 -04:00
Georgios Kalpakas e780eeee27 test(ngSanitize): enhance test regarding the xlink:href attribute
Closes #9770
2014-10-23 21:13:07 -04:00
Georgios Kalpakas 4cccf0f2a8 fix(ngSanitize): attribute name: xmlns:href -> xlink:href
Closes #9769
2014-10-23 21:03:18 -04:00
Christian Liebel a54b25d779 feat(ngSanitize): accept SVG elements and attributes
SVG elements and attributes are now accepted and sanitized by ngSanitize.

Closes #9578
Closes #9751
2014-10-23 16:40:34 -04:00
Caitlin Potter 36666f6fad chore(compileSpec): make jscs happy
Broke because 40bbc98178 landed before d3b1f502e3
2014-10-23 16:29:52 -04:00
Henry Zhu d3b1f502e3 style(*): add rule disallowSpacesInAnonymousFunctionExpression beforeOpeningRoundBrace, including i18n generator 2014-10-23 15:59:26 -04:00
Henry Zhu 94f5a285bf fix(i18n): rename datetimeSymbols to be camelCase 2014-10-23 15:59:25 -04:00
Henry Zhu 7f65f97919 style(*): add rule requireSpacesInFunction beforeOpeningCurlyBrace
This rule enforces a space after the curly brace
for function declarations, anonymous function expressions,
and named function expressions.
2014-10-23 15:59:25 -04:00
Henry Zhu 922162853b style(*): add rule disallowSpacesInFunctionDeclaration beforeOpeningRoundBrace 2014-10-23 15:59:25 -04:00
Henry Zhu 655fccce3a style(*): add disallowSpacesInNamedFunctionExpression beforeOpeningRoundBrace 2014-10-23 15:59:24 -04:00
Gabriel Monteagudo 40bbc98178 feat($compile): allow $watchCollection to be used in bi-directional bindings
an asterisk can be specified in the binding definition to use $watchCollection instead of $watch.
e.g. scope: { prop: '=*' }

Closes #9725
2014-10-23 14:08:55 -04:00
Olivier Louvignes 9ad6c77568 docs($animate): describe how to avoid conflicts with 3rd party CSS frameworks
Closes #8569
Closes #9722
2014-10-23 18:31:14 +02:00
Peter Bacon Darwin cfe7b0e9ef docs(ngShowHide): use local bootstrap CSS 2014-10-23 12:05:05 +02:00
Rouven Weßling 031d4cd2a9 chore($sniffer) remove Opera < 15 vendor prefixes and document it
Closes #9483
2014-10-22 15:38:36 -04:00
alindberg acbd302efb docs(tutorial/tutorial): instructions to install npm on debian
Additional package required for a Debian install

Closes #9749
2014-10-22 14:16:21 -04:00
Rouven Weßling 37790e920d refactor(Angular) use Object.keys instead of manually constructing array
Shrink dat coed ;u

Closes #9704
2014-10-22 14:00:54 -04:00
Pablo Villoslada Puigcerber 531a8de72c fix($observe): check if the attribute is undefined
Check if the attribute is undefined before manually applying the function because if not an
undefined property is added to the scope of the form controller when the input control does not
have a name.

Closes #9707
Closes #9720
2014-10-22 13:45:37 -04:00
Martin Hochel d488a89466 docs($http): document $httpProvider.interceptors in $httpProvider documentation
☆.。.:・゜☆ HASHBANG #NGEUROPE ☆.。.:・゜☆

Fixes #9366
Closes #9728
2014-10-22 11:25:22 -04:00
Nehil Jain 3635721ce4 docs(guide/expressions): add commas to run-on sentences to make them clearer
Closes #9738
2014-10-22 10:49:18 -04:00
Cyril Lakech e9c5be58ab docs(form.FormController): add date parse error tokens to FormController.$error
☆.。.:・゜☆  Closes #9743 ☆.。.:・゜☆
2014-10-22 10:26:24 -04:00
marcin-wosinek 5d7763ebf9 docs($templateCache): clarify inline template
Current doc doesn't state required tag location clear enough. It was
[stack overflow|http://stackoverflow.com/a/16125138] where I've found that requirement

Closes #9741
2014-10-22 10:01:58 -04:00
Jackson Ray Hamilton 0a380b4264 docs(guide/bootstrap): close script tag
Closes #9739
2014-10-22 00:44:53 -04:00
Michal Cieplucha 52ceec2229 fix(templateRequest): allow empty html template
allow empty html template and not throw error

Closes #9581
2014-10-21 06:31:25 -07:00
Jason Bedard 38d12de661 refactor(*): removing unused vars
Close #9710
2014-10-21 14:22:24 +02:00
Dwayne Crooks 89c57a8761 docs(ngModel.NgModelController): remove extra 'to'
Closes #9702
2014-10-20 21:34:04 +01:00
Caitlin Potter 2240c113f5 chore(tests): implement e2e test harness outside of docs app
Included:

- A sample test fixture
- A sample test
- Server middleware to serve the E2E harness
- Convenient test helpers to simplify loading the right fixture

Closes #9557
Closes #9527
2014-10-20 11:26:09 -04:00
Caitlin Potter fc56c9b3cc chore(package.json): add cheerio dependency
It's tinier than jsdom, and seems to work okay for generating the fixtures.
2014-10-20 11:24:35 -04:00
Peter Bacon Darwin 22b817ec11 chore(docs): fix path to docs-app e2e tests
These tests are not generated by dgeni and so needed to have the paths
to the pages updated manually.

Closes #9680
2014-10-20 10:42:34 -04:00
Peter Bacon Darwin 762713e660 chore(docs): configure the base path for protractor tests in examples
Updates to dgeni-packages 0.10.5 which supports this configurability.
Change the dgeni config and protractor config so that we can have protractor
tests that are hosted outside the build/docs folder.

Provides support for https://github.com/angular/angular.js/pull/9557#discussion_r18977324
2014-10-20 10:42:25 -04:00
Peter Bacon Darwin d97b427656 docs(error/$injector/modulerr): add info about not monkey-patching ng
Closes #7709
Closes #9692
2014-10-20 14:20:46 +01:00
Po Chen 303610c743 docs(guide/location): fix a typo
Closes #9693
2014-10-20 13:20:05 +01:00
Bastien Caudan 1025f6ebf4 fix(ngMock): $httpBackend should match data containing Date objects correctly
If a response or expectation contained a date object then `$httpBackend.expect`
was not matching correctly.

This commit encodes then decodes the object being matched to ensure consistency.

Closes #5127
2014-10-20 13:06:44 +01:00
lguyot a7f886e6c8 docs(tutorial/step-11): remove excess words
Closes #9690
2014-10-20 12:11:03 +01:00
Augustas b8f3ad4b21 docs(tutorial/step-7) - correct a url
Closes #9688
2014-10-20 11:43:58 +01:00
Henry Zhu 483ce91da2 style(*): add disallowSpacesInsideParentheses rule to jscs
Closes #9685
2014-10-20 10:39:46 +01:00
Henry Zhu 31ec9f14ef style(*): add validateParameterSeparator rule to jscs
Closes #9685
2014-10-20 10:39:37 +01:00
Henry Zhu 8b921617e9 style(*): add disallowTrailingComma rule for objects and arrays
Closes #9685
2014-10-20 10:39:32 +01:00
Henry Zhu e4ce0ddda5 chore(jscs): alphabetize jscs rules 2014-10-20 10:39:15 +01:00
Peter Bacon Darwin e1c0a8e642 docs(guide/introduction): remove ambiguous "code-behind" jargon
This commit tries to remove the jargon and explain in plain English what
it means to add "code-behind" via a directive.

Closes #9684
2014-10-20 10:32:06 +01:00
Rouven Weßling ba9d0738cd refact(Angular.js) remove unused functions
This removes the functions size() and isLeafNode().

Closes #9682
2014-10-20 10:21:57 +01:00
Peter Bacon Darwin 998c61cbe0 chore(docs): copy the correct docs assets
The docs images had been duplicated in

```
docs/img/
```

and

```
docs/app/assets/img
```

This commit fixes the gulp build to use the doc images from `docs/img` and
removes the duplocates from `docs/app/assets/img`

Closes #9655
2014-10-19 11:56:58 +01:00
Brian Ford 35e2a068ad docs(guide/forms): add animated gifs 2014-10-19 11:25:35 +01:00
Brian Ford 146440c5b2 chore(grunt): do not rewrite gif urls 2014-10-19 11:25:35 +01:00
Dmytro Yarmak bf9e7bfb5a fix($rootScope.$on) check listener existense while deregistering
Check that listener is still present in $$listeners before decrease
$$listenerCount. It fixes problem with incorrect $$listenerCount after
call deregistering function multiple times.

Closes #9666
Closes #9667
2014-10-19 11:21:56 +01:00
Henry Zhu ed3f799b5c style(*): disallow space after object keys, other rules
add `disallowSpaceAfterObjectKeys` and associated changes.
add `disallowMixedSpacesAndTabs` (no files changed)
add `disallowMultipleLineStrings` (no files changed)

Closes #9679
2014-10-19 11:09:16 +01:00
Peter Bacon Darwin b64b9ea02c docs(guide/directive): clarify directive matching example
Closes #9311
2014-10-19 11:02:02 +01:00
Wédney Yuri 7fa66348cb docs(angular.extend): explanation of deep copy.
It is very common to see many developers confused about it.

Closes #9672
2014-10-19 10:54:32 +01:00
Starojitski e5c53b393b docs(tutorial/step-2): add missing span elements
In Lession 1 template has phone names within `span` element, while in
lession 2 the name is directly within the wrapper `div`

Closes #9670
2014-10-19 09:30:19 +01:00
Juan M. Cuello 24d00cce4f docs(error/dupes): Little fix in explanation text.
Little fix in docs/content/error/ngRepeat/dupes.ngdoc.

Closes #9673
2014-10-18 15:38:55 -04:00
Henry Zhu accb22d644 style(*): enforce spaces after keywords, add spaces
Closes #9677
2014-10-18 10:15:40 -04:00
Michał Gołębiowski 1785251eab refactor($sce): don't depend on $document
The $sce dependency on $document was added in 64241a5 because it was thought
it's not possible to easiy use the msie variable in this module. This was
changed in 45252c3, though so it's no longer needed to depend on $document.

Closes #9671
2014-10-18 01:48:37 +02:00
Caitlin Potter fe58238e35 chore(.jshintrc): make jshint happy due to 1bd473e 2014-10-17 18:27:26 -04:00
Caitlin Potter 1bd473eb45 fix($templateRequest): ignore JSON Content-Type header and content
Normally, if there is a Content-Type header with the string "application/json", or else the content
looks sort of JSON-y, $http will attempt to deserialize the JSON into an object. $templateRequest
is intended to request markup, and as such should never attempt to parse JSON, regardless of the
headers or shape of the content.

Closes #5756
Closes #9619
2014-10-17 18:07:35 -04:00
Martin Staffa 9078a6ae37 docs(guide/form): shorten line lengths for better readability 2014-10-17 23:23:45 +02:00
Martin Staffa e9dcec0c5d docs(guide/forms, input): add information how to modify built-in validators
Closes #5757
Closes #7798
2014-10-17 23:23:44 +02:00
Martin Staffa d5457bb83b docs(guide/forms): update custom validation section with $validators 2014-10-17 23:23:41 +02:00
Martin Staffa 036871df5e docs(input): clarify input and ngModel behavior 2014-10-17 23:23:39 +02:00
Martin Staffa c06e12276b docs(guide/forms, ngModel): update list of css classes 2014-10-17 23:23:37 +02:00
Martin Staffa 4aaf47534e docs(ngModel): clarify usage of formatters / parsers and $setValidity 2014-10-17 23:23:36 +02:00
Kim Pettersen 502bb648ff chore($locale): add quotation marks to reserved keyword "short"
Although the "short" keyword was pulled as a reserved word from ES5, compilers like
YUICompressor still treat it as reserved and may break.

See 7.6.1.1 of ES5 spec for updated reserved words: http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf

Closes #5320
2014-10-17 14:05:16 -07:00
Shahar Talmi 6cba9c5e7c refactor(ngScenario): remove redundant msie variable 2014-10-17 23:06:55 +03:00
Shahar Talmi 6e5e76e4b1 refactor(Angular): removed redundant test 2014-10-17 22:50:53 +03:00
Shahar Talmi 45252c3a54 fix($sce): use msie instead of $document[0].documentMode
this is important so that people can mock $window without having to add stuff that angular uses internally into it

Closes #9661
2014-10-17 22:35:31 +03:00
Siddhartha c2edef86c5 docs(readme): fixing the &lt; in the benchmarks readme.md page
Closes #9615
2014-10-17 01:01:04 -07:00
Henry Zhu 5b982998c3 chore(jscs) change deprecated rules for jscs todo
Closes #9616
2014-10-17 00:54:19 -07:00
Henry Zhu d7f84e2d7f chore(jscs): update jscs and update deprecated rules
Updated grunt-jscs and deprecated rules:
requireLeftStickedOperators and requireRightStickedOperators.

Fixes #9429
Closes #9616
2014-10-17 00:54:00 -07:00
Joao henriques fddf4bd5fe docs($location) fix $$parse parameter name
Replaced newAbsoluteUrl by url parameter.

Closes #9650
2014-10-17 00:39:06 -07:00
Georgios Kalpakas c2fb4b6986 test($resource): enhance test-case to verify correct behaviour
Previously, the test-case verified that calling `toJson()`, would remove
the `$promise` and `$resolved`, but not that other `$`-prefixed properties
would not be removed.

Closes #9628
2014-10-17 00:30:37 -07:00
Karol Wypchło 8b2f1a47b5 fix(loader): fix double spaces
Fix double spaces in return statement. Double spaces between return and
returned value brake minification process of some minifiers (bug found on JSMin
https://github.com/mrclay/jsmin-php).

Closes #9630
2014-10-17 00:28:48 -07:00
Brian Ford fb1b202f38 docs(guide/forms): improve readability and formatting 2014-10-16 15:17:32 -07:00
Daniel Luz 47e15aa2b4 docs(ngEventDirs): update remarks on behavior
The event directives haven't stopped propagation by default in a long time.
If that behavior is desired, the handler may use the provided `$event` to call:

    $event.stopPropagation();

Closes #9640
2014-10-16 16:44:22 -04:00
Georgios Kalpakas 22da294cbb docs(jqLite): typo: getComputedStyles() -> getComputedStyle() 2014-10-16 20:06:04 +02:00
Michał Gołębiowski 22407a9296 refactor(jqLite): remove a duplicate DOMContentLoaded handler attachment 2014-10-16 12:36:45 +02:00
Andrey Taritsyn fc70a98be4 refactor($compile): simplify regular expressions
Closes #9637
2014-10-15 21:27:11 -07:00
Alex Norton 49d03a5b2e docs(guide/directive): fix typo 2014-10-15 15:05:02 -07:00
Tobias Bosch ed85ec4d70 docs(input): ngModel uses priority 1 2014-10-15 09:18:49 -07:00
Jeremiah Hoyet 6502ab0977 doc(angular.forEach): note difference from ES262's Array.prototype.forEach
Since Angular's forEach is not a strict polyfill, and takes different paths depending on the type
of collection it is dealing with, it does not throw a TypeError when converting the obj with
ToObject(), as this operation does not need to be performed.

This difference is documented nicely here.

Closes #9142
2014-10-14 10:55:31 -04:00
Julie Ralph 02aa4f4b85 fix(testability): escape regex chars in findBindings if using exactMatch
Move the function to escape regexps to Angular.js, fix the link, and use it in
the $$testability service.

Closes #9595
Closes #9600
2014-10-14 10:42:13 +01:00
Ciro Nunes 69bf2f02d0 docs(ngModel): fix anchor text
Closes #9604
2014-10-14 10:12:25 +01:00
Georgios Kalpakas fd375c5d46 chore(CHANGELOG): fix name of jqLiteDocumentLoaded function
The newly added private jqLiteDocumentLoaded function is referred to as
jqDocumentComplete (due to a wrong commit message).

Closes #9610
2014-10-14 09:48:14 +01:00
Afshin Mokhtari b8b63df664 docs(CONTRIBUTING): prototypical -> prototypal
Closes #9608
2014-10-14 09:45:37 +01:00
HeberLZ 28661d1a8c fix($parse): support dirty-checking objects with null prototype
Objects created with `Object.create(null);` do not have a `valueOf` method unless
they supply one themselves. To accomodate these, Object.prototype.valueOf is
used when the type of the value is "object", and the `valueOf` property is not
a function (E.G. it's not in the object at all).

Closes #9568
2014-10-13 23:09:19 -04:00
Michał Gołębiowski 7f4d24c6fa chore(npm): update npm dependencies
Some of previous dependencies versions (e.g. Karma) didn't work with
Node 0.11.14, see:
https://github.com/karma-runner/karma/pull/1182

The only dependencies not updated in this commit are:

1. grunt-jscs-checker: its
rules have changed a lot so it will require more work to use the newer
version
2. gulp-jshint: the update breaks docs linting, it requires investigation

Closes #9571
2014-10-13 15:55:20 -07:00
1014 changed files with 15293 additions and 9827 deletions
-3
View File
@@ -10,9 +10,6 @@ end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[src/ngLocale/**]
insert_final_newline = false
[dropdown-toggle.js]
trim_trailing_whitespace = false
insert_final_newline = false
+1
View File
@@ -13,6 +13,7 @@ angular.js.tmproj
bower_components/
angular.xcodeproj
.idea
*.iml
.agignore
.lvimrc
libpeerconnection.log
+37 -2
View File
@@ -1,6 +1,41 @@
{
"excludeFiles": ["src/ngLocale/**"],
"disallowKeywords": ["with"],
"disallowMixedSpacesAndTabs": true,
"disallowMultipleLineStrings": true,
"disallowNewlineBeforeBlockStatements": true,
"disallowSpaceAfterObjectKeys": true,
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
"disallowSpaceBeforeBinaryOperators": [","],
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
"disallowSpacesInAnonymousFunctionExpression": {
"beforeOpeningRoundBrace": true
},
"disallowSpacesInFunctionDeclaration": {
"beforeOpeningRoundBrace": true
},
"disallowSpacesInNamedFunctionExpression": {
"beforeOpeningRoundBrace": true
},
"disallowSpacesInsideArrayBrackets": true,
"disallowSpacesInsideParentheses": true,
"disallowTrailingComma": true,
"disallowTrailingWhitespace": true,
"requireRightStickedOperators": ["!"],
"requireLeftStickedOperators": [","]
"requireCommaBeforeLineBreak": true,
"requireLineFeedAtFileEnd": true,
"requireSpaceAfterBinaryOperators": ["?", ":", "+", "-", "/", "*", "%", "==", "===", "!=", "!==", ">", ">=", "<", "<=", "&&", "||"],
"requireSpaceBeforeBinaryOperators": ["?", ":", "+", "-", "/", "*", "%", "==", "===", "!=", "!==", ">", ">=", "<", "<=", "&&", "||"],
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
"requireSpaceBeforeBlockStatements": true,
"requireSpacesInConditionalExpression": {
"afterTest": true,
"beforeConsequent": true,
"afterConsequent": true,
"beforeAlternate": true
},
"requireSpacesInFunction": {
"beforeOpeningCurlyBrace": true
},
"validateLineBreaks": "LF",
"validateParameterSeparator": ", "
}
-4
View File
@@ -5,13 +5,9 @@
{
"requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"disallowRightStickedOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
"disallowImplicitTypeConversion": ["string"],
"disallowMultipleLineBreaks": true,
"disallowKeywordsOnNewLine": ["else"],
"requireLineFeedAtFileEnd": true,
"validateJSDoc": {
"checkParamNames": true,
"requireParamTypes": true
+294 -1
View File
@@ -1,3 +1,294 @@
<a name="1.3.4"></a>
# 1.3.4 highfalutin-petroglyph (2014-11-24)
## Bug Fixes
- **$browser:** allow chaining url() calls in setter mode
([764fa869](https://github.com/angular/angular.js/commit/764fa869dd8809d494924c23f30ddaa4cac84249),
[#10157](https://github.com/angular/angular.js/issues/10157))
- **$http:** return empty headers, ignore properties in Object prototype
([637c020f](https://github.com/angular/angular.js/commit/637c020f828a7ceeaacf83bb1a54ed3092e6c273),
[#7779](https://github.com/angular/angular.js/issues/7779), [#10113](https://github.com/angular/angular.js/issues/10113), [#10091](https://github.com/angular/angular.js/issues/10091))
- **$locale:** Allow currency filter to fall back to maxFrac from locale
([6dbd606a](https://github.com/angular/angular.js/commit/6dbd606ad7b708d5886c0e7ffee20ae8f8719711),
[#10179](https://github.com/angular/angular.js/issues/10179))
- **$location:** allow empty string URLs to reset path, search, and hash
([7812dfce](https://github.com/angular/angular.js/commit/7812dfcee8ab98cbf38261f9948d9541656bf554),
[#10063](https://github.com/angular/angular.js/issues/10063), [#10064](https://github.com/angular/angular.js/issues/10064))
- **$route:** fix redirection with optional/eager params
([891acf4c](https://github.com/angular/angular.js/commit/891acf4c201823fd2c925ee321c70d06737d5944),
[#9819](https://github.com/angular/angular.js/issues/9819), [#9827](https://github.com/angular/angular.js/issues/9827))
- **Angular:** properly get node name for svg element wrapper
([09a98323](https://github.com/angular/angular.js/commit/09a9832358960c98392c9df1a9fd9592f59bc844),
[#10078](https://github.com/angular/angular.js/issues/10078), [#10172](https://github.com/angular/angular.js/issues/10172))
- **NgModelController:** typo $rawModelValue -> $$rawModelValue
([4f4ff5f3](https://github.com/angular/angular.js/commit/4f4ff5f31b82c6f7be409ea4edbad4c2913ac1f1))
- **input:**
- set ngTrueValue on required checkbox
([8692f87a](https://github.com/angular/angular.js/commit/8692f87a4689fa0dd3640f4dcab5c6b6f960489b),
[#5164](https://github.com/angular/angular.js/issues/5164))
- call $setTouched in blur asynchronously if necessary
([eab27187](https://github.com/angular/angular.js/commit/eab271876cb87c1f5f6c6f29e814fb8fecad87ff),
[#8762](https://github.com/angular/angular.js/issues/8762), [#9808](https://github.com/angular/angular.js/issues/9808), [#10014](https://github.com/angular/angular.js/issues/10014))
- **input[date]:** do not use `$isEmpty` to check the model validity
([40406e2f](https://github.com/angular/angular.js/commit/40406e2f22713efbd37ef3eff408339727cb62d9))
- **linky:** encode double quotes when serializing email addresses
([8ee8ffeb](https://github.com/angular/angular.js/commit/8ee8ffeba0a5a133fa792745c1019d294ecfcef3),
[#8945](https://github.com/angular/angular.js/issues/8945), [#8964](https://github.com/angular/angular.js/issues/8964), [#5946](https://github.com/angular/angular.js/issues/5946), [#10090](https://github.com/angular/angular.js/issues/10090), [#9256](https://github.com/angular/angular.js/issues/9256))
- **ngMaxlength:** ignore maxlength when not set to a non-negative integer
([92f87b11](https://github.com/angular/angular.js/commit/92f87b114242b01876e1dc5c6fddd061352ecb2c),
[#9874](https://github.com/angular/angular.js/issues/9874))
- **ngModel:** don't run parsers when executing $validate
([e3764e30](https://github.com/angular/angular.js/commit/e3764e30a301ec6136c8e6b5493d39feb3cd1ecc))
- **ngModelOptions:** preserve context of getter/setters
([bb4d3b73](https://github.com/angular/angular.js/commit/bb4d3b73a1ccf3dee55b0c25baf031bae5cbb676),
[#9394](https://github.com/angular/angular.js/issues/9394), [#9865](https://github.com/angular/angular.js/issues/9865))
## Features
- **ngMaxlength:** add support for disabling max length limit
([5c1fdff6](https://github.com/angular/angular.js/commit/5c1fdff691b9367d73f72f6a0298cb6a6e259f35),
[#9995](https://github.com/angular/angular.js/issues/9995))
- **ngModelController:** add $setDirty method
([e8941c0f](https://github.com/angular/angular.js/commit/e8941c0fe5217d2e705bad8253dc0162aff4c709),
[#10038](https://github.com/angular/angular.js/issues/10038), [#10049](https://github.com/angular/angular.js/issues/10049))
- **ngPluralize:** add support for `count` to be a one-time expression
([2b41a586](https://github.com/angular/angular.js/commit/2b41a5868aee79e3872ad92db66e30959207d98e),
[#10004](https://github.com/angular/angular.js/issues/10004))
## Performance Improvements
- ***:** use Object.create instead of creating temporary constructors
([bf6a79c3](https://github.com/angular/angular.js/commit/bf6a79c3484f474c300b5442ae73483030ef5782),
[#10058](https://github.com/angular/angular.js/issues/10058))
## Breaking Changes
- **ngModelOptions:** due to [bb4d3b73](https://github.com/angular/angular.js/commit/bb4d3b73a1ccf3dee55b0c25baf031bae5cbb676),
previously, ngModel invoked getter/setters in the global context.
For example:
```js
<input ng-model="model.value" ng-model-options="{ getterSetter: true }">
```
would previously invoke `model.value()` in the global context.
Now, ngModel invokes `value` with `model` as the context.
It's unlikely that real apps relied on this behavior. If they did they can use `.bind` to explicilty
bind a getter/getter to the global context, or just reference globals normally without `this`.
<a name="1.2.27"></a>
# 1.2.27 prime-factorization (2014-11-20)
## Bug Fixes
- **$animate:** clear the GCS cache even when no animation is detected
([f619d032](https://github.com/angular/angular.js/commit/f619d032c932752313c646b5295bad8a68ef3871),
[#8813](https://github.com/angular/angular.js/issues/8813))
- **$browser:**
- Cache `location.href` only during page reload phase
([434d7a09](https://github.com/angular/angular.js/commit/434d7a09039151c1e627ac156213905d06b7df10),
[#9235](https://github.com/angular/angular.js/issues/9235), [#9470](https://github.com/angular/angular.js/issues/9470))
- dont use history api when only the hash changes
([a6e6438d](https://github.com/angular/angular.js/commit/a6e6438dae1ed92b29608d0b8830b0a7fbb624ef),
[#9423](https://github.com/angular/angular.js/issues/9423), [#9424](https://github.com/angular/angular.js/issues/9424))
- handle async href on url change in <=IE9
([fe7d9ded](https://github.com/angular/angular.js/commit/fe7d9dedaa5ec3b3f56d9eb9c513cf99e40121ce),
[#9235](https://github.com/angular/angular.js/issues/9235))
- **$http:** add missing shortcut methods and missing docs
([ec4fe1bc](https://github.com/angular/angular.js/commit/ec4fe1bcab6f981103a10f860a3a00122aa78607),
[#9180](https://github.com/angular/angular.js/issues/9180), [#9321](https://github.com/angular/angular.js/issues/9321))
- **$location:**
- revert erroneous logic and backport refactorings from master
([1ee9b4ef](https://github.com/angular/angular.js/commit/1ee9b4ef5e4a795061d3aa19adefdeb7e0209eeb),
[#8492](https://github.com/angular/angular.js/issues/8492))
- allow 0 in path() and hash()
([f807d7ab](https://github.com/angular/angular.js/commit/f807d7ab4ebd18899154528ea9ed50d5bc25c57a))
- **$parse:** add quick check for Function constructor in fast path
([756640f5](https://github.com/angular/angular.js/commit/756640f5aa8f3fd0084bff50534e23976a6fff00))
- **$parse, events:** prevent accidental misuse of properties on $event
([4d0614fd](https://github.com/angular/angular.js/commit/4d0614fd0da12c5783dfb4956c330edac87e62fe),
[#9969](https://github.com/angular/angular.js/issues/9969))
- **ngMock:** $httpBackend should match data containing Date objects correctly
([1426b029](https://github.com/angular/angular.js/commit/1426b02980badfd322eb960d71bfb1a14d657847),
[#5127](https://github.com/angular/angular.js/issues/5127))
- **orderBy:** sort by identity if no predicate is given
([45b896a1](https://github.com/angular/angular.js/commit/45b896a16abbcbfcdfb9a95c2d10c76a805b57cc),
[#5847](https://github.com/angular/angular.js/issues/5847), [#4579](https://github.com/angular/angular.js/issues/4579), [#9403](https://github.com/angular/angular.js/issues/9403))
- **select:** ensure the label attribute is updated in Internet Explorer
([16833d0f](https://github.com/angular/angular.js/commit/16833d0fb6585117e9978d1accc3ade83e22e797),
[#9621](https://github.com/angular/angular.js/issues/9621), [#10042](https://github.com/angular/angular.js/issues/10042))
## Performance Improvements
- **orderBy:** copy array with slice instead of for loop
([409bcb38](https://github.com/angular/angular.js/commit/409bcb3810a1622178268f7ff7f4130887a1a3dc),
[#9942](https://github.com/angular/angular.js/issues/9942))
<a name="1.3.3"></a>
# 1.3.3 undersea-arithmetic (2014-11-17)
## Bug Fixes
- **$http:** don't parse single space responses as JSON
([6f19a6fd](https://github.com/angular/angular.js/commit/6f19a6fd33ab72d3908e3418fba47ee8e1598fa6),
[#9907](https://github.com/angular/angular.js/issues/9907))
- **minErr:** stringify non-JSON compatible objects in error messages
([cf43ccdf](https://github.com/angular/angular.js/commit/cf43ccdf9b8665a2fd5d6aa52f80cb2d7c9bb7e2),
[#10085](https://github.com/angular/angular.js/issues/10085))
- **$rootScope:** handle cyclic references in scopes when creating error messages
([e80053d9](https://github.com/angular/angular.js/commit/e80053d91fd7c722e092a23d326384de2e552eb6),
[#10085](https://github.com/angular/angular.js/issues/10085))
- **ngRepeat:** support cyclic object references in error messages
([fa12c3c8](https://github.com/angular/angular.js/commit/fa12c3c86af7965d1b9d9a5dd3434755e9e04635),
[#9838](https://github.com/angular/angular.js/issues/9838), [#10065](https://github.com/angular/angular.js/issues/10065), [#10085](https://github.com/angular/angular.js/issues/10085))
- **ngMock:** call $interval callbacks even when invokeApply is false
([d81ff888](https://github.com/angular/angular.js/commit/d81ff8885b77f70c6417d7be3124d86d07447375),
[#10032](https://github.com/angular/angular.js/issues/10032))
- **ngPattern:** match behaviour of native HTML pattern attribute
([85eb9660](https://github.com/angular/angular.js/commit/85eb9660ef67c24d5104a6a1921bedad0bd1b57e),
[#9881](https://github.com/angular/angular.js/issues/9881), [#9888](https://github.com/angular/angular.js/issues/9888))
- **select:** ensure the label attribute is updated in Internet Explorer
([6604c236](https://github.com/angular/angular.js/commit/6604c2361427fba8c43a39dc2e92197390dfbdbe),
[#9621](https://github.com/angular/angular.js/issues/9621), [#10042](https://github.com/angular/angular.js/issues/10042))
## Features
- **$location:** allow to location to be changed during $locationChangeStart
([a9352c19](https://github.com/angular/angular.js/commit/a9352c19ce33f0393d6581547c7ea8dfc2a8b78f),
[#9607](https://github.com/angular/angular.js/issues/9607), [#9678](https://github.com/angular/angular.js/issues/9678))
- **$routeProvider:** allow setting caseInsensitiveMatch on the provider
([0db573b7](https://github.com/angular/angular.js/commit/0db573b7493f76abd94ff65ce660017d617e865b),
[#6477](https://github.com/angular/angular.js/issues/6477), [#9873](https://github.com/angular/angular.js/issues/9873))
## Performance Improvements
- **orderBy:** copy array with slice instead of for loop
([8eabc546](https://github.com/angular/angular.js/commit/8eabc5463c795d87f37e5a9eacbbb14435024061),
[#9942](https://github.com/angular/angular.js/issues/9942))
## Breaking Changes
- **$parse:** due to [fbad2805](https://github.com/angular/angular.js/commit/fbad2805703569058a4a860747b0e2d8aee36bdf),
you can't use characters that have special meaning in AngularJS expressions (ex.: `.` or `-`)
as part of filter's name. Before this commit custom filters could contain special characters
(like a dot) in their name but this wasn't intentional.
<a name="1.3.2"></a>
# 1.3.2 cardiovasculatory-magnification (2014-11-07)
## Bug Fixes
- **$compile:** do not rebind parent bound transclude functions
([841c0907](https://github.com/angular/angular.js/commit/841c0907556f525dbc4223609d808319fe0dd7e2),
[#9413](https://github.com/angular/angular.js/issues/9413))
- **$parse:**
- stateful interceptors override an `undefined` expression
([ed99821e](https://github.com/angular/angular.js/commit/ed99821e4dc621864f7e2d9a6b5305fca27fb7fa),
[#9821](https://github.com/angular/angular.js/issues/9821), [#9825](https://github.com/angular/angular.js/issues/9825))
- add quick check for Function constructor in fast path
([e676d642](https://github.com/angular/angular.js/commit/e676d642f5feb8d3ba88944634afb479ba525c36))
- **$parse, events:** prevent accidental misuse of properties on $event
([e057a9aa](https://github.com/angular/angular.js/commit/e057a9aa398ead209bd6bbf76e22d2d5562904fb))
- **ngRoute:** allow proto inherited properties in route params object
([b4770582](https://github.com/angular/angular.js/commit/b4770582f84f26c8ff7f2320a36a6b0ceff6e6cc),
[#8181](https://github.com/angular/angular.js/issues/8181), [#9731](https://github.com/angular/angular.js/issues/9731))
- **select:** use strict comparison for isSelected with selectAs
([9e305948](https://github.com/angular/angular.js/commit/9e305948e4965fb86b0c79985dc6e8c59a9c66af),
[#9639](https://github.com/angular/angular.js/issues/9639), [#9949](https://github.com/angular/angular.js/issues/9949))
## Features
- **ngAria:** announce ngMessages with aria-live
([187e4318](https://github.com/angular/angular.js/commit/187e43185dfb1bce6a318d95958c73cfb789d33c),
[#9834](https://github.com/angular/angular.js/issues/9834))
- **ngMock:** decorator that adds Scope#$countChildScopes and Scope#$countWatchers
([74981c9f](https://github.com/angular/angular.js/commit/74981c9f208b3617cbf00beafd61138d25c5d546),
[#9926](https://github.com/angular/angular.js/issues/9926), [#9871](https://github.com/angular/angular.js/issues/9871))
## Security Note
This release also contains security fixes for expression sandbox bypasses.
These issues affect only applications with known server-side XSS holes that are also using [CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP) to secure their client-side code. If your application falls into this rare category, we recommend updating your version of Angular.
We'd like to thank security researches [Sebastian Lekies](https://twitter.com/sebastianlekies), [Jann Horn](http://thejh.net/), and [Gábor Molnár](https://twitter.com/molnar_g) for reporting these issues to us.
We also added a documentation page focused on security, which contains some of the best practices, DOs and DON'Ts. Please check out [https://docs.angularjs.org/guide/security](https://docs.angularjs.org/guide/security).
<a name="1.3.1"></a>
# 1.3.1 spectral-lobster (2014-10-31)
## Bug Fixes
- **$compile:** returning null when an optional controller is not found
([2cd5b4ec](https://github.com/angular/angular.js/commit/2cd5b4ec4409a818ccd33a6fbdeb99a3443a1809),
[#9404](https://github.com/angular/angular.js/issues/9404), [#9392](https://github.com/angular/angular.js/issues/9392))
- **$observe:** check if the attribute is undefined
([531a8de7](https://github.com/angular/angular.js/commit/531a8de72c439d8ddd064874bf364c00cedabb11),
[#9707](https://github.com/angular/angular.js/issues/9707), [#9720](https://github.com/angular/angular.js/issues/9720))
- **$parse:** support dirty-checking objects with null prototype
([28661d1a](https://github.com/angular/angular.js/commit/28661d1a8cc3a8454bad7ae531e027b1256476c9),
[#9568](https://github.com/angular/angular.js/issues/9568))
- **$sce:** use msie instead of $document[0].documentMode
([45252c3a](https://github.com/angular/angular.js/commit/45252c3a545336a0bac93be6ee28cde6afaa3cb4),
[#9661](https://github.com/angular/angular.js/issues/9661))
- **$templateRequest:** ignore JSON Content-Type header and content
([1bd473eb](https://github.com/angular/angular.js/commit/1bd473eb4587900086e0b6b308dcf1dcfe9760d9),
[#5756](https://github.com/angular/angular.js/issues/5756), [#9619](https://github.com/angular/angular.js/issues/9619))
- **i18n:** rename datetimeSymbols to be camelCase
([94f5a285](https://github.com/angular/angular.js/commit/94f5a285bfcf04d800afc462a7a37a3469d77f1a))
- **loader:** fix double spaces
([8b2f1a47](https://github.com/angular/angular.js/commit/8b2f1a47b584ceb98689f48538a2af73cd65dfd8),
[#9630](https://github.com/angular/angular.js/issues/9630))
- **ngMock:** $httpBackend should match data containing Date objects correctly
([1025f6eb](https://github.com/angular/angular.js/commit/1025f6ebf4e5933a12920889be00cd8ac8a106fa),
[#5127](https://github.com/angular/angular.js/issues/5127))
- **ngSanitize:** attribute name: xmlns:href -> xlink:href
([4cccf0f2](https://github.com/angular/angular.js/commit/4cccf0f2a89b002d63cb443e1e7b15f76dcef425),
[#9769](https://github.com/angular/angular.js/issues/9769))
- **select:** assign result of track exp to element value
([4b4098bf](https://github.com/angular/angular.js/commit/4b4098bfcae64f69c70a22393de1f3d9a0d3dc46),
[#9718](https://github.com/angular/angular.js/issues/9718), [#9592](https://github.com/angular/angular.js/issues/9592))
- **templateRequest:** allow empty html template
([52ceec22](https://github.com/angular/angular.js/commit/52ceec2229dc132b76da4e022c91474344f2d906),
[#9581](https://github.com/angular/angular.js/issues/9581))
- **testability:** escape regex chars in `findBindings` if using `exactMatch`
([02aa4f4b](https://github.com/angular/angular.js/commit/02aa4f4b85ee15922a1f2de8ba78f562c18518d0),
[#9595](https://github.com/angular/angular.js/issues/9595), [#9600](https://github.com/angular/angular.js/issues/9600))
## Features
- **$compile:** allow $watchCollection to be used in bi-directional bindings
([40bbc981](https://github.com/angular/angular.js/commit/40bbc9817845bf75581daee5d0ec30980affb0f5),
[#9725](https://github.com/angular/angular.js/issues/9725))
- **ngSanitize:** accept SVG elements and attributes
([a54b25d7](https://github.com/angular/angular.js/commit/a54b25d77999a85701dfc5396fef78e586a99667),
[#9578](https://github.com/angular/angular.js/issues/9578), [#9751](https://github.com/angular/angular.js/issues/9751))
<a name="1.3.0"></a>
# 1.3.0 superluminal-nudge (2014-10-13)
@@ -54,7 +345,7 @@
- **currencyFilter:** add fractionSize as optional parameter
([20685ffe](https://github.com/angular/angular.js/commit/20685ffe11036d4d604d13f0d792ca46497af4a1),
[#3642](https://github.com/angular/angular.js/issues/3642), [#3461](https://github.com/angular/angular.js/issues/3461), [#3642](https://github.com/angular/angular.js/issues/3642), [#7922](https://github.com/angular/angular.js/issues/7922))
- **jqLite:** add private jqDocumentComplete function
- **jqLite:** add private jqLiteDocumentLoaded function
([0dd316ef](https://github.com/angular/angular.js/commit/0dd316efea209e5e5de3e456b4e6562f011a1294))
@@ -1452,6 +1743,8 @@ Closes #8230
- **jQuery:** due to [9e7cb3c3](https://github.com/angular/angular.js/commit/9e7cb3c37543008e6236bb5a2c4536df2e1e43a9),
Angular no longer supports jQuery versions below 2.1.1.
- **$q:** due to [23bc92b1](https://github.com/angular/angular.js/commit/23bc92b17df882a907fb326320f0622717fefe7b),
Promises methods are no longer enumerated when using for-loops with `hasOwnProperty` check. E.g. `angular.extends`
<a name="1.2.22"></a>
+1 -1
View File
@@ -173,7 +173,7 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
* **Do not use namespaces**: Instead, wrap the entire angular code base in an anonymous closure and
export our API explicitly rather than implicitly.
* Wrap all code at **100 characters**.
* Instead of complex inheritance hierarchies, we **prefer simple objects**. We use prototypical
* Instead of complex inheritance hierarchies, we **prefer simple objects**. We use prototypal
inheritance only when absolutely necessary.
* We **love functions and closures** and, whenever possible, prefer them over objects.
* To write concise code that can be better minified, we **use aliases internally** that map to the
+15 -10
View File
@@ -4,6 +4,7 @@ var files = require('./angularFiles').files;
var util = require('./lib/grunt/utils.js');
var versionInfo = require('./lib/versions/version-info');
var path = require('path');
var e2e = require('./test/e2e/tools');
module.exports = function(grunt) {
//grunt plugins
@@ -46,12 +47,14 @@ module.exports = function(grunt) {
base: '.',
keepalive: true,
middleware: function(connect, options){
var base = Array.isArray(options.base) ? options.base[options.base.length - 1] : options.base;
return [
util.conditionalCsp(),
util.rewrite(),
e2e.middleware(),
connect.favicon('images/favicon.ico'),
connect.static(options.base),
connect.directory(options.base)
connect.static(base),
connect.directory(base)
];
}
}
@@ -64,6 +67,7 @@ module.exports = function(grunt) {
port: 8000,
hostname: '0.0.0.0',
middleware: function(connect, options){
var base = Array.isArray(options.base) ? options.base[options.base.length - 1] : options.base;
return [
function(req, resp, next) {
// cache get requests to speed up tests on travis
@@ -74,8 +78,9 @@ module.exports = function(grunt) {
next();
},
util.conditionalCsp(),
e2e.middleware(),
connect.favicon('images/favicon.ico'),
connect.static(options.base)
connect.static(base)
];
}
}
@@ -287,14 +292,14 @@ module.exports = function(grunt) {
}
},
shell:{
"promises-aplus-tests":{
options:{
//stdout:true,
stderr:true,
failOnError:true
shell: {
"promises-aplus-tests": {
options: {
stdout: false,
stderr: true,
failOnError: true
},
command:path.normalize('./node_modules/.bin/promises-aplus-tests tmp/promises-aplus-adapter++.js')
command: path.normalize('./node_modules/.bin/promises-aplus-tests tmp/promises-aplus-adapter++.js')
}
},
+2
View File
@@ -5,6 +5,7 @@ var angularFiles = {
'src/minErr.js',
'src/Angular.js',
'src/loader.js',
'src/stringify.js',
'src/AngularPublic.js',
'src/jqLite.js',
'src/apis.js',
@@ -73,6 +74,7 @@ var angularFiles = {
],
'angularLoader': [
'stringify.js',
'src/minErr.js',
'src/loader.js'
],
+1 -1
View File
@@ -3,4 +3,4 @@ found at: https://github.com/angular/benchpress/blob/master/README.md.
In this project, there is a configured grunt task for building the benchmarks,
`grunt bp_build`, which places the runnable benchmarks in "/build/benchmarks/".
The existing `grunt webserver` task can be used to serve the built benchmarks at `localhost:8000/build/benchmarks/&lt;benchmark-name&gt;`
The existing `grunt webserver` task can be used to serve the built benchmarks at `localhost:8000/build/benchmarks/<benchmark-name>`
+2 -1
View File
@@ -71,7 +71,8 @@ app.controller('DataController', function($scope, $rootScope) {
date2: new Date(Math.random()*Date.now()),
func: function(){ return star; },
obj: data[i-1],
keys: data[i-1] && (data[i-1].keys || Object.keys(data[i-1]))
keys: data[i-1] && (data[i-1].keys || Object.keys(data[i-1])),
constructor: data[i-1]
});
}
@@ -16,6 +16,12 @@
<label for="complexPath">Complex Paths</label>
</li>
<li>
<input type="radio" ng-model="expressionType" value="constructorPath" id="constructorPath">
<label for="constructorPath">Constructor Paths</label>
($parse special cases "constructor" for security)
</li>
<li>
<input type="radio" ng-model="expressionType" value="fieldAccess" id="fieldAccess">
<label for="fieldAccess">Field Accessors</label>
@@ -77,6 +83,17 @@
<span bm-pe-watch="row.keys"></span>
</li>
<li ng-switch-when="constructorPath" ng-repeat="(rowIdx, row) in ::data">
<span bm-pe-watch="row.index"></span>
<span bm-pe-watch="row.constructor.index"></span>
<span bm-pe-watch="row.constructor.index"></span>
<span bm-pe-watch="row.constructor.index"></span>
<span bm-pe-watch="row.constructor.constructor.index"></span>
<span bm-pe-watch="row.constructor.constructor.index"></span>
<span bm-pe-watch="row.constructor.constructor.constructor.index"></span>
<span bm-pe-watch="row.constructor.constructor.constructor.index"></span>
</li>
<li ng-switch-when="complexPath" ng-repeat="(rowIdx, row) in ::data">
<span bm-pe-watch="row.index"></span>
<span bm-pe-watch="row.num0"></span>
+4
View File
@@ -128,6 +128,10 @@ h1,h2,h3,h4,h5,h6 {
margin-bottom:5px;
}
.nav-index-group .nav-index-listing.current a {
color: #B52E31;
}
.nav-breadcrumb {
margin:4px 0;
padding:0;
Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 KiB

+5 -5
View File
@@ -5,15 +5,15 @@ describe("doc.angularjs.org", function() {
describe("API pages", function() {
it("should display links to code on GitHub", function() {
browser.get('index-debug.html#!/api/ng/service/$http');
browser.get('build/docs/index.html#!/api/ng/service/$http');
expect(element(by.css('.improve-docs')).getAttribute('href')).toMatch(/https?:\/\/github\.com\/angular\/angular\.js\/edit\/.+\/src\/ng\/http\.js/);
browser.get('index-debug.html#!/api/ng/service/$http');
browser.get('build/docs/index.html#!/api/ng/service/$http');
expect(element(by.css('.view-source')).getAttribute('href')).toMatch(/https?:\/\/github\.com\/angular\/angular\.js\/tree\/.+\/src\/ng\/http\.js#L\d+/);
});
it('should change the page content when clicking a link to a service', function () {
browser.get('');
browser.get('build/docs/index.html');
var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
ngBindLink.click();
@@ -24,7 +24,7 @@ describe("doc.angularjs.org", function() {
it('should show the functioning input directive example', function () {
browser.get('index-debug.html#!/api/ng/directive/input');
browser.get('build/docs/index.html#!/api/ng/directive/input');
// Ensure that the page is loaded before trying to switch frames.
browser.waitForAngular();
@@ -39,7 +39,7 @@ describe("doc.angularjs.org", function() {
});
it("should trim indentation from code blocks", function() {
browser.get('index-debug.html#!/api/ng/type/$rootScope.Scope');
browser.get('build/docs/index.html#!/api/ng/type/$rootScope.Scope');
var codeBlocks = element.all(by.css('pre > code.lang-js'));
codeBlocks.each(function(codeBlock) {
@@ -3,7 +3,7 @@
describe("provider pages", function() {
it("should show the related service", function() {
browser.get('index-debug.html#!/api/ng/provider/$compileProvider');
browser.get('build/docs/index.html#!/api/ng/provider/$compileProvider');
var serviceLink = element.all(by.css('ol.api-profile-header-structure li a')).first();
expect(serviceLink.getText()).toEqual('- $compile');
expect(serviceLink.getAttribute('href')).toMatch(/api\/ng\/service\/\$compile/);
@@ -3,19 +3,19 @@
describe("service pages", function() {
it("should show the related provider if there is one", function() {
browser.get('index-debug.html#!/api/ng/service/$compile');
browser.get('build/docs/index.html#!/api/ng/service/$compile');
var providerLink = element.all(by.css('ol.api-profile-header-structure li a')).first();
expect(providerLink.getText()).toEqual('- $compileProvider');
expect(providerLink.getAttribute('href')).toMatch(/api\/ng\/provider\/\$compileProvider/);
browser.get('index-debug.html#!/api/ng/service/$q');
browser.get('build/docs/index.html#!/api/ng/service/$q');
providerLink = element.all(by.css('ol.api-profile-header-structure li a')).first();
expect(providerLink.getText()).not.toEqual('- $qProvider');
expect(providerLink.getAttribute('href')).not.toMatch(/api\/ng\/provider\/\$compileProvider/);
});
it("should show parameter defaults", function() {
browser.get('index-debug.html#!/api/ng/service/$timeout');
browser.get('build/docs/index.html#!/api/ng/service/$timeout');
expect(element.all(by.css('.input-arguments p em')).first().getText()).toContain('(default: 0)');
});
+6 -6
View File
@@ -39,7 +39,7 @@ describe('docs.angularjs.org', function () {
it('should change the page content when clicking a link to a service', function () {
browser.get('');
browser.get('build/docs/index.html');
var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
ngBindLink.click();
@@ -51,33 +51,33 @@ describe('docs.angularjs.org', function () {
it('should be resilient to trailing slashes', function() {
browser.get('index-debug.html#!/api/ng/function/angular.noop/');
browser.get('build/docs/index.html#!/api/ng/function/angular.noop/');
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('angular.noop');
});
it('should be resilient to trailing "index"', function() {
browser.get('index-debug.html#!/api/ng/function/angular.noop/index');
browser.get('build/docs/index.html#!/api/ng/function/angular.noop/index');
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('angular.noop');
});
it('should be resilient to trailing "index/"', function() {
browser.get('index-debug.html#!/api/ng/function/angular.noop/index/');
browser.get('build/docs/index.html#!/api/ng/function/angular.noop/index/');
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('angular.noop');
});
it('should display formatted error messages on error doc pages', function() {
browser.get('index-debug.html#!error/ng/areq?p0=Missing&p1=not%20a%20function,%20got%20undefined');
browser.get('build/docs/index.html#!error/ng/areq?p0=Missing&p1=not%20a%20function,%20got%20undefined');
expect(element(by.css('.minerr-errmsg')).getText()).toEqual("Argument 'Missing' is not a function, got undefined");
});
it("should display an error if the page does not exist", function() {
browser.get('index-debug.html#!/api/does/not/exist');
browser.get('build/docs/index.html#!/api/does/not/exist');
expect(element(by.css('h1')).getText()).toBe('Oops!');
});
+1
View File
@@ -13,6 +13,7 @@ angular.module('DocsController', [])
$scope.navClass = function(navItem) {
return {
active: navItem.href && this.currentPage && this.currentPage.path,
current: this.currentPage && this.currentPage.path === navItem.href,
'nav-index-section': navItem.type === 'section'
};
};
+8 -4
View File
@@ -41,10 +41,14 @@ angular.module('search', [])
$scope.submit = function() {
var result;
for(var i in $scope.results) {
result = $scope.results[i][0];
if(result) {
break;
if ($scope.results.api) {
result = $scope.results.api[0];
} else {
for(var i in $scope.results) {
result = $scope.results[i][0];
if(result) {
break;
}
}
}
if(result) {
+4 -2
View File
@@ -1,7 +1,10 @@
"use strict";
angular.module('versions', [])
.controller('DocsVersionsCtrl', ['$scope', '$location', '$window', 'NG_VERSIONS', function($scope, $location, $window, NG_VERSIONS) {
$scope.docs_version = NG_VERSIONS[0];
$scope.docs_versions = NG_VERSIONS;
for(var i=0, minor = NaN; i < NG_VERSIONS.length; i++) {
var version = NG_VERSIONS[i];
@@ -13,9 +16,8 @@ angular.module('versions', [])
minor = version.minor;
}
$scope.docs_versions = NG_VERSIONS;
$scope.getGroupName = function(v) {
return v.isLatest ? 'Latest' : (v.isStable ? 'Stable' : 'Unstable');
return v.isLatest ? 'Latest' : ('v' + v.major + '.' + v.minor + '.x');
};
$scope.jumpToDocsVersion = function(version) {
+4 -2
View File
@@ -5,8 +5,8 @@ var packagePath = __dirname;
var Package = require('dgeni').Package;
// Create and export a new Dgeni package called dgeni-example. This package depends upon
// the jsdoc and nunjucks packages defined in the dgeni-packages npm module.
// Create and export a new Dgeni package called angularjs. This package depends upon
// the ngdoc,nunjucks and examples packages defined in the dgeni-packages npm module.
module.exports = new Package('angularjs', [
require('dgeni-packages/ngdoc'),
require('dgeni-packages/nunjucks'),
@@ -157,6 +157,8 @@ module.exports = new Package('angularjs', [
jqueryDeployment
];
generateProtractorTestsProcessor.basePath = 'build/docs/';
generateExamplesProcessor.deployments = [
debugDeployment,
defaultDeployment,
+21
View File
@@ -161,6 +161,27 @@ or JavaScript callbacks.
</tr>
</table>
## {@link ngAria ngAria}
Use ngAria to inject common accessibility attributes into directives and improve the experience for users with disabilities.
<div class="alert alert-info">Include the **angular-aria.js** file and set ngAria as a dependency for this to work in your application.</div>
<table class="definition-table spaced">
<tr>
<td>
{@link ngAria#service Services}
</td>
<td>
<p>
The {@link ngAria.$aria $aria} service contains helper methods for applying ARIA attributes to HTML.
<p>
<p>
{@link ngAria.$ariaProvider $ariaProvider} is used for configuring ARIA attributes.
</p>
</td>
</tr>
</table>
## {@link ngResource ngResource}
+10
View File
@@ -0,0 +1,10 @@
@ngdoc error
@name $http:badreq
@fullName Bad Request Configuration
@description
This error occurs when the request configuration parameter passed to the {@link ng.$http `$http`} service is not an object.  `$http` expects a single parameter, the request configuration object, but received a parameter that was not an object.  The error message should provide additional context such as the actual value of the parameter that was received.  If you passed a string parameter, perhaps you meant to call one of the shorthand methods on `$http` such as `$http.get(…)`, etc.
To resolve this error, make sure you pass a valid request configuration object to `$http`.
For more information, see the {@link ng.$http `$http`} service API documentation.
@@ -6,6 +6,22 @@
This error occurs when a module fails to load due to some exception. The error
message above should provide additional context.
### Using `ngRoute`
In AngularJS `1.2.0` and later, `ngRoute` has been moved to its own module.
If you are getting this error after upgrading to `1.2.x` or later, be sure that you've
installed {@link ngRoute `ngRoute`}.
### Monkey-patching Angular's `ng` module
This error can also occur if you have tried to add your own components to the `ng` module.
This has never been supported and from `1.3.0` it will actually trigger this error.
For instance the following code could trigger this error.
```js
angular.module('ng').filter('tel', function (){});
```
Instead create your own module and add it as a dependency to your application's top-level module.
See [#9692](https://github.com/angular/angular.js/issues/9692) and
[#7709](https://github.com/angular/angular.js/issues/7709) for more information
+1 -1
View File
@@ -61,7 +61,7 @@ Attempting to inject one controller into another will also throw an `Unknown pro
```
angular.module('myModule', [])
.controller('MyFirstController', function() { /* ... */ });
.controller('MyFirstController', function() { /* ... */ })
.controller('MySecondController', ['MyFirstController', function(MyFirstController) {
// This controller throws an unknown provider error because
// MyFirstController cannot be injected.
+3 -3
View File
@@ -8,10 +8,10 @@ This error occurs when {@link ng.$location $location} service is configured to u
For example if you configure `$location` service with prefix `'!'`:
```
myApp.config(function($locationProvider) {
$locationProvider.prefix('!');
$locationProvider.hashPrefix('!');
});
```
If you enter the app at url `http:/myapp.com/#/myView` this error will be throw.
If you enter the app at url `http://myapp.com/#/myView` this error will be thrown.
The correct url for this configuration is `http:/myapp.com/#!/myView` (note the `'!'` after `'#'` symbol).
The correct url for this configuration is `http://myapp.com/#!/myView` (note the `'!'` after `'#'` symbol).
+1 -1
View File
@@ -15,7 +15,7 @@ For example the issue can be triggered by this *invalid* code:
To resolve this error either ensure that the items in the collection have unique identity or use the `track by` syntax to specify how to track the association between models and DOM.
To resolve the example above can be resolved by using `track by $index`, which will cause the items to be keyed by their position in the array instead of their value:
The example above can be resolved by using `track by $index`, which will cause the items to be keyed by their position in the array instead of their value:
```
<div ng-repeat="value in [4, 4] track by $index"></div>
+1 -1
View File
@@ -332,7 +332,7 @@ reload to the original link.
Be sure to check all relative links, images, scripts etc. Angular requires you to specify the url
base in the head of your main html file (`<base href="/my-base">`) unless `html5Mode.requireBase` is
set to `false` in the html5Mode definition object passed to `$locationProvider.html5Mode()`. With
that, relative urls will always be resolved to this base url, event if the initial url of the
that, relative urls will always be resolved to this base url, even if the initial url of the
document was different.
There is one exception: Links that only contain a hash fragment (e.g. `<a href="#target">`)
+335 -31
View File
@@ -6,56 +6,360 @@
# Accessibility with ngAria
You can use the `ngAria` module to have common ARIA attributes automatically applied when you
use certain directives. To enable `ngAria`, just require the module into your application and
the code will hook into your ng-show/ng-hide, input, textarea, button, select and
ng-required directives and add the appropriate ARIA states and properties.
The goal of ngAria is to improve Angular's default accessibility by enabling common
[ARIA](http://www.w3.org/TR/wai-aria/) attributes that convey state or semantic information for
assistive technologies used by persons with disabilities.
Currently, the following attributes are implemented:
* aria-hidden
* aria-checked
* aria-disabled
* aria-required
* aria-invalid
* aria-multiline
* aria-valuenow
* aria-valuemin
* aria-valuemax
* tabindex
##Including ngAria
You can disable individual attributes by using the `{@link ngAria.$ariaProvider#config config}` method.
###Example
Using {@link ngAria ngAria} is as simple as requiring the ngAria module in your application. ngAria hooks into
standard AngularJS directives and quietly injects accessibility support into your application
at runtime.
```js
angular.module('myApp', ['ngAria'])...
```
Elements using `ng-model` with `required` or `ngRequired` directives will automatically have
`aria-required` attributes with the proper corresponding values.
###Using ngAria
Most of what ngAria does is only visible "under the hood". To see the module in action, once you've
added it as a dependency, you can test a few things:
* Using your favorite element inspector, look for ngAria attributes in your own code.
* Test using your keyboard to ensure `tabindex` is used correctly.
* Fire up a screen reader such as VoiceOver to listen for ARIA support.
[Helpful screen reader tips.](http://webaim.org/articles/screenreader_testing/)
##Supported directives
Currently, ngAria interfaces with the following directives:
* <a href="#ngmodel">ngModel</a>
* <a href="#ngdisabled">ngDisabled</a>
* <a href="#ngshow">ngShow</a>
* <a href="#nghide">ngHide</a>
* <a href="#ngclick-and-ngdblclick">ngClick</a>
* <a href="#ngclick-and-ngdblclick">ngDblClick</a>
<h2 id="ngmodel">ngModel</h2>
Most of ngAria's heavy lifting happens in the {@link ngModel ngModel}
directive. For elements using ngModel, special attention is paid by ngAria if that element also
has a a role or type of `checkbox`, `radio`, `range` or `textbox`.
For those elements using ngModel, ngAria will dynamically bind and update the following ARIA
attributes (if they have not been explicitly specified by the developer):
* aria-checked
* aria-valuemin
* aria-valuemax
* aria-valuenow
* aria-invalid
* aria-required
###Example
<example module="ngAria_ngModelExample" deps="angular-aria.js">
<file name="index.html">
<style>
[role=checkbox] {
cursor: pointer;
display: inline-block;
}
[role=checkbox] .icon:before {
content: '\2610';
display: inline-block;
font-size: 2em;
line-height: 1;
vertical-align: middle;
speak: none;
}
[role=checkbox].active .icon:before {
content: '\2611';
}
pre {
white-space: pre-wrap;
}
</style>
<div>
<form ng-controller="formsController">
<some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}"
ng-disabled="isDisabled" ng-click="toggleCheckbox()"
aria-label="Custom Checkbox" show-attrs>
<span class="icon" aria-hidden="true"></span>
Custom Checkbox
</some-checkbox>
</form>
</div>
<script>
var app = angular.module('ngAria_ngModelExample', ['ngAria'])
.controller('formsController', function($scope){
$scope.checked = false;
$scope.toggleCheckbox = function(){
$scope.checked = !$scope.checked;
}
})
.directive('someCheckbox', function(){
return {
restrict: 'E',
link: function($scope, $el, $attrs) {
$el.on('keypress', function(event){
event.preventDefault();
if(event.keyCode === 32 || event.keyCode === 13){
$scope.toggleCheckbox();
$scope.$apply();
}
});
}
}
})
.directive('showAttrs', function() {
return function($scope, $el, $attrs) {
var pre = document.createElement('pre');
$el.after(pre);
$scope.$watch(function() {
var $attrs = {};
Array.prototype.slice.call($el[0].attributes, 0).forEach(function(item) {
if (item.name !== 'show-$attrs') {
$attrs[item.name] = item.value;
}
});
return $attrs;
}, function(newAttrs, oldAttrs) {
pre.textContent = JSON.stringify(newAttrs, null, 2);
}, true);
}
});
</script>
</file>
</example>
ngAria will also add `tabIndex`, ensuring custom elements with these roles will be reachable from
the keyboard. It is still up to **you** as a developer to **ensure custom controls will be
operable** from the keybard. Think of `ng-click` on a `<div>` or `<md-checkbox>`: you still need
to bind `ng-keypress` to make it fully operable from the keyboard. As a rule, any time you create
a widget involving user interaction, be sure to test it with your keyboard and at least one mobile
and desktop screen reader (preferably more).
<h2 id="ngdisabled">ngDisabled</h2>
The `disabled` attribute is only valid for certain elements such as `button`, `input` and
`textarea`. To properly disable custom element directives such as `<md-checkbox>` or `<taco-tab>`,
using ngAria with [ngDisabled](https://docs.angularjs.org/api/ng/directive/ngDisabled) will also
add `aria-disabled`. This tells assistive technologies when a non-native input is disabled, helping
custom controls to be more accessible.
###Example
```html
<material-input ng-model="val" required>
<md-checkbox ng-disabled="disabled">
```
Becomes:
```html
<material-input ng-model="val" required aria-required="true">
<md-checkbox disabled aria-disabled="true">
```
ngAria is just a starting point. You'll have to manually choose how to implement some
accessibility features.
>You can check whether a control is legitimately disabled for a screen reader by visiting
[chrome://accessibility](chrome://accessibility).
For instance, you may want to add `ng-keypress` bindings alongside `ng-click` to make keyboard
navigation easier.
<h2 id="ngshow">ngShow</h2>
>The [ngShow](https://docs.angularjs.org/api/ng/directive/ngShow) directive shows or hides the
given HTML element based on the expression provided to the `ngShow` attribute. The element is
shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
## Additional Resources
In its default setup, ngAria for `ngShow` is actually redundant. It toggles `aria-hidden` on the
directive when it is hidden or shown. However, the default CSS of `display: none !important`,
already hides child elements from a screen reader. It becomes more useful when the default
CSS is overridden with properties that dont affect assistive technologies, such as `opacity`
or `transform`. By toggling `aria-hidden` dynamically with ngAria, we can ensure content visually
hidden with this technique will not be read aloud in a screen reader.
One caveat with this combination of CSS and `aria-hidden`: you must also remove links and other
interactive child elements from the tab order using `tabIndex=“-1”` on each control. This ensures
screen reader users won't accidentally focus on "mystery elements". Managing tab index on every
child control can be complex and affect performance, so its best to just stick with the default
`display: none` CSS. See the [fourth rule of ARIA use](http://www.w3.org/TR/aria-in-html/#fourth-rule-of-aria-use).
###Example
```css
.ng-hide {
display: block;
opacity: 0;
}
```
```html
<div ng-show="false" class="ng-hide" aria-hidden="true"></div>
```
Becomes:
```html
<div ng-show="true" aria-hidden="false"></div>
```
*Note: Child links, buttons or other interactive controls must also be removed from the tab order.*
<h2 id="nghide">ngHide</h2>
>The [ngHide](https://docs.angularjs.org/api/ng/directive/ngHide) directive shows or hides the
given HTML element based on the expression provided to the `ngHide` attribute. The element is
shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
The default CSS for `ngHide`, the inverse method to `ngShow`, makes ngAria redundant. It toggles
`aria-hidden` on the directive when it is hidden or shown, but the content is already hidden with
`display: none`. See explanation for <a href="#ngshow">ngShow</a> when overriding the default CSS.
<h2 id="ngclick-and-ngdblclick">ngClick and ngDblclick</h2>
If `ng-click` or `ng-dblclick` is encountered, ngAria will add `tabindex` if it isn't there already.
Even with this, you must currently still add `ng-keypress` to non-interactive elements such as `div`
or `taco-button` to enable keyboard access. Conversation is currently ongoing about whether ngAria
should also bind `ng-keypress`.
<h3>Example</h3>
```html
<div ng-click="toggleMenu()"></div>
```
Becomes:
```html
<div ng-click="toggleMenu()" tabindex="0"></div>
```
*Note: ngAria still requires `ng-keypress` to be added manually to non-native controls like divs.*
<h2 id="ngmessages">ngMessages</h2>
The new ngMessages module makes it easy to display form validation or other messages with priority
sequencing and animation. To expose these visual messages to screen readers,
ngAria injects `aria-live="polite"`, causing them to be read aloud any time a message is shown,
regardless of the user's focus location.
###Example
```html
<div ng-messages="myForm.myName.$error">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
```
Becomes:
```html
<div ng-messages="myForm.myName.$error" aria-live="polite">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
```
##Disabling attributes
The attribute magic of ngAria may not work for every scenario. To disable individual attributes,
you can use the {@link ngAria.$ariaProvider#config config} method. Just keep in mind this will
tell ngAria to ignore the attribute globally.
<example module="ngAria_ngDisabledExample" deps="angular-aria.js">
<file name="index.html">
<style>
[role=checkbox] {
cursor: pointer;
display: inline-block;
}
[role=checkbox] .icon:before {
content: '\2610';
display: inline-block;
font-size: 2em;
line-height: 1;
vertical-align: middle;
speak: none;
}
[role=checkbox].active .icon:before {
content: '\2611';
}
</style>
<form ng-controller="formsController">
<div ng-model="someModel" show-attrs>
Div with ngModel and aria-invalid disabled
</div>
<div role="checkbox" ng-model="checked" ng-class="{active: checked}"
aria-label="Custom Checkbox" ng-click="toggleCheckbox()" some-checkbox show-attrs>
<span class="icon" aria-hidden="true"></span>
Custom Checkbox for comparison
</div>
</form>
<script>
angular.module('ngAria_ngDisabledExample', ['ngAria'], function config($ariaProvider) {
$ariaProvider.config({
ariaInvalid: false,
tabindex: true
});
})
.controller('formsController', function($scope){
$scope.checked = false;
$scope.toggleCheckbox = function(){
$scope.checked = !$scope.checked;
}
})
.directive('someCheckbox', function(){
return {
restrict: 'A',
link: function($scope, $el, $attrs) {
$el.on('keypress', function(event){
event.preventDefault();
if(event.keyCode === 32 || event.keyCode === 13){
$scope.toggleCheckbox();
$scope.$apply();
}
});
}
}
})
.directive('showAttrs', function() {
return function(scope, el, attrs) {
var pre = document.createElement('pre');
el.after(pre);
scope.$watch(function() {
var attrs = {};
Array.prototype.slice.call(el[0].attributes, 0).forEach(function(item) {
if (item.name !== 'show-attrs') {
attrs[item.name] = item.value;
}
});
return attrs;
}, function(newAttrs, oldAttrs) {
pre.textContent = JSON.stringify(newAttrs, null, 2);
}, true);
}
});
</script>
</file>
</example>
##Common Accessibility Patterns
Accessibility best practices that apply to web apps in general also apply to Angular.
* [A11Y Project](http://a11yproject.com/)
* [WebAim](http://webaim.org/)
* [Using WAI-ARIA in HTML](http://www.w3.org/TR/2014/WD-aria-in-html-20140626/)
* [Apps For All: Coding Accessible Web Applications](https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html)
* **Text alternatives**: Add alternate text content to make visual information accessible using
[these W3C guidelines](http://www.w3.org/TR/html-alt-techniques/). The appropriate technique
depends on the specific markup but can be accomplished using offscreen spans, `aria-label` or
label elements, image `alt` attributes, `figure`/`figcaption` elements and more.
* **HTML Semantics**: If you're creating custom element directives, Web Components or HTML in
general, use native elements wherever possible to utilize built-in events and properties.
Alternatively, use ARIA to communicate semantic meaning. See [notes on ARIA use](http://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html).
* **Focus management**: Guide the user around the app as views are appended/removed.
Focus should *never* be lost, as this causes unexpected behavior and much confusion (referred to
as "freak-out mode").
* **Announcing changes**: When filtering or other UI messaging happens away from the user's focus,
notify with [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
* **Color contrast and scale**: Make sure content is legible and interactive controls are usable
at all screen sizes. Consider configurable UI themes for people with color blindness, low vision
or other visual impairments.
* **Progressive enhancement**: Some users do not browse with JavaScript enabled or do not have
the latest browser. An accessible message about site requirements can inform users and improve
the experience.
## Additional Resources
* [Using ARIA in HTML](http://www.w3.org/TR/aria-in-html/)
* [AngularJS Accessibility at ngEurope](https://www.youtube.com/watch?v=dmYDggEgU-s&list=UUEGUP3TJJfMsEM_1y8iviSQ)
* [Testing with Screen Readers](http://webaim.org/articles/screenreader_testing/)
* [Chrome Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en)
* [W3C Accessibility Testing](http://www.w3.org/wiki/Accessibility_testing)
* [WebAIM](http://webaim.org)
* [A11y Project](http://a11yproject.com)
+20 -3
View File
@@ -20,7 +20,7 @@ initialization.
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js">
<script src="angular.js"></script>
</body>
</html>
```
@@ -73,6 +73,23 @@ If the {@link ng.directive:ngApp `ng-app`} directive is found then Angular will:
</html>
```
As a best practice, consider adding an `ng-strict-di` directive on the same element as
`ng-app`:
```html
<!doctype html>
<html ng-app="optionalModuleName" ng-strict-di>
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>
```
This will ensure that all services in your application are properly annotated.
See the {@link guide/di#using-strict-dependency-injection dependancy injection strict mode} docs
for more.
## Manual Initialization
@@ -128,8 +145,8 @@ This is the sequence that your code should follow:
## Deferred Bootstrap
This feature enables tools like Batarang and test runners to
hook into angular's bootstrap process and sneak in more modules
This feature enables tools like [Batarang](https://github.com/angular/angularjs-batarang) and test runners
to hook into angular's bootstrap process and sneak in more modules
into the DI registry which can replace or augment DI services for
the purpose of instrumentation or mocking out heavy dependencies.
+1 -1
View File
@@ -332,7 +332,7 @@ The first issue we have to solve is that the dialog box template expects `title`
But we would like the template's scope property `title` to be the result of interpolating the
`<dialog>` element's `title` attribute (i.e. `"Hello {{username}}"`). Furthermore, the buttons expect
the `onOk` and `onCancel` functions to be present in the scope. This limits the usefulness of the
widget. To solve the mapping issue we use the `locals` to create local variables which the template
widget. To solve the mapping issue we use the `scope` to create local variables which the template
expects as follows:
```js
+7 -7
View File
@@ -56,10 +56,10 @@ Try out the Live Preview above, and then let's walk through the example and desc
This looks like normal HTML, with some new markup. In Angular, a file like this is called a
<a name="template">"{@link templates template}"</a>. When Angular starts your application, it parses and
processes this new markup from the template using the so called <a name="compiler">"{@link compiler compiler}"</a>.
processes this new markup from the template using the so-called <a name="compiler">"{@link compiler compiler}"</a>.
The loaded, transformed and rendered DOM is then called the <a name="view">"view"</a>.
The first kind of new markup are the so called <a name="directive">"{@link directive directives}"</a>.
The first kind of new markup are the so-called <a name="directive">"{@link directive directives}"</a>.
They apply special behavior to attributes or elements in the HTML. In the example above we use the
{@link ng.directive:ngApp `ng-app`} attribute, which is linked to a directive that automatically
initializes our application. Angular also defines a directive for the {@link ng.directive:input `input`}
@@ -89,7 +89,7 @@ A filter formats the value of an expression for display to the user.
In the example above, the filter {@link ng.filter:currency `currency`} formats a number
into an output that looks like money.
The important thing in the example is that angular provides _live_ bindings:
The important thing in the example is that Angular provides _live_ bindings:
Whenever the input values change, the value of the expressions are automatically
recalculated and the DOM is updated with their values.
The concept behind this is <a name="databinding">"{@link databinding two-way data binding}"</a>.
@@ -150,13 +150,13 @@ different currencies and also pay the invoice.
What changed?
First, there is a new JavaScript file that contains a so called <a name="controller">"{@link controller controller}"</a>.
First, there is a new JavaScript file that contains a so-called <a name="controller">"{@link controller controller}"</a>.
More exactly, the file contains a constructor function that creates the actual controller instance.
The purpose of controllers is to expose variables and functionality to expressions and directives.
Besides the new file that contains the controller code we also added a
Besides the new file that contains the controller code we also added an
{@link ng.directive:ngController `ng-controller`} directive to the HTML.
This directive tells angular that the new `InvoiceController` is responsible for the element with the directive
This directive tells Angular that the new `InvoiceController` is responsible for the element with the directive
and all of the element's children.
The syntax `InvoiceController as invoice` tells Angular to instantiate the controller
and save it in the variable `invoice` in the current scope.
@@ -263,7 +263,7 @@ services, ...) is created and wired using dependency injection. Within Angular,
the DI container is called the <a name="injector">"{@link di injector}"</a>.
To use DI, there needs to be a place where all the things that should work together are registered.
In Angular, this is the purpose of the so called <a name="module">"{@link module modules}"</a>.
In Angular, this is the purpose of the so-called <a name="module">"{@link module modules}"</a>.
When Angular starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
including the configuration of all modules that this module depends on.
+220 -185
View File
@@ -11,13 +11,227 @@ their dependencies.
The Angular injector subsystem is in charge of creating components, resolving their dependencies,
and providing them to other components as requested.
## Using Dependency Injection
DI is pervasive throughout Angular. You can use it when defining components or when providing `run`
and `config` blocks for a module.
- Components such as services, directives, filters, and animations are defined by an injectable
factory method or constructor function. These components can be injected with "service" and "value"
components as dependencies.
- Controllers are defined by a constructor function, which can be injected with any of the "service"
and "value" components as dependencies, but they can also be provided with special dependencies. See
{@link di#controllers Controllers} below for a list of these special dependencies.
- The `run` method accepts a function, which can be injected with "service", "value" and "constant"
components as dependencies. Note that you cannot inject "providers" into `run` blocks.
- The `config` method accepts a function, which can be injected with "provider" and "constant"
components as dependencies. Note that you cannot inject "service" or "value" components into
configuration.
See {@link module#module-loading-dependencies Modules} for more details about `run` and `config`
blocks.
### Factory Methods
The way you define a directive, service, or filter is with a factory function.
The factory methods are registered with modules. The recommended way of declaring factories is:
```js
angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
// ...
}])
.directive('directiveName', ['depService', function(depService) {
// ...
}])
.filter('filterName', ['depService', function(depService) {
// ...
}]);
```
### Module Methods
We can specify functions to run at configuration and run time for a module by calling the `config`
and `run` methods. These functions are injectable with dependencies just like the factory functions
above.
```js
angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
// ...
}])
.run(['depService', function(depService) {
// ...
}]);
```
### Controllers
Controllers are "classes" or "constructor functions" that are responsible for providing the
application behavior that supports the declarative markup in the template. The recommended way of
declaring Controllers is using the array notation:
```js
someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
...
}
...
}]);
```
Unlike services, there can be many instances of the same type of controller in an application.
Moreover, additional dependencies are made available to Controllers:
* {@link scope `$scope`}: Controllers are associated with an element in the DOM and so are
provided with access to the {@link scope scope}. Other components (like services) only have
access to the {@link $rootScope `$rootScope`} service.
* {@link ngRoute.$routeProvider#when resolves}: If a controller is instantiated as part of a route,
then any values that are resolved as part of the route are made available for injection into the
controller.
## Dependency Annotation
Angular invokes certain functions (like service factories and controllers) via the injector.
You need to annotate these functions so that the injector knows what services to inject into
the function. There are three ways of annotating your code with service name information:
- Using the inline array annotation (preferred)
- Using the `$inject` property annotation
- Implicitly from the function parameter names (has caveats)
### Inline Array Annotation
This is the preferred way to annotate application components. This is how the examples in the
documentation are written.
For example:
```js
someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
```
Here we pass an array whose elements consist of a list of strings (the names of the dependencies)
followed by the function itself.
When using this type of annotation, take care to keep the annotation array in sync with the
parameters in the function declaration.
### `$inject` Property Annotation
To allow the minifiers to rename the function parameters and still be able to inject the right services,
the function needs to be annotated with the `$inject` property. The `$inject` property is an array
of service names to inject.
```js
var MyController = function($scope, greeter) {
// ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);
```
In this scenario the ordering of the values in the `$inject` array must match the ordering of the
parameters in `MyController`.
Just like with the array annotation, you'll need to take care to keep the `$inject` in sync with
the parameters in the function declaration.
### Implicit Annotation
<div class="alert alert-danger">
**Careful:** If you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming&#41;)
your code, your service names will get renamed and break your app.
</div>
The simplest way to get hold of the dependencies is to assume that the function parameter names
are the names of the dependencies.
```js
someModule.controller('MyController', function($scope, greeter) {
// ...
});
```
Given a function the injector can infer the names of the services to inject by examining the
function declaration and extracting the parameter names. In the above example `$scope`, and
`greeter` are two services which need to be injected into the function.
One advantage of this approach is that there's no array of names to keep in sync with the
function parameters. You can also freely reorder dependencies.
However this method will not work with JavaScript minifiers/obfuscators because of how they
rename parameters.
Tools like [ng-annotate](https://github.com/olov/ng-annotate) let you use implicit dependency
annotations in your app and automatically add inline array annotations prior to minifying.
If you decide to take this approach, you probably want to use `ng-strict-di`.
Because of these caveats, we recommend avoiding this style of annotation.
## Using Strict Dependency Injection
You can add an `ng-strict-di` directive on the same element as `ng-app` to opt into strict DI mode:
```html
<!doctype html>
<html ng-app="myApp" ng-strict-di>
<body>
I can add: {{ 1 + 2 }}.
<script src="angular.js"></script>
</body>
</html>
```
Strict mode throws an error whenever a service tries to use implicit annotations.
Consider this module, which includes a `willBreak` service that uses implicit DI:
```js
angular.module('myApp', [])
.factory('willBreak', function($rootScope) {
// $rootScope is implicitly injected
})
.run(['willBreak', function(willBreak) {
// Angular will throw when this runs
}]);
```
When the `willBreak` service is instantiated, Angular will throw an error because of strict mode.
This is useful when using a tool like [ng-annotate](https://github.com/olov/ng-annotate) to
ensure that all of your application components have annotations.
If you're using manual bootstrapping, you can also use strict DI by providing `strictDi: true` in
the optional config argument:
```js
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
```
## Why Dependency Injection?
This section motivates and explains Angular's use of DI. For how to use DI, see above.
For in-depth discussion about DI, see
[Dependency Injection](http://en.wikipedia.org/wiki/Dependency_injection) at Wikipedia,
[Inversion of Control](http://martinfowler.com/articles/injection.html) by Martin Fowler,
or read about DI in your favorite software design pattern book.
## DI in a Nutshell
There are only three ways a component (object or function) can get a hold of its dependencies:
1. The component can create the dependency, typically using the `new` operator.
@@ -117,186 +331,7 @@ controller ever knowing about the injector.
This is the best outcome. The application code simply declares the dependencies it needs, without
having to deal with the injector. This setup does not break the Law of Demeter.
## Dependency Annotation
**How does the injector know what components need to be injected?**
The application developer needs to provide annotation information that the injector uses in order
to resolve the dependencies. Throughout Angular, certain API functions are invoked using the
injector, as per the API documentation. The injector needs to know what services to inject into
the function. There are three equivalent ways of annotating your code with service name
information:
- Implicitly from the function parameter names
- Using the `$inject` property annotation
- Using the inline array annotation
These can be used interchangeably as you see fit and are equivalent.
### Implicit Dependencies
The simplest way to get hold of the dependencies is to assume that the function parameter names
are the names of the dependencies.
```js
function MyController($scope, greeter) {
// ...
}
```
Given a function the injector can infer the names of the services to inject by examining the
function declaration and extracting the parameter names. In the above example `$scope`, and
`greeter` are two services which need to be injected into the function.
While straightforward, this method will not work with JavaScript minifiers/obfuscators as they
rename the method parameter names. This makes this way of annotating only useful for
[pretotyping](http://www.pretotyping.org/), and demo applications.
### `$inject` Property Annotation
To allow the minifiers to rename the function parameters and still be able to inject the right services,
the function needs to be annotated with the `$inject` property. The `$inject` property is an array
of service names to inject.
```js
var MyController = function(renamed$scope, renamedGreeter) {
...
}
MyController['$inject'] = ['$scope', 'greeter'];
```
In this scenario the ordering of the values in the `$inject` array must match the ordering of the
arguments to inject. Using the above code snippet as an example, `$scope` will be injected into
`renamed$scope` and `greeter` into `renamedGreeter`. Care must be taken that the `$inject`
annotation is kept in sync with the actual arguments in the function declaration.
This method of annotation is useful for controller declarations since it assigns the annotation
information with the function.
### Inline Array Annotation
Sometimes using the `$inject` annotation style is not convenient such as when annotating
directives or services defined inline by a factory function.
For example:
```js
someModule.factory('greeter', function($window) {
// ...
});
```
Results in code bloat due to needing a temporary variable:
```js
var greeterFactory = function(renamed$window) {
// ...
};
greeterFactory.$inject = ['$window'];
someModule.factory('greeter', greeterFactory);
```
For this reason the third annotation style is provided as well.
```js
someModule.factory('greeter', ['$window', function(renamed$window) {
// ...
}]);
```
Here, instead of simply providing the factory function, we pass an array whose elements consist of
a list of strings (the names of the dependencies) followed by the function itself.
Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular
where injection is supported.
## Where Can I Use DI?
DI is pervasive throughout Angular. You can use it when defining components or when providing `run`
and `config` blocks for a module.
- Components such as services, directives, filters and animations are defined by an injectable factory
method or constructor function. These components can be injected with "service" and "value"
components as dependencies.
- The `run` method accepts a function, which can be injected with "service", "value" and "constant"
components as dependencies. Note that you cannot inject "providers" into `run` blocks.
- The `config` method accepts a function, which can be injected with "provider" and "constant"
components as dependencies. Note that you cannot inject "service" or "value" components into
configuration
- Controllers are defined by a constructor function, which can be injected with any of the "service"
and "value" components as dependencies, but they can also be provided with special dependencies. See
{@link di#controllers Controllers} below for a list of these special dependencies.
See {@link module#module-loading-dependencies Modules} for more details about injecting dependencies
into `run` and `config` blocks.
### Factory Methods
Factory methods are responsible for creating most objects in Angular. Examples are directives,
services, and filters. The factory methods are registered with the module, and the recommended way
of declaring factories is:
```js
angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
...
}])
.directive('directiveName', ['depService', function(depService) {
...
}])
.filter('filterName', ['depService', function(depService) {
...
}]);
```
### Module Methods
We can specify functions to run at configuration and run time for a module by calling the `run` and
`config` methods. These functions are injectable with dependencies just like the factory functions
above.
```js
angular.module('myModule', [])
.config(['depProvider', function(depProvider){
...
}])
.run(['depService', function(depService) {
...
}]);
```
### Controllers
Controllers are "classes" or "constructor functions" that are responsible for providing the
application behavior that supports the declarative markup in the template. The recommended way of
declaring Controllers is using the array notation:
```js
someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
...
}
...
}]);
```
This avoids the creation of global functions for controllers and also protects against minification.
Controllers are special in that, unlike services, there can be many instances of them in the
application. For example, there would be one instance for every `ng-controller` directive in the template.
Moreover, additional dependencies are made available to Controllers:
* {@link scope `$scope`}: Controllers are always associated with a point in the DOM and so are provided with
access to the {@link scope scope} at that point. Other components, such as services only have access to the
singleton {@link $rootScope} service.
* {@link $route} resolves: If a controller is instantiated as part of a route, then any values that
are resolved as part of the route are made available for injection into the controller.
<div class="alert alert-info">
**Note:** Angular uses
[**constructor injection**](http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/).
</div>
+8 -8
View File
@@ -66,15 +66,9 @@ The **normalization** process is as follows:
1. Strip `x-` and `data-` from the front of the element/attributes.
2. Convert the `:`, `-`, or `_`-delimited name to `camelCase`.
Here are some equivalent examples of elements that match `ngBind`:
For example, the following forms are all equivalent and match the {@link ngBind} directive:
<example module="docsBindExample">
<file name="script.js">
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 October 4, 1947)';
}]);
</file>
<file name="index.html">
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
@@ -85,6 +79,12 @@ Here are some equivalent examples of elements that match `ngBind`:
<span x-ng-bind="name"></span> <br/>
</div>
</file>
<file name="script.js">
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 October 4, 1947)';
}]);
</file>
<file name="protractor.js" type="protractor">
it('should show off bindings', function() {
expect(element(by.css('div[ng-controller="Controller"] span[ng-bind]')).getText())
@@ -282,7 +282,7 @@ using `templateUrl` instead:
</file>
</example>
`templateUrl` can also be a function which returns the URL of an HMTL template to be loaded and
`templateUrl` can also be a function which returns the URL of an HTML template to be loaded and
used for the directive. Angular will call the `templateUrl` function with two parameters: the
element that the directive was called on, and an `attr` object associated with that element.
+2 -2
View File
@@ -27,8 +27,8 @@ Protractor is a [Node.js](http://nodejs.org) program, and runs end to end tests
written in JavaScript and run with node. Protractor uses [WebDriver](https://code.google.com/p/selenium/wiki/GettingStarted)
to control browsers and simulate user actions.
For more information on Protractor, view [getting started](https://github.com/angular/protractor/blob/master/docs/getting-started.md)
or the [api docs](https://github.com/angular/protractor/blob/master/docs/api.md).
For more information on Protractor, view [getting started](http://angular.github.io/protractor/#/getting-started)
or the [api docs](http://angular.github.io/protractor/#/api).
Protractor uses [Jasmine](http://jasmine.github.io/1.3/introduction.html) for its test syntax.
As in unit testing, a test file is comprised of one or
+10 -4
View File
@@ -164,6 +164,12 @@ expression. The reason behind this is core to the Angular philosophy that applic
be in controllers, not the views. If you need a real conditional, loop, or to throw from a view
expression, delegate to a JavaScript method instead.
## No RegExp creation with literal notation
You can't create regular expressions from within AngularJS expressions. This is to avoid complex
model transformation logic inside templates. Such logic is better placed in a controller or in a dedicated
filter where it can be tested properly.
## `$event`
Directives like {@link ng.directive:ngClick `ngClick`} and {@link ng.directive:ngFocus `ngFocus`}
@@ -278,9 +284,9 @@ digest cycle as long as that value is not undefined. If the value of the express
within the digest loop and later, within the same digest loop, it is set to undefined,
then the expression is not fulfilled and will remain watched.
1. Given an expression that starts with `::` when a digest loop is entered and expression
is dirty-checked store the value as V
2. If V is not undefined mark the result of the expression as stable and schedule a task
1. Given an expression that starts with `::`, when a digest loop is entered and expression
is dirty-checked, store the value as V
2. If V is not undefined, mark the result of the expression as stable and schedule a task
to deregister the watch for this expression when we exit the digest loop
3. Process the digest loop as normal
4. When digest loop is done and all the values have settled process the queue of watch
@@ -314,7 +320,7 @@ someModule.directive('someDirective', function() {
```
```html
<div some-directive name=::myName color=My color is {{::myColor}}></div>
<div some-directive name="::myName" color="My color is {{::myColor}}"></div>
```
+5
View File
@@ -91,6 +91,11 @@ The filter function should be a [pure function](http://en.wikipedia.org/wiki/Pur
means that it should be stateless and idempotent. Angular relies on these properties and executes
the filter only when the inputs to the function change.
<div class="alert alert-warning">
**Note:** filter names must be valid angular expression identifiers, such as `uppercase` or `orderBy`.
Names with special characters, such as hyphens and dots, are not allowed.
</div>
The following sample filter reverses a text string. In addition, it conditionally makes the
text upper-case.
+156 -72
View File
@@ -7,15 +7,17 @@ Controls (`input`, `select`, `textarea`) are ways for a user to enter data.
A Form is a collection of controls for the purpose of grouping related controls together.
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.
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.
Server-side validation is still necessary for a secure application.
# Simple form
The key directive in understanding two-way data-binding is {@link ng.directive:ngModel ngModel}.
The `ngModel` 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 {@link ngModel.NgModelController API} for other directives to augment its behavior.
The `ngModel` 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 {@link ngModel.NgModelController API}
for other directives to augment its behavior.
<example module="formExample">
<file name="index.html">
@@ -54,22 +56,29 @@ In addition it provides an {@link ngModel.NgModelController API} for other direc
Note that `novalidate` is used to disable browser's native form validation.
The value of `ngModel` won't be set unless it passes validation for the input field.
For example: inputs of type `email` must have a value in the form of `user@domain`.
# Using CSS classes
To allow styling of form as well as controls, `ngModel` adds these CSS classes:
- `ng-valid`
- `ng-invalid`
- `ng-pristine`
- `ng-dirty`
- `ng-touched`
- `ng-untouched`
- `ng-valid`: the model is valid
- `ng-invalid`: the model is invalid
- `ng-valid-[key]`: for each valid key added by `$setValidity`
- `ng-invalid-[key]`: for each invalid key added by `$setValidity`
- `ng-pristine`: the control hasn't been interacted with yet
- `ng-dirty`: the control has been interacted with
- `ng-touched`: the control has been blurred
- `ng-untouched`: the control hasn't been blurred
- `ng-pending`: any `$asyncValidators` are unfulfilled
The following example uses the CSS to display validity of each form control.
In the example both `user.name` and `user.email` 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.
In the example both `user.name` and `user.email` 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.
<example module="formExample">
<file name="index.html">
@@ -122,9 +131,9 @@ A form is an instance of {@link form.FormController FormController}.
The form instance can optionally be published into the scope using the `name` attribute.
Similarly, an input control that has the {@link ng.directive:ngModel ngModel} directive holds an
instance of {@link ngModel.NgModelController NgModelController}.
Such a control instance can be published as a property of the form instance using the `name` attribute
on the input control. The name attribute specifies the name of the property on the form instance.
instance of {@link ngModel.NgModelController NgModelController}.Such a control instance
can be published as a property of the form instance using the `name` attribute on the input control.
The name attribute specifies the name of the property on the form instance.
This implies that the internal state of both the form and the control is available for binding in
the view using the standard binding primitives.
@@ -187,7 +196,7 @@ This allows us to extend the above example with these features:
# Custom triggers
# Custom model update triggers
By default, any change to the content will trigger a model update and form validation. You can
override this behavior using the {@link ng.directive:ngModelOptions ngModelOptions} directive to
@@ -195,13 +204,15 @@ bind only to specified list of events. I.e. `ng-model-options="{ updateOn: 'blur
and validate only after the control loses focus. You can set several events using a space delimited
list. I.e. `ng-model-options="{ updateOn: 'mousedown blur' }"`
<img alt="animation showing debounced input" src="img/guide/forms-update-on-blur.gif">
If you want to keep the default behavior and just add new events that may trigger the model update
and validation, add "default" as one of the specified events.
I.e. `ng-model-options="{ updateOn: 'default blur' }"`
The following example shows how to override immediate updates. Changes on the inputs within the form will update the model
only when the control loses focus (blur event).
The following example shows how to override immediate updates. Changes on the inputs within the form
will update the model only when the control loses focus (blur event).
<example module="customTriggerExample">
<file name="index.html">
@@ -232,6 +243,8 @@ You can delay the model update/validation by using the `debounce` key with the
{@link ng.directive:ngModelOptions ngModelOptions} directive. This delay will also apply to
parsers, validators and model flags like `$dirty` or `$pristine`.
<img alt="animation showing debounced input" src="img/guide/forms-debounce.gif">
I.e. `ng-model-options="{ debounce: 500 }"` will wait for half a second since
the last content change before triggering the model update and form validation.
@@ -241,10 +254,11 @@ in `debounce`. This can be useful to force immediate updates on some specific ci
I.e. `ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"`
If those attributes are added to an element, they will be applied to all the child elements and controls that inherit from it unless they are
overridden.
If those attributes are added to an element, they will be applied to all the child elements and
controls that inherit from it unless they are overridden.
This example shows how to debounce model changes. Model will be updated only 250 milliseconds after last change.
This example shows how to debounce model changes. Model will be updated only 250 milliseconds
after last change.
<example module="debounceExample">
<file name="index.html">
@@ -264,35 +278,40 @@ This example shows how to debounce model changes. Model will be updated only 250
</file>
</example>
# Custom Validation
Angular provides basic implementation for most common html5 {@link ng.directive:input input}
types: ({@link input[text] text}, {@link input[number] number}, {@link input[url] url}, {@link input[email] email}, {@link input[radio] radio}, {@link input[checkbox] checkbox}), as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`, `min`, `max`).
Angular provides basic implementation for most common HTML5 {@link ng.directive:input input}
types: ({@link input[text] text}, {@link input[number] number}, {@link input[url] url},
{@link input[email] email}, {@link input[radio] radio}, {@link input[checkbox] checkbox}),
as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`,
`min`, `max`).
Defining your own validator can be done by defining your own directive which adds a custom validation function to the `ngModel` {@link ngModel.NgModelController controller}.
To get a hold of the controller the directive specifies a dependency as shown in the example below.
The validation can occur in two places:
With a custom directive, you can add your own validation functions to the `$validators` object on
the {@link ngModel.NgModelController `ngModelController`}. To get a hold of the controller,
you require it in the directive as shown in the example below.
* **Model to View update** -
Whenever the bound model changes, all functions in {@link ngModel.NgModelController#$formatters NgModelController#$formatters} array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through {@link ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
Each function in the `$validators` object receives the `modelValue` and the `viewValue`
as parameters. Angular will then call `$setValidity` internally with the function's return value
(`true`: valid, `false`: invalid). The validation functions are executed every time an input
is changed (`$setViewValue` is called) or whenever the bound `model` changes.
Validation happens after successfully running `$parsers` and `$formatters`, respectively.
Failed validators are stored by key in
{@link ngModel.NgModelController#$error `ngModelController.$error`}.
* **View to Model update** -
In a similar way, whenever a user interacts with a control it calls {@link ngModel.NgModelController#$setViewValue NgModelController#$setViewValue}.
This in turn pipelines all functions in the {@link ngModel.NgModelController#$parsers NgModelController#$parsers} array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through {@link ngModel.NgModelController#$setValidity NgModelController#$setValidity}.
Additionally, there is the `$asyncValidators` object which handles asynchronous validation,
such as making an `$http` request to the backend. Functions added to the object must return
a promise that must be `resolved` when valid or `rejected` when invalid.
In-progress async validations are stored by key in
{@link ngModel.NgModelController#$pending `ngModelController.$pending`}.
In the following example we create two directives.
* The first one is `integer` and it validates whether the input is a valid integer.
For example `1.23` is an invalid value, since it contains a fraction.
Note that we unshift the array instead of pushing.
This is because we want it to be the first parser and consume the control string value, as we need to execute the validation function before a conversion to number occurs.
* The second directive is a `smart-float`.
It parses both `1.2` and `1,2` into a valid float number `1.2`.
Note that we can't use input type `number` here as HTML5 browsers would not allow the user to type what it would consider an invalid number such as `1,2`.
In the following example we create two directives:
* An `integer` directive that validates whether the input is a valid integer. For example,
`1.23` is an invalid value, since it contains a fraction. Note that we validate the viewValue
(the string value of the control), and not the modelValue. This is because input[number] converts
the viewValue to a number when running the `$parsers`.
* A `username` directive that asynchronously checks if a user-entered value is already taken.
We mock the server request with a `$q` deferred.
<example module="form-example1">
<file name="index.html">
@@ -301,18 +320,18 @@ In the following example we create two directives.
Size (integer 0 - 10):
<input type="number" ng-model="size" name="size"
min="0" max="10" integer />{{size}}<br />
<span ng-show="form.size.$error.integer">This is not valid integer!</span>
<span ng-show="form.size.$error.integer">The value is not a valid integer!</span>
<span ng-show="form.size.$error.min || form.size.$error.max">
The value must be in range 0 to 10!</span>
</div>
<div>
Length (float):
<input type="text" ng-model="length" name="length" smart-float />
{{length}}<br />
<span ng-show="form.length.$error.float">
This is not a valid float number!</span>
Username:
<input type="text" ng-model="name" name="name" username />{{name}}<br />
<span ng-show="form.name.$pending.username">Checking if this name is available ...</span>
<span ng-show="form.name.$error.username">This username is already taken!</span>
</div>
</form>
</file>
@@ -324,35 +343,96 @@ In the following example we create two directives.
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
ctrl.$validators.integer = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('integer', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('integer', false);
return undefined;
return true;
}
});
// it is invalid
return false;
};
}
};
});
var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function() {
app.directive('username', function($q, $timeout) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (FLOAT_REGEXP.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
ctrl.$setValidity('float', false);
return undefined;
var usernames = ['Jim', 'John', 'Jill', 'Jackie'];
ctrl.$asyncValidators.username = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty model valid
return $q.when();
}
});
var def = $q.defer();
$timeout(function() {
// Mock a delayed response
if (usernames.indexOf(modelValue) === -1) {
// The username is available
def.resolve();
} else {
def.reject();
}
}, 2000);
return def.promise;
};
}
};
});
</file>
</example>
# Modifying built-in validators
Since Angular itself uses `$validators`, you can easily replace or remove built-in validators,
should you find it necessary. The following example shows you how to overwrite the email validator
in `input[email]` from a custom directive so that it requires a specific top-level domain,
`example.com` to be present.
Note that you can alternatively use `ng-pattern` to further restrict the validation.
<example module="form-example-modify-validators">
<file name="index.html">
<form name="form" class="css-form" novalidate>
<div>
Overwritten Email:
<input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
<span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
Model: {{myEmail}}
</div>
</form>
</file>
<file name="script.js">
var app = angular.module('form-example-modify-validators', []);
app.directive('overwriteEmail', function() {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;
return {
require: 'ngModel',
restrict: '',
link: function(scope, elm, attrs, ctrl) {
// only apply the validator if ngModel is present and Angular has added the email validator
if (ctrl && ctrl.$validators.email) {
// this will overwrite the default Angular email validator
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
};
}
}
};
});
@@ -361,15 +441,19 @@ In the following example we create two directives.
# Implementing custom form controls (using `ngModel`)
Angular implements all of the basic HTML form controls ({@link ng.directive:input input}, {@link ng.directive:select select}, {@link ng.directive:textarea textarea}), which should be sufficient for most cases.
However, if you need more flexibility, you can write your own form control as a directive.
Angular implements all of the basic HTML form controls ({@link ng.directive:input input},
{@link ng.directive:select select}, {@link ng.directive:textarea textarea}),
which should be sufficient for most cases. However, if you need more flexibility,
you can write your own form control as a directive.
In order for custom control to work with `ngModel` and to achieve two-way data-binding it needs to:
- implement `$render` method, which is responsible for rendering the data after it passed the {@link ngModel.NgModelController#$formatters NgModelController#$formatters},
- call `$setViewValue` method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener.
- implement `$render` method, which is responsible for rendering the data after it passed the
{@link ngModel.NgModelController#$formatters `NgModelController.$formatters`},
- call `$setViewValue` method, whenever the user interacts with the control and model
needs to be updated. This is usually done inside a DOM Event listener.
See {@link guide/directive $compileProvider.directive} for more info.
See {@link guide/directive `$compileProvider.directive`} for more info.
The following example shows how to add two-way data-binding to contentEditable elements.
+4 -1
View File
@@ -41,9 +41,10 @@ In Angular applications, you move the job of filling page templates with data fr
### Other AngularJS Features
* **Animation:** {@link guide/animations Core concepts}, {@link ngAnimate ngAnimate API}, and [Animation in AngularJS 1.2](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html)
* **Security:** {@link ng.$sce Strict Contextual Escaping}, {@link ng.directive:ngCsp Content Security Policy}, {@link ngSanitize.$sanitize $sanitize}, [video](https://www.youtube.com/watch?v=18ifoT-Id54)
* **Security:** {@link guide/security Security Docs}, {@link ng.$sce Strict Contextual Escaping}, {@link ng.directive:ngCsp Content Security Policy}, {@link ngSanitize.$sanitize $sanitize}, [video](https://www.youtube.com/watch?v=18ifoT-Id54)
* **Internationalization and Localization:** {@link guide/i18n Angular Guide to i18n and l10n}, {@link ng.filter:date date filter}, {@link ng.filter:currency currency filter}, [Creating multilingual support](http://www.novanet.no/blog/hallstein-brotan/dates/2013/10/creating-multilingual-support-using-angularjs/)
* **Mobile:** {@link ngTouch Touch events}
* **Accessibility:** {@link guide/accessibility ngAria}
### Testing
@@ -95,6 +96,7 @@ This is a short list of libraries with specific support and documentation for wo
* **MEAN Stack: **[Blog post](http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and), [Setup](http://thecodebarbarian.wordpress.com/2013/07/22/introduction-to-the-mean-stack-part-one-setting-up-your-tools/), [GDL Video](https://developers.google.com/live/shows/913996610)
* **Rails: **[Tutorial](http://coderberry.me/blog/2013/04/22/angularjs-on-rails-4-part-1/), [AngularJS with Rails4](https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4), [angularjs-rails](https://github.com/hiravgandhi/angularjs-rails)
* **PHP: **[Building a RESTful web service](http://blog.brunoscopelliti.com/building-a-restful-web-service-with-angularjs-and-php-more-power-with-resource), [End to End with Laravel 4 (video)](http://www.youtube.com/watch?v=hqAyiqUs93c)
* **Meteor: **[angular-meteor package](https://github.com/Urigo/angular-meteor)
## Learning Resources
@@ -106,6 +108,7 @@ This is a short list of libraries with specific support and documentation for wo
* [Developing an AngularJS Edge](http://www.amazon.com/Developing-AngularJS-Edge-Christopher-Hiller-ebook/dp/B00CJLFF8K) by Christopher Hiller
* [ng-book: The Complete Book on AngularJS](http://ng-book.com/) by Ari Lerner
* [AngularJS : Novice to Ninja](http://www.amazon.in/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453) by Sandeep Panda
* [AngularJS UI Development](http://www.amazon.com/AngularJS-UI-Development-Amit-Ghart-ebook/dp/B00OXVAK7A) by Amit Gharat and Matthias Nehlsen
###Videos:
* [egghead.io](http://egghead.io/)
+1 -1
View File
@@ -33,7 +33,7 @@ browser new syntax through a construct we call directives. Examples include:
* Data binding, as in `{{}}`.
* DOM control structures for repeating/hiding DOM fragments.
* Support for forms and form validation.
* Attaching code-behind to DOM elements.
* Attaching new behavior to DOM elements, such as DOM event handling.
* Grouping of HTML into reusable components.
+1 -1
View File
@@ -23,7 +23,7 @@ This is to disallow changing the behaviour of existing functions
in an unforseen fashion.
- due to [6081f207](https://github.com/angular/angular.js/commit/6081f20769e64a800ee8075c168412b21f026d99),
The (deprecated) __proto__ propery does not work inside angular expressions
The (deprecated) __proto__ property does not work inside angular expressions
anymore.
- due to [48fa3aad](https://github.com/angular/angular.js/commit/48fa3aadd546036c7e69f71046f659ab1de244c6),
+1 -1
View File
@@ -140,7 +140,7 @@ The above is a suggestion. Tailor it to your needs.
# Module Loading & Dependencies
A module is a collection of configuration and run blocks which get applied to the application
during the bootstrap process. In its simplest form the module consist of collection of two kinds
during the bootstrap process. In its simplest form the module consist of a collection of two kinds
of blocks:
1. **Configuration blocks** - get executed during the provider registrations and configuration
+32
View File
@@ -41,3 +41,35 @@ The page should reload and the debug information should now be available.
For more see the docs pages on {@link ng.$compileProvider#debugInfoEnabled `$compileProvider`}
and {@link angular.reloadWithDebugInfo `angular.reloadWithDebugInfo`}.
## Strict DI Mode
Using strict di mode in your production application will throw errors when a injectable
function is not
{@link di#dependency-annotation annotated explicitly}. Strict di mode is intended to help
you make sure that your code will work when minified. However, it also will force you to
make sure that your injectable functions are explicitly annotated which will improve
angular's performance when injecting dependencies in your injectable functions because it
doesn't have to dynamically discover a function's dependencies. It is recommended to
automate the explicit annotation via a tool like
[ng-annotate](https://github.com/olov/ng-annotate) when you deploy to production (and enable
strict di mode)
To enable strict di mode, you have two options:
```html
<div ng-app="myApp" ng-strict-di>
<!-- your app here -->
</div>
```
or
```js
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
```
For more information, see the
{@link di#using-strict-dependency-injection DI Guide}.
+13 -1
View File
@@ -39,7 +39,7 @@ linking} phase the {@link ng.$compileProvider#directive directives} set up
render the updated value to the DOM.
Both controllers and directives have reference to the scope, but not to each other. This
arrangement isolates the controller from the directive as well as from DOM. This is an important
arrangement isolates the controller from the directive as well as from the DOM. This is an important
point since it makes the controllers view agnostic, which greatly improves the testing story of
the applications.
@@ -339,6 +339,18 @@ the dirty checking function must be efficient. Care should be taken that the dir
function does not do any DOM access, as DOM access is orders of magnitude slower than property
access on JavaScript object.
### Scope `$watch` Depths
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-scope-watch-strategies.png">
Dirty checking can be done with three strategies: By reference, by collection contents, and by value. The strategies differ in the kinds of changes they detect, and in their performance characteristics.
- Watching *by reference* ({@link
ng.$rootScope.Scope#$watch scope.$watch} `(watchExpression, listener)`) detects a change when the whole value returned by the watch expression switches to a new value. If the value is an array or an object, changes inside it are not detected. This is the most efficient stategy.
- Watching *collection contents* ({@link
ng.$rootScope.Scope#$watchCollection scope.$watchCollection} `(watchExpression, listener)`) detects changes that occur inside an array or an object: When items are added, removed, or reordered. The detection is shallow - it does not reach into nested collections. Watching collection contents is more expensive than watching by reference, because copies of the collection contents need to be maintained. However, the strategy attempts to minimize the amount of copying required.
- Watching *by value* ({@link
ng.$rootScope.Scope#$watch scope.$watch} `(watchExpression, listener, true)`) detects any change in an arbitrarily nested data structure. It is the most powerful change detection strategy, but also the most expensive. A full traversal of the nested data structure is needed on each digest, and a full copy of it needs to be held in memory.
## Integration with the browser event loop
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-runtime.png">
+60
View File
@@ -0,0 +1,60 @@
@ngdoc overview
@name Security
@sortOrder 525
@description
# Security
This document explains some of AngularJS's security features and best practices that you should
keep in mind as you build your application.
## Expression Sandboxing
AngularJS's expressions are sandboxed not for security reasons, but instead to maintain a proper
separation of application responsibilities. For example, access to `window` is disallowed
because it makes it easy to introduce brittle global state into your application.
However, this sandbox is not intended to stop attackers who can edit the template before it's
processed by Angular. It may be possible to run arbitrary JavaScript inside double-curly bindings
if an attacker can modify them.
But if an attacker can change arbitrary HTML templates, there's nothing stopping them from doing:
```html
<script>somethingEvil();</script>
```
It's better to design your application in such a way that users cannot change client-side templates.
For instance:
* Do not mix client and server templates
* Do not use user input to generate templates dynamically
* Do not run user input through `$scope.$eval`
* Consider using {@link ng.directive:ngCsp CSP} (but don't rely only on CSP)
## Mixing client-side and server-side templates
In general, we recommend against this because it can create unintended XSS vectors.
However, it's ok to mix server-side templating in the bootstrap template (`index.html`) as long
as user input cannot be used on the server to output html that would then be processed by Angular
in a way that would cause allow for arbitrary code execution.
For instance, you can use server-side templating to dynamically generate CSS, URLs, etc, but not
for generating templates that are bootstrapped/compiled by Angular.
## Reporting a security issue
Email us at [security@angularjs.org](mailto:security@angularjs.org) to report any potential
security issues in AngularJS.
Please keep in mind the above points about Angular's expression language.
## See also
* {@link ng.directive:ngCsp Content Security Policy}
* {@link ng.$sce Strict Contextual Escaping}
* {@link ngSanitize.$sanitize $sanitize}
+9 -80
View File
@@ -19,7 +19,7 @@ Angular offers several useful services (like {@link ng.$http `$http`}), but for
you'll also want to {@link services#creating-services create your own}.
<div class="alert alert-info">
**Note:** Like other core Angular identifiers built-in services always start with `$`
**Note:** Like other core Angular identifiers, built-in services always start with `$`
(e.g. `$http`).
</div>
@@ -68,79 +68,6 @@ subsystem takes care of the rest.
</file>
</example>
<div class="alert alert-info">
**Note:** Angular uses
[**constructor injection**](http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/).
</div>
### Explicit Dependency Injection
A component should explicitly define its dependencies using one of the {@link di injection
annotation} methods:
1. Inline array injection annotation (preferred):
```js
myModule.controller('MyController', ['$location', function($location) { ... }]);
```
2. `$inject` property:
```js
var MyController = function($location) { ... };
MyController.$inject = ['$location'];
myModule.controller('MyController', MyController);
```
<div class="alert alert-success">
**Best Practice:** Use the array annotation shown above.
</div>
### Implicit Dependency Injection
Even if you don't annotate your dependencies, Angular's DI can determine the dependency from the
name of the parameter. Let's rewrite the above example to show the use of this implicit dependency
injection of `$window`, `$scope`, and our `notify` service:
<example module="myServiceModuleDI">
<file name="index.html">
<div id="implicit" ng-controller="MyController">
<p>Let's try the notify service, that is implicitly injected into the controller...</p>
<input ng-init="message='test'" ng-model="message">
<button ng-click="callNotify(message);">NOTIFY</button>
<p>(you have to click 3 times to see an alert)</p>
</div>
</file>
<file name="script.js">
angular.module('myServiceModuleDI', []).
factory('notify', function($window) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
$window.alert(msgs.join("\n"));
msgs = [];
}
};
}).
controller('MyController', function($scope, notify) {
$scope.callNotify = function(msg) {
notify(msg);
};
});
</file>
</example>
<div class="alert alert-danger">
**Careful:** If you plan to [minify](http://en.wikipedia.org/wiki/Minification_(programming&#41;) your
code, your variable names will get renamed unless you use one of the annotation techniques above.
</div>
<div class="alert alert-info">
If you use a tool like [ng-annotate](https://github.com/olov/ng-annotate) in your workflow you can
use implicit dependency notation within your codebase and let **ng-annotate** automatically convert such
injectable functions to the array notation prior to minifying.
</div>
## Creating Services
@@ -157,11 +84,11 @@ on the service.
Services are registered to modules via the {@link angular.Module Module API}.
Typically you use the {@link angular.module Module#factory} API to register a service:
```javascript
```js
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
// factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
```
@@ -174,6 +101,8 @@ will create this instance when called.
Services can have their own dependencies. Just like declaring dependencies in a controller, you
declare dependencies by specifying them in the service's factory function signature.
For more on dependencies, see the {@link guide/di dependency injection} docs.
The example module below has two services, each with various dependencies:
```js
@@ -231,14 +160,14 @@ In the example, note that:
You can also register services via the {@link auto.$provide `$provide`} service inside of a
module's `config` function:
```javascript
angular.module('myModule', []).config(function($provide) {
```js
angular.module('myModule', []).config(['$provide', function($provide) {
$provide.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
// factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
});
}]);
```
This technique is often used in unit tests to mock out a service's dependencies.
+216 -223
View File
@@ -8,15 +8,15 @@ comes with almost no help from the compiler. For this reason we feel very strong
written in JavaScript needs to come with a strong set of tests. We have built many features into
Angular which makes testing your Angular applications easy. So there is no excuse for not testing.
# Separation of Concerns
## Separation of Concerns
Unit testing as the name implies is about testing individual units of code. Unit tests try to
Unit testing, as the name implies, is about testing individual units of code. Unit tests try to
answer questions such as "Did I think about the logic correctly?" or "Does the sort function order
the list in the right order?"
In order to answer such a question it is very important that we can isolate the unit of code under test.
That is because when we are testing the sort function we don't want to be forced into creating
related pieces such as the DOM elements, or making any XHR calls in getting the data to sort.
related pieces such as the DOM elements, or making any XHR calls to fetch the data to sort.
While this may seem obvious it can be very difficult to call an individual function on a
typical project. The reason is that the developers often mix concerns resulting in a
@@ -24,12 +24,10 @@ piece of code which does everything. It makes an XHR request, it sorts the respo
manipulates the DOM.
With Angular we try to make it easy for you to do the right thing, and so we
provide dependency injection for your XHR (which you can mock out) and we created abstractions which
allow you to sort your model without having to resort to manipulating the DOM. So that in the end,
it is easy to write a sort function which sorts some data, so that your test can create a data set,
apply the function, and assert that the resulting model is in the correct order. The test does not
have to wait for the XHR response to arrive, create the right kind of test DOM, nor assert that your
function has mutated the DOM in the right way.
provide dependency injection for your XHR requests, which can be mocked, and we provide abstractions which
allow you to test your model without having to resort to manipulating the DOM. The test can then
assert that the data has been sorted without having to create or look at the state of the DOM or
wait for any XHR requests to return data. The individual sort function can be tested in isolation.
## With great power comes great responsibility
@@ -38,230 +36,218 @@ We tried to make the right thing easy, but if you ignore these guidelines you ma
untestable application.
## Dependency Injection
There are several ways in which you can get a hold of a dependency. You can:
1. Create it using the `new` operator.
2. Look for it in a well-known place, also known as a global singleton.
3. Ask a registry (also known as service registry) for it. (But how do you get a hold of
the registry? Most likely by looking it up in a well known place. See #2.)
4. Expect it to be handed to you.
Out of the four options in the list above, only the last one is testable. Let's look at why:
Angular comes with {@link di dependency injection} built-in, which makes testing components much
easier, because you can pass in a component's dependencies and stub or mock them as you wish.
### Using the `new` operator
Components that have their dependencies injected allow them to be easily mocked on a test by
test basis, without having to mess with any global variables that could inadvertently affect
another test.
While there is nothing wrong with the `new` operator fundamentally, a problem arises when calling `new`
on a constructor. This permanently binds the call site to the type. For example, let's say that we try to
instantiate an `XHR` that will retrieve data from the server.
## Additional tools for testing Angular applications
For testing Angular applications there are certain tools that you should use that will make testing much
easier to set up and run.
### Karma
[Karma](http://karma-runner.github.io/) is a JavaScript command line tool that can be used to spawn
a web server which loads your application's source code and executes your tests. You can configure
Karma to run against a number of browsers, which is useful for being confident that your application
works on all browsers you need to support. Karma is executed on the command line and will display
the results of your tests on the command line once they have run in the browser.
Karma is a NodeJS application, and should be installed through npm. Full installation instructions
are available on [the Karma website](http://karma-runner.github.io/0.12/intro/installation.html).
### Jasmine
[Jasmine](http://jasmine.github.io/1.3/introduction.html) is a test driven development framework for
JavaScript that has become the most popular choice for testing Angular applications. Jasmine
provides functions to help with structuring your tests and also making assertions. As your tests
grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.
In Jasmine we use the `describe` function to group our tests together:
```js
function MyClass() {
this.doWork = function() {
var xhr = new XHR();
xhr.open(method, url, true);
xhr.onreadystatechange = function() {...}
xhr.send();
}
}
describe("sorting the list of users", function() {
// individual tests go here
});
```
A problem surfaces in tests when we would like to instantiate a `MockXHR` that would
allow us to return fake data and simulate network failures. By calling `new XHR()` we are
permanently bound to the actual XHR and there is no way to replace it. Yes, we could monkey
patch, but that is a bad idea for many reasons which are outside the scope of this document.
Here's an example of how the class above becomes hard to test when resorting to monkey patching:
And then each individual test is defined within a call to the `it` function:
```js
var oldXHR = XHR;
XHR = function MockXHR() {};
var myClass = new MyClass();
myClass.doWork();
// assert that MockXHR got called with the right arguments
XHR = oldXHR; // if you forget this bad things will happen
describe('sorting the list of users', function() {
it('sorts in descending order by default', function() {
// your test assertion goes here
});
});
```
Grouping related tests within `describe` blocks and describing each individual test within an
`it` call keeps your tests self documenting.
### Global look-up:
Another way to approach the problem is to look for the service in a well-known location.
Finally, Jasmine provides matchers which let you make assertions:
```js
function MyClass() {
this.doWork = function() {
global.xhr({
method:'...',
url:'...',
complete:function(response){ ... }
})
}
}
describe('sorting the list of users', function() {
it('sorts in descending order by default', function() {
var users = ['jack', 'igor', 'jeff'];
var sorted = sortUsers(users);
expect(sorted).toEqual(['jeff', 'jack', 'igor']);
});
});
```
While no new dependency instance is created, it is fundamentally the same as `new` in
that no way exists to intercept the call to `global.xhr` for testing purposes, other than
through monkey patching. The basic issue for testing is that a global variable needs to be mutated in
order to replace it with call to a mock method. For further explanation of why this is bad see: [Brittle Global
State & Singletons](http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/)
Jasmine comes with a number of matchers that help you make a variety of assertions. You should [read
the Jasmine documentation](http://jasmine.github.io/1.3/introduction.html#section-Matchers) to see
what they are. To use Jasmine with Karma, we use the
[karma-jasmine](https://github.com/karma-runner/karma-jasmine) test runner.
The class above is hard to test since we have to change the global state:
### angular-mocks
Angular also provides the {@link ngMock} module, which provides mocking for your tests. This is used
to inject and mock Angular services within unit tests. In addition, it is able to extend other
modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work
with. One of the most useful parts of ngMock is {@link ngMock.$httpBackend}, which lets us mock XHR
requests in tests, and return sample data instead.
## Testing a Controller
Because Angular separates logic from the view layer, it keeps controllers easy to test. Let's take a
look at how we might test the controller below, which provides `$scope.grade`, which sets a property
on the scope based on the length of the password.
```js
var oldXHR = global.xhr;
global.xhr = function mockXHR() {};
var myClass = new MyClass();
myClass.doWork();
// assert that mockXHR got called with the right arguments
global.xhr = oldXHR; // if you forget this bad things will happen
angular.module('app', [])
.controller('PasswordController', function PasswordController($scope) {
$scope.password = '';
$scope.grade = function() {
var size = $scope.password.length;
if (size > 8) {
$scope.strength = 'strong';
} else if (size > 3) {
$scope.strength = 'medium';
} else {
$scope.strength = 'weak';
}
};
});
```
### Service Registry:
It may seem that this can be solved by having a registry of all the services and then
having the tests replace the services as needed.
Because controllers are not available on the global scope, we need to use {@link
angular.mock.inject} to inject our controller first. The first step is to use the `module` function,
which is provided by angular-mocks. This loads in the module it's given, so it is available in your
tests. We pass this into `beforeEach`, which is a function Jasmine provides that lets us run code
before each test. Then we can use `inject` to access `$controller`, the service that is responsible
for instantiating controllers.
```js
function MyClass() {
var serviceRegistry = ????;
this.doWork = function() {
var xhr = serviceRegistry.get('xhr');
xhr({
method:'...',
url:'...',
complete:function(response){ ... }
})
}
describe('PasswordController', function() {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars', function() {
var $scope = {};
var controller = $controller('PasswordController', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
```
However, where does the serviceRegistry come from? If it is:
* `new`-ed up, the test has no chance to reset the services for testing.
* a global look-up then the service returned is global as well (but resetting is easier, since
only one global variable exists to be reset).
The class above is hard to test since we have to change the global state:
Notice how by nesting the `describe` calls and being descriptive when calling them with strings, the
test is very clear. It documents exactly what it is testing, and at a glance you can quickly see
what is happening. Now let's add the test for when the password is less than three characters, which
should see `$scope.strength` set to "weak":
```js
var oldServiceLocator = global.serviceLocator;
global.serviceLocator.set('xhr', function mockXHR() {});
var myClass = new MyClass();
myClass.doWork();
// assert that mockXHR got called with the right arguments
global.serviceLocator = oldServiceLocator; // if you forget this bad things will happen
describe('PasswordController', function() {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars', function() {
var $scope = {};
var controller = $controller('PasswordController', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
it('sets the strength to "weak" if the password length <3 chars', function() {
var $scope = {};
var controller = $controller('PasswordController', { $scope: $scope });
$scope.password = 'a';
$scope.grade();
expect($scope.strength).toEqual('weak');
});
});
});
```
### Passing in Dependencies:
Last, the dependency can be passed in.
Now we have two tests, but notice the duplication between the tests. Both have to
create the `$scope` variable and create the controller. As we add new tests, this duplication is
only going to get worse. Thankfully, Jasmine provides `beforeEach`, which lets us run a function
before each individual test. Let's see how that would tidy up our tests:
```js
function MyClass(xhr) {
this.doWork = function() {
xhr({
method:'...',
url:'...',
complete:function(response){ ... }
})
}
describe('PasswordController', function() {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
describe('$scope.grade', function() {
var $scope, controller;
beforeEach(function() {
$scope = {};
controller = $controller('PasswordController', { $scope: $scope });
});
it('sets the strength to "strong" if the password length is >8 chars', function() {
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
it('sets the strength to "weak" if the password length <3 chars', function() {
$scope.password = 'a';
$scope.grade();
expect($scope.strength).toEqual('weak');
});
});
});
```
This is the preferred method since the code makes no assumptions about the origin of `xhr` and cares
instead about whoever created the class responsible for passing it in. Since the creator of the
class should be different code than the user of the class, it separates the responsibility of
creation from the logic. This is dependency-injection in a nutshell.
We've moved the duplication out and into the `beforeEach` block. Each individual test now
only contains the code specific to that test, and not code that is general across all tests. As you
expand your tests, keep an eye out for locations where you can use `beforeEach` to tidy up tests.
`beforeEach` isn't the only function of this sort that Jasmine provides, and the [documentation
lists the others](http://jasmine.github.io/1.3/introduction.html#section-Setup_and_Teardown).
The class above is testable, since in the test we can write:
```js
function xhrMock(args) {...}
var myClass = new MyClass(xhrMock);
myClass.doWork();
// assert that xhrMock got called with the right arguments
```
Notice that no global variables were harmed in the writing of this test.
Angular comes with {@link di dependency injection} built-in, making the right thing
easy to do, but you still need to do it if you wish to take advantage of the testability story.
## Controllers
What makes each application unique is its logic, and the logic is what we would like to test. If the logic
for your application contains DOM manipulation, it will be hard to test. See the example
below:
```js
function PasswordCtrl() {
// get references to DOM elements
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
msg.removeClass(strength);
var pwd = input.val();
password.text(pwd);
if (pwd.length > 8) {
strength = 'strong';
} else if (pwd.length > 3) {
strength = 'medium';
} else {
strength = 'weak';
}
msg
.addClass(strength)
.text(strength);
}
}
```
The code above is problematic from a testability point of view since it requires your test to have the right kind
of DOM present when the code executes. The test would look like this:
```js
var input = $('<input type="text"/>');
var span = $('<span>');
$('body').html('<div class="ex1">')
.find('div')
.append(input)
.append(span);
var pc = new PasswordCtrl();
input.val('abc');
pc.grade();
expect(span.text()).toEqual('weak');
$('body').empty();
```
In angular the controllers are strictly separated from the DOM manipulation logic and this results in
a much easier testability story as the following example shows:
```js
function PasswordCtrl($scope) {
$scope.password = '';
$scope.grade = function() {
var size = $scope.password.length;
if (size > 8) {
$scope.strength = 'strong';
} else if (size > 3) {
$scope.strength = 'medium';
} else {
$scope.strength = 'weak';
}
};
}
```
and the test is straight forward:
```js
var $scope = {};
var pc = $controller('PasswordCtrl', { $scope: $scope });
$scope.password = 'abc';
$scope.grade();
expect($scope.strength).toEqual('weak');
```
Notice that the test is not only much shorter, it is also easier to follow what is happening. We say
that such a test tells a story, rather than asserting random bits which don't seem to be related.
## Filters
## Testing Filters
{@link ng.$filterProvider Filters} are functions which transform the data into a user readable
format. They are important because they remove the formatting responsibility from the application
logic, further simplifying the application logic.
@@ -273,12 +259,20 @@ myModule.filter('length', function() {
}
});
var length = $filter('length');
expect(length(null)).toEqual(0);
expect(length('abc')).toEqual(3);
describe('length filter', function() {
it('returns 0 when given null', function() {
var length = $filter('length');
expect(length(null)).toEqual(0);
});
it('returns the correct value when given a string of chars', function() {
var length = $filter('length');
expect(length('abc')).toEqual(3);
});
});
```
## Directives
## Testing Directives
Directives in angular are responsible for encapsulating complex functionality within custom HTML tags,
attributes, classes or comments. Unit tests are very important for directives because the components
you create with directives may be used throughout your application and in many different contexts.
@@ -309,28 +303,28 @@ verify this functionality. Note that the expression `{{1 + 1}}` times will also
```js
describe('Unit testing great quotes', function() {
var $compile;
var $rootScope;
var $compile,
$rootScope;
// Load the myApp module, which contains the directive
beforeEach(module('myApp'));
// Load the myApp module, which contains the directive
beforeEach(module('myApp'));
// Store references to $rootScope and $compile
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
// Store references to $rootScope and $compile
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Replaces the element with the appropriate content', function() {
// Compile a piece of HTML containing the directive
var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
it('Replaces the element with the appropriate content', function() {
// Compile a piece of HTML containing the directive
var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
});
```
@@ -431,4 +425,3 @@ Otherwise you may run into issues if the test directory hierarchy differs from t
## Sample project
See the [angular-seed](https://github.com/angular/angular-seed) project for an example.
+1 -1
View File
@@ -31,7 +31,7 @@ development web server, run tests, and generate distributable files. Depending o
pre-packaged bundle.
* [Java](http://www.java.com): We minify JavaScript using our
[Closure Tools](https://developers.google.com/closure/) jar. Make sure you have Java (version 6 or higher) installed
[Closure Tools](https://developers.google.com/closure/) jar. Make sure you have Java (version 7 or higher) installed
and included in your [PATH](http://docs.oracle.com/javase/tutorial/essential/environment/paths.html) variable.
* [Grunt](http://gruntjs.com): We use Grunt as our build system. Install the grunt command-line tool globally with:
+1 -1
View File
@@ -50,7 +50,7 @@ Yes. See instructions in {@link downloading}.
### What browsers does Angular work with?
We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera,
We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera 15,
IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). See {@link guide/ie Internet
Explorer Compatibility} for more details in supporting legacy IE browsers.
+2 -1
View File
@@ -110,8 +110,9 @@ suggested solution is to also install the `nodejs-legacy` apt package, which ren
`nodejs`.
```
apt-get install nodejs-legacy
apt-get install nodejs-legacy npm
nodejs --version
npm --version
```
+1 -1
View File
@@ -40,7 +40,7 @@ __`app/index.html`:__
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
+1 -1
View File
@@ -120,7 +120,7 @@ really is that easy to set up any functional, readable, end-to-end test.
### Running End to End Tests with Protractor
Even though the syntax of this test looks very much like our controller unit test written with
Jasmine, the end-to-end test uses APIs of [Protractor](https://github.com/angular/protractor). Read
about the Protractor APIs at https://github.com/angular/protractor/blob/master/docs/api.md.
about the Protractor APIs at http://angular.github.io/protractor/#/api.
Much like Karma is the test runner for unit tests, we use Protractor to run end-to-end tests.
Try it with `npm run protractor`. End-to-end tests are slow, so unlike with unit tests, Protractor
+2 -2
View File
@@ -150,7 +150,7 @@ __`test/e2e/scenarios.js`:__
...
it('should be possible to control phone order via the drop down select box', function() {
var phoneNameColumn = element.all(by.repeater('phone in phones').column('{{phone.name}}'));
var phoneNameColumn = element.all(by.repeater('phone in phones').column('phone.name'));
var query = element(by.model('query'));
function getNames() {
@@ -182,7 +182,7 @@ You can now rerun `npm run protractor` to see the tests run.
# Experiments
* In the `PhoneListCtrl` controller, remove the statement that sets the `orderProp` value and
you'll see that Angular will temporarily add a new "unknown" option to the drop-down list and the
you'll see that Angular will temporarily add a new blank ("unknown") option to the drop-down list and the
ordering will default to unordered/natural order.
* Add an `{{orderProp}}` binding into the `index.html` template to display its current value as
+5 -3
View File
@@ -236,7 +236,9 @@ the response is received:
```
* We flush the request queue in the browser by calling `$httpBackend.flush()`. This causes the
promise returned by the `$http` service to be resolved with the trained response.
promise returned by the `$http` service to be resolved with the trained response. See
'Flushing HTTP requests' in the {@link ngMock.$httpBackend mock $httpBackend} documentation for
a full explanation of why this is necessary.
* We make the assertions, verifying that the phone model now exists on the scope.
@@ -256,8 +258,8 @@ You should now see the following output in the Karma tab:
# Experiments
* At the bottom of `index.html`, add a `<pre>{{phones | json}}</pre>` binding to see the list of phones
displayed in json format.
* At the bottom of `index.html`, add a `<pre>{{phones | filter:query | orderBy:orderProp | json}}</pre>`
binding to see the list of phones displayed in json format.
* In the `PhoneListCtrl` controller, pre-process the http response by limiting the number of phones
to the first 5 in the list. Use the following code in the `$http` callback:
+1 -1
View File
@@ -9,7 +9,7 @@
In this step, you will learn how to create a layout template and how to build an app that has
multiple views by adding routing, using an Angular module called 'ngRoute'.
* When you now navigate to `app/index.html`, you are redirected to `app/index.html#/phones`
* When you now navigate to `app/index.html`, you are redirected to `app/index.html/#/phones`
and the phone list appears in the browser.
* When you click on a phone link the url changes to one specific to that phone and the stub of a
phone detail page is displayed.
+1 -1
View File
@@ -184,7 +184,7 @@ You can now rerun `npm run protractor` to see the tests run.
# Experiments
* Using the [Protractor API](https://github.com/angular/protractor/blob/master/docs/api.md),
* Using the [Protractor API](http://angular.github.io/protractor/#/api),
write a test that verifies that we display 4 thumbnail images on the Nexus S details page.
+2 -2
View File
@@ -171,7 +171,7 @@ we require, so in these cases, we can add a callback to process the server respo
## Test
Because we're now using the {@link ngResource ngResource} module, it's necessary to also need to
Because we're now using the {@link ngResource ngResource} module, it's necessary to
update the Karma config file with angular-resource so the new tests will pass.
__`test/karma.conf.js`:__
@@ -276,7 +276,7 @@ describe('PhoneCat controllers', function() {
You should now see the following output in the Karma tab:
<pre>Chrome 22.0: Executed 4 of 4 SUCCESS (0.038 secs / 0.01 secs)</pre>
<pre>Chrome 22.0: Executed 5 of 5 SUCCESS (0.038 secs / 0.01 secs)</pre>
# Summary
+4 -3
View File
@@ -9,8 +9,8 @@
In this final step, we will enhance our phonecat web application by attaching CSS and JavaScript
animations on top of the template code we created before.
* Used the `ngAnimate` to enable animations throughout the application.
* Common `ng` directives automatically trigger hooks for animations to tap into.
* We now use the `ngAnimate` module to enable animations throughout the application.
* We also use common `ng` directives to automatically trigger hooks for animations to tap into.
* When an animation is found then the animation will run in between the standard DOM operation that
is being issued on the element at the given time (e.g. inserting and removing nodes on
{@link ngRepeat `ngRepeat`} or adding and removing classes on
@@ -369,7 +369,8 @@ occur whenever the CSS class itself changes.
Whenever a new phone thumbnail is selected, the state changes and the `.active` CSS class is added
to the matching profile image and the animation plays.
Let's get started and tweak our HTML code on the `phone-detail.html` page first:
Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
have changed the way we display our large image:
__`app/partials/phone-detail.html`.__
+2 -2
View File
@@ -63,8 +63,8 @@ gulp.task('build-app', function() {
gulp.task('assets', ['bower'], function() {
var JS_EXT = /\.js$/;
return merge(
gulp.src([assets])
.pipe(gulp.dest(outputFolder)),
gulp.src(['img/**/*']).pipe(gulp.dest(outputFolder + '/img')),
gulp.src([assets]).pipe(gulp.dest(outputFolder)),
gulp.src([assets])
.pipe(foreach(function(stream, file) {
if (JS_EXT.test(file.relative)) {
Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

-41
View File
@@ -1,41 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0" y="0" width="687px" height="176px" viewBox="0 0 687 176" overflow="visible" enable-background="new 0 0 687 176"
xml:space="preserve">
<defs>
</defs>
<path fill="#FFFFFF" d="M179.011,125.328V54.527h9.158l43.322,57.035V54.527h8.666v70.801h-9.158l-43.326-57.536v57.536H179.011z
M179.011,125.328"/>
<path fill="#FFFFFF" d="M310.46,122.554c-5.708,2.182-11.864,3.269-18.467,3.269c-25.644,0-38.469-12.294-38.469-36.887
c0-23.27,12.378-34.908,37.134-34.908c7.096,0,13.7,0.994,19.802,2.976v7.921c-6.103-2.311-12.378-3.468-18.813-3.468
c-19.306,0-28.96,9.162-28.96,27.479c0,19.639,9.504,29.463,28.517,29.463c3.034,0,6.404-0.396,10.103-1.193V93.145h9.154V122.554z
M310.46,122.554"/>
<path fill="#FFFFFF" d="M325.067,97.996V54.523h9.154v43.473c0,13.598,6.768,20.4,20.303,20.4c13.531,0,20.301-6.803,20.301-20.4
V54.523h9.158v43.473c0,18.556-9.82,27.825-29.459,27.825C334.886,125.821,325.067,116.552,325.067,97.996L325.067,97.996z
M325.067,97.996"/>
<path fill="#FFFFFF" d="M409.48,54.523v63.376h37.037v7.425h-46.191V54.523H409.48z M409.48,54.523"/>
<path fill="#FFFFFF" d="M459.736,125.327h-9.504l35.201-80.146l35.199,80.146h-10.15l-9.158-22.282h-23.418l2.527-7.424h17.82
l-13.217-32.088L459.736,125.327z M459.736,125.327"/>
<path fill="#FFFFFF" d="M530.289,125.328V54.527h30.203c13.469,0,20.197,5.659,20.197,16.982c0,9.207-6.578,16.028-19.75,20.445
l24.309,33.374h-12.086l-22.521-31.835v-5.992c13.531-2.151,20.301-7.344,20.301-15.598c0-6.533-3.766-9.801-11.293-9.801h-20.201
v63.226H530.289z M530.289,125.328"/>
<path fill="#B52E31" d="M619.561,54.523v50.405c0,13.603-8.006,20.396-24.016,20.396V117.9c9.902,0,14.857-4.329,14.857-12.973
V54.523H619.561z M619.561,54.523"/>
<path fill="#B52E31" d="M635.896,122.849v-8.418c7.428,2.639,15.447,3.965,24.064,3.965c12.178,0,18.271-4.457,18.271-13.372
c0-7.584-4.492-11.385-13.469-11.385h-9.113c-14.818,0-22.234-6.435-22.234-19.31c0-13.531,9.492-20.303,28.479-20.303
c8.25,0,15.922,0.998,23.021,2.976v8.418c-7.1-2.644-14.771-3.965-23.021-3.965c-12.875,0-19.311,4.293-19.311,12.875
c0,7.588,4.352,11.385,13.066,11.385h9.113c15.08,0,22.627,6.439,22.627,19.31c0,13.864-9.141,20.796-27.43,20.796
C651.344,125.819,643.324,124.826,635.896,122.849L635.896,122.849z M635.896,122.849"/>
<path fill="#B2B2B2" d="M82.688,0L0,29.1l13.066,108.335l69.71,38.314l70.069-38.834l13.062-108.331L82.688,0z M82.688,0"/>
<path fill="#B52E31" d="M157.66,34.846L82.496,9.214v157.381l62.991-34.861L157.66,34.846z M157.66,34.846"/>
<path fill="#E23237" d="M9.279,35.308l11.196,96.889l62.019,34.398V9.211L9.279,35.308z M9.279,35.308"/>
<path fill="#F2F2F2" d="M99.918,87.493L82.632,51.396L67.415,87.493H99.918z M106.508,102.672h-45.82l-10.251,25.64l-19.067,0.352
L82.496,14.929l52.908,113.734h-17.673L106.508,102.672z M106.508,102.672"/>
<path fill="#B2B2B2" d="M82.496,14.929l0.136,36.467l17.268,36.125H82.534l-0.039,15.127l24.012,0.023l11.223,25.996l18.245,0.339
L82.496,14.929z M82.496,14.929"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 212 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

+2 -2
View File
@@ -267,7 +267,7 @@ goog.i18n.currency.adjustPrecision = function(pattern, currencyCode) {
* 18: two decimals precision (2), currency sign last (16), no space (0)
* 50: two decimals precision (2), currency sign last (16), space (32)
*
* @type {!Object.<!Array>}
* @const {!Object<!Array<?>>}
*/
goog.i18n.currency.CurrencyInfo = {
'AED': [2, 'dh', '\u062f.\u0625.', 'DH'],
@@ -334,7 +334,7 @@ goog.i18n.currency.CurrencyInfo = {
/**
* Tier 2 currency information.
* @type {!Object.<!Array>}
* @const {!Object<!Array<?>>}
*/
goog.i18n.currency.CurrencyInfoTier2 = {
'AFN': [48, 'Af.', 'AFN'],
File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More