This changes the way option elements are generated when the ngOption collection changes.
Previously, we would re-use option elements when possible (updating their text and
label). Now, we first remove all currently displayed options and the create new options for the
collection. The new options are first appended to a documentFragment, which is in the end appended
to the selectElement.
Using documentFragment improves render performance in IE with large option collections
(> 100 elements) considerably.
Creating new options from scratch fixes issues in IE where the select would become unresponsive
to user input.
Fixes#13607Fixes#13239Fixes#12076
This reverts commit 5e37b2a7fd.
Eagerly loading `$route`, could break tests, because it might request the root or default route
template (something `$httpBackend` would know nothing about).
It will be re-applied for `v1.6.x`, with a breaking change notice and possibly a way to disable
the feature is tests.
Fixes#14337
Currently, custom annotations are copied from the CDO onto the controller constructor.
Using `noop()` when no controller has been specified, pollutes it with custom annotations and
makes one component's annotations available to all other components that have `noop()` as their
controller.
Fixes#14391Closes#14402
Add support for collecting current stack trace information in browsers
(e.g. IE10+, PhantomJS) that do not automatically store the current stack trace
information in a newly created `Error` object's `stack` property, but
only add it there once the `Error` gets thrown.
The original implementation works fine in Firefox & Chrome, but fails on IE10+
and PhantomJS where it, for example, breaks Karma's error reporting in cases
when an exception is thrown in a test like the following:
```
it('the holy crusade', inject(function() {
var x = {};
x.holyGrail();
}));
```
In this case, the ngMock `inject()` implementation would incorrectly add the
word `undefined` at the end of the collected error stack trace information,
thus causing the main error description to be reported back to Karma as
`undefined`.
The added test makes sure this functionality:
- works as expected in browsers supporting JavaScript stack trace
collection, e.g. Chrome, Firefox, IE10+, Opera & PhantomJS
- does not add any bogus stack track information in browsers that do
not support JavaScript stack trace collection, e.g. IE9
Fixes#13591Closes#13592Closes#13593
Jasmine 2.4 (maybe earlier) does not support returning an array containing both the "normal" and the
negative error messages. It will always concatenate them.
Closes#14275
The fix for removing the event callbacks on destroy introduced in
ce7f400011 removed the events too early, so that the event callbacks
for the "close" phase in "leave" animations were not called.
This commit fixes the behavior so that the event callbacks are only removed during on('$destroy')
when no animation is currently active on the element. When an animation is active, the event callbacks
will be removed after all callbacks have run, and if the element has no parent (has been removed from
the DOM).
Closes#14321
Since commit a3a7afd3aa, animations are not run
when the document is hidden (only their structural or class change effects are executed).
However, some libraries rely on the $animate.on() callbacks to be called even when no actual animation
runs.
This commit restores the behavior for the ngAnimate.$animate functions.
Note that callbacks still won't be called if animations are disabled, because this would be be a potential
breaking change, as some applications might rely on this implementation.
Fixes#14120
Add additional line from example which demonstrates using the snake cased attribute binding in
parent component template.
Add note clarifying camelCase to snake-case requirement to use the Output binding callback feature.
Closes#14365
Updated docs to reflect that response data can either be an array, object _or_ a string
Technically, response data can be anything that can be handled by angular.copy,
but since string and JSON data is most commonly mocked, the main types are sufficient.
Closes#14346
Due to the way that we instantiate controllers, the `$onChanges` hook
was not always available at the time we were trying to trigger the initial
call to this hook. For instance, if the hook was actually defined inside
the constructor function.
This commit fixes that but also fixes the fact that the initial call was
being made in the postDigest anyway, which was incorrect because the
it should have been made before the `$onInit` call.
Closes#14355Closes#14359
When ngModel is set to a value that matches a disabled option, ngOptions will now select the option
in the select element, which will set select.val() to the option hash value and visually
show the option value / label as selected in the select box. Previously, disabled
options forced the unknown value.
The previous behavior is inconsistent with both default HTML behavior and select with
ngModel but without ngOptions. Both allow disabled values to be selected programmatically.
A common use case for this behavior is an option that was previously valid, but has
been disabled, and cannot be selected again.
This commit removes a duplicate test, and all other tests that previously checked that disabled
options are not set have been adjusted to the ensure the opposite.
Fixes#12756
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes#14127Closes#14030Closes#14020Closes#13991Closes#14302
When multiple animations on the same element are queued before a $digest passes,
the animator tries to create as few actual animations as possible by joining / canceling
redundant animations. Class-based animations for example are cancelled when the classes that
are added and removed are the same, and the result is no class-change. This however must only
happen if there's no structural animation currently queued.
Fixes#14249
Under specific circumstances, ngMessages would go into an infinite loop and crash the
browser / page:
- At least two ngMessage elements are wrapped inside another element (e.g. ngTransclude)
- The first message is currently visible
- The first message is removed (e.g. when the whole ngMessages element is removed by an ngIf)
When a message is removed, it looks for a previous message - in this specific case it would misidentify
the second message for a previous message, which would then cause the first message to be marked as the
second message's next message, resulting in an infinite loop, and crash.
This fix ensures that when searching for previous messages, ngMessage walks the DOM in a way so
that messages that come after the current message are never identified as previous messages.
This commit also detaches and destroys all child ngMessage elements when the ngMessages element is
destroyed, which should improve performance slightly.
Fixes#14183Closes#14242
In the version of V8 used in Chrome < 50, the parent of template nodes for
`transclude: "element"` directives would be improperly garbage collected
despite still having been referenced via `parentNode`.
This bug surfaced due to the introduction of lazy transclusion (652b83e),
and appears under certain circumstances when using directive start and end elements.
It should be removed some time after Chrome 50 has been released.
Fixes#14041Closes#14286
Although `window.history` is present in the context of Chrome Packaged Apps, it is not allowed to
access `window.history.pushState` or `window.history.state`, resulting in errors when trying to
"sniff" history support.
This commit fixes it by detecting a Chrome Packaged App (through the presence of
`window.chrome.app.runtime`). Note that `window.chrome.app` is present in the context of "normal"
webpages as well, but it doesn't have the `runtime` property, which is only available to packaged
apps (e.g. see https://developer.chrome.com/apps/api_index).
(It also also contains some style changes for making the structure and layout of `$sniffer` tests
more consistent.)
Fixes#11932Closes#13945
By using `>=` when comparing the number length to `lgSize`, we'll provide the correct value, when
formatting numbers with different `lgSize` than `gSize`.
Fixes#14289Closes#14290
Probably due to implementation differences in browsers for pre-DST period (see
https://github.com/angular/angular.js/issues/5017 and especially
https://github.com/angular/angular.js/issues/5017#issuecomment-90775226 for context), some
`TzDate` tests had different behavior on different Timezones/Regions (e.g. failed in Australia,
which started to observe DST in 1971).
Since the used year (`1970`) didn't have any particular significance, this commit fixes the issue
by using a year that is more consistently handled by browsers (`2000`).
Fixes#14272Closes#14285
Moved the `v1.5.1` section above the `v1.4.10` one, so that it is right below the `v1.5.2` section
for easier reference. Also removed an empty "Breaking Changes" sub-section.
Closes#14283
The test for this didn't actually test the listener removal. The addClass animation after
the element removal didn't start because the enter animation was still in progress.
This commit reverts 7617c08da6 which was accidentally
merged into 1.5.x (by @petebacondarwin in a moment of rebase madness) despite
it containing a breaking change.
Highlights:
New mechanism to run async tests as Jasmine 2 removed `runs`, `waits` and `waitsFor`
The functions `iit`, `ddescribe` and `tthey` were renamed `fit`, `fdescribe` and
`fthey` as the originals came from Karma, Karma no longer bundles Jasmine and the
new function name comes from Jasmine.
Closes#14226
Component Router should come after the menu topic Components as Components should be understood first
before Component Routers. This made it easier to read the Component Routers topic.
Closes#14214
When an error message contains an HTML string (e.g. `$location:nobase` containing `<base>`), it was
interpreted as a literal HTML element, instead of text. Error messages are not expected to render
as HTML, but we still need to use `.html()` in `errorDisplay`, so that the links created by
`errorLinkFilter` are properly displayed.
This commit solves this issue by replacing `<`/`>` with `<`/`>`.
Related to #14016.
We don't set selected property / attribute on options that are already selected.
That happens for example if the browser has automatically selected the first
option in a select. In that case, the selected property is set automatically, but
the selected attribute is not. This doesn't impact the functionality of the select,
but it can be problematic if option elements are selected with `option[selected]` in tests.
Closes#14115Closes#14125
docs(guide/Components): add missing $ctrl
The new component example does not work as is. It needs a missing reference to $ctrl.
Closes#14138Closes#14143
When debugInfoEnabled is `false` when comments generated by transclusions, ngIf,
ngRepeat and ngSwitch will not contain any information about the directive nor
the expression associated with it.
Closes: #8722
During it's linking phase, `ngView` relies on the info provided in `$route.current` for
instantiating the initial view. `$route.current` is set in the callback of a listener to
`$locationChangeSuccess`, which is registered during the instantiation of the `$route` service.
Thus, it is crucial that the `$route` service is instantiated before the initial
`$locationChangeSuccess` is fired. Since `ngView` declares `$route` as a dependency, the service is
instantiated in time if `ngView` is present during the initial load of the page.
Yet, in cases where `ngView` is included in a template that is loaded asynchronously (e.g. in
another directive's template), the directive factory might not be called soon enough for `$route`
to be instantiated before the initial `$locationChangeSuccess` event is fired.
This commit fixes it, by always instantiating `$route` up front, during the initialization phase.
Fixes#1213Fixes#6812Closes#14088
Previously, `angular-mocks` was calling `$rootScope.$destroy()` after each test as part of it's
cleaning up, assuming that it was always available. This could break if `$rootScope` was mocked
and the mocked version didn't provide the `$destroy()` method.
This commit prevents the error by first checking that `$rootScope.$destroy` is present.
Fixes#14106Closes#14107
Starting with 88bb551, `ngMock` will attach the `$injector` to the `$rootElement`, but will never
clean it up, resulting in a memory leak. Since a new `$rootElement` is created for every test,
this leak causes Karma to crash on large test-suites.
The problem was not detected by our internal tests, because we do our own clean-up in
`testabilityPatch.js`.
88bb551 was revert with 1b8590a.
This commit incorporates the changes from 88bb551 and prevents the memory leak, by cleaning up all
data attached to `$rootElement` after each test.
Fixes#14094Closes#14098
Included changes:
* Point out that only GET & JSONP requests are cached.
* Explain that the URL+search params are used as cache keys (headers not considered).
* Add note about cache-control headers on response not affecting Angular caching.
* Mention `$httpProvider.defaults.cache` (in addition to `$http.defaults.cache`).
* Clear up how `defaults.cache` and `config.cache` are taken into account for determining the
caching behavior for each request.
Fixes#11101Closes#13003
Although `copy()` does not need to (and never will) support all kinds of objects, there is a
(not uncommon) usecase for supporting `Blob` objects:
`ngMock`'s `$httpBackend` will return a copy of the response data (so that changes in one test won't
affect others). Since returning `Blob` objects in response to HTTP requests is a valid usecase and
since `ngMocks`'s `$httpBackend` will use `copy()` to create a copy of that data, it is reasonable
to support `Blob` objects.
(I didn't run any benchmarks, but the additional check for the type of the copied element should
have negligible impact, compared to the other stuff that `copy()` is doing.)
Fixes#9669Closes#14064
The `ngMockE2E` `$httpBackend` has a mechanism to allow requests to pass through, if one wants to
send a real HTTP request instead of mocking. The specified `responseType` of the request was never
passed through to the "real" `$httpBackend` (of the `ng` module), resulting in it being effectively
ignored.
Fixes#5415Closes#5783
When Angular is loaded more than once (by including the script multiple times),
a warning is logged in the console. IE9 only makes the console available when
the dev tools are open, so before this fix, the browser would throw an error
Note that Protractor doesn't actually support IE9.
BREAKING CHANGE:
Text nodes at the root of transcluded content will no longer be wrapped into <span>
elements. If there is a need for this <span> element to be present, then this should
be added to the content to be transcluded.
Before:
```html
<div directive-that-will-transclude-the-content>
I expect this content to e wrapped
</div>
```
After:
```html
<div directive-that-will-transclude-the-content>
<span>I expect this content to e wrapped</span>
</div>
```
Previously, the date-related regular expressions only matched years with no more than 4 digits.
This commit adds support for years with more than 4 digits. It also resolves an ambiguity in
`ISO_DATE_REGEXP` by matching the whole string (when it previosuly allowed extra characters around
the date string).
Fixes#13735Closes#13905
The `parentNode` property is well supported between all browsers. Since
no other functionality was required here other than traversing upwards
using `.parent()`, we can use the DOM API directly.
Closes: #13879
Unlike jqLite, jquery scrapes the attributes of an element looking for
data- keys that match the requested property. When many elements are
being animated due to something like `ngRepeat` unrolling within one
digest cycle, the amount of time spent in that one function quickly adds
up.
By changing our API to use the lower level data API, we can cut the time
spent in this function by half when jQuery is loaded.
- Note that bootstrapping on elements with transclusion directives
is dangerous and not recommended.
- group info on limitations, and add them to the guide
Closes#11421Closes#13572Closes#12583
- how to enable / disable animations
Closes#8812
- how to handle conflicts with existing animations
Closes#8033Closes#11820
- what happens on boostrap / how to enable animations on bootstrap
BREAKING CHANGE: Where appropriate, ngAria now applies ARIA to custom controls only, not native inputs. Because of this, support for `aria-multiline` on textareas has been removed.
New support added for ngValue, ngChecked, and ngRequired, along with updated documentation.
Closes#13078Closes#11374Closes#11830Closes#13483
This change allows the developer to bind an isolate scope / controller property
to an expression, using a `<` binding, in such a way that if the value of the
expression changes, the scope/controller property is updated but not the
converse.
The binding is implemented as a single simple watch, which can also provide
performance benefits over two way bindings.
Closes#13928Closes#13854Closes#12835Closes#13900
Previous version emphasised "gaining user's private data".
While this perfectly describes JSON vulnerability (which is based on XSRF),
data theft suits XSS more.
Pure XSRF is more about performing requests that have side effects.
Closes#13901
When `Date.parse`-ing a date string, IE and Edge don't recognize the timezone offset in the format
`+HH:mm` (but only without the `:`). According to [the spec][1], the timezone offset should
contain `:`. The [ISO 8601 Standard][2] allows both forms (with and without `:`).
Although the `Date` implementation in JavaScript does not 100% follow the ISO 8601 Standard (it's
just _based on it_), all other browsers seem to recognize both forms as well.
[1]: http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15
[2]: https://en.wikipedia.org/wiki/ISO_8601#Time_offsets_from_UTCFixes#13880Closes#13887
The wrong field name was being passed into the `$ctrl.update` call in `heroDetail.html` resulting
in the wrong behavior (`name` was being updated instead of `location`)
Closes#13890
Under specific circumstances (e.g. adding options via a directive with `replace: true` and a
structural directive in its template), an error occurred when trying to call `hasAttribute()` on a
comment node (which doesn't support that method).
This commit fixes it by filtering out comment nodes in the `addOption()` method.
Fixes#13874Closes#13878
Previously, ngAnimateChildren would set the data on the element
in an $observe listener, which means the data was available after one digest happend.
This is too late when the element is animated immediately after compilation, as happens with ngIf.
Now the data is also set right in the linking function.
Fixes#13865Closes#13876
- introduce components
- component types are based on Angular2 docs
- conceptually, we promote parent -> child data flow and clear inputs and outputs
- the info about multi-transclusion / requiring controllers, and components as route templates
has been moved from the component docs to the guide
This commit deprecates the ngClick directive from the ngTouch module.
Additionally, it disables it by default. It can be enabled in the new $touchProvider with
the $touchProvider.ngClickOverrideEnabled() method.
The directive was conceived to remove the 300ms delay
for click events on mobile browsers, by sending a synthetic click event on touchstart.
It also tried to make sure that the original click event that the browser sends after 300ms
was "busted", so that no redundant "ghost-clicks" appear.
There are various reasons why the directive is being deprecated.
- "This is an ugly, terrible hack!" (says so in the source)
- It is plagued by various bugs that are hard to fix / test for all platforms (see below)
- Simply including ngTouch activates the ngClick override, which means even if you simply want
to use ngSwipe, you may break parts of your app
- There exist alternatives for removing the 300ms delay, that can be used very well with Angular:
[FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/)
(There's also hammer.js for touch events / gestures)
- The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay
when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the
`touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally,
since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be
found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/
Note that this change does not affect the `ngSwipe` directive.
Issues with interactive elements (input, a etc.) when parent element has ngClick:
Closes#4030Closes#5307Closes#6001Closes#6432Closes#7231Closes#11358Closes#12082Closes#12153Closes#12392Closes#12545Closes#12867Closes#13213Closes#13558
Other issues:
- incorrect event order
- incorrect event propagation
- ghost-clicks / failing clickbusting with corner cases
- browser specific bugs
- et al.
Closes#3296Closes#3347Closes#3447Closes#3999Closes#4428Closes#6251Closes#6330Closes#7134Closes#7935Closes#9724Closes#9744Closes#9872Closes#10211Closes#10366Closes#10918Closes#11197Closes#11261Closes#11342Closes#11577Closes#12150Closes#12317Closes#12455Closes#12734Closes#13122Closes#13272Closes#13447
BREAKING CHANGE:
The `ngClick` override directive from the `ngTouch` module is **deprecated and disabled by default**.
This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired.
If you rely on this directive, you can still enable it with the `$touchProvider.ngClickOverrideEnabled()`method:
```js
angular.module('myApp').config(function($touchProvider) {
$touchProvider.ngClickOverrideEnabled(true);
});
```
For migration, we recommend using [FastClick](https://github.com/ftlabs/fastclick).
Also note that modern browsers remove the 300ms delay under some circumstances:
- Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set
- Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation`
- Since iOs 8, Safari removes the delay on so-called "slow taps"
See this [article by Telerik](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/) for more info on the topic.
Note that this change does not affect the `ngSwipe` directive.
Previously, css animations would not cancel the timeout when the
animation ends normally (calling end explicitly / transitionEnd event).
This meant that the timeout callback fn was always called after 150% of
the animation time was over. Since the animation was already closed at this
point, it would not do any work twice, but simply remove the timer data
from the element.
This commit changes the behavior to cancel the timeout and remove the data
when it is found during animation closing.
Closes#13787
The change is only to concepts.graffle/data.plist to fix 'World' spelling.
Another PR, #13724, already fixed the actual image.
Closes#13704Closes#13734
When running an expression with expensive checks, there is a call to `$eval` or `$evalAsync`
then that expression is also evaluated using expensive checks
Closes: #13850
Previously, if either of the start/end interpolation symbols remained unchanged (i.e. `{{` or `}}`),
then directive templates would not be denormalized properly. Changing only one of the start/end
symbols (but not both) is an uncommon but legitimate usecase.
Closes#13848
Old behavior: actions can be either cancellable or have a numeric timeout.
When having both defined, cancellable was ignored.
With this commit: it's possible for actions to have both cancellable:true
and numeric timeout defined.
Example usage:
```js
var Post = $resource('/posts/:id', {id: '@id'}, {
get: {
method: 'GET',
cancellable: true,
timeout: 10000
}
});
var currentPost = Post.get({id: 1});
...
// the next request can cancel the previous one
currentPost.$cancelRequest();
currentPost = Post.get({id: 2});
// any of those requests will also timeout, if the response
// doesn't come within 10 seconds
```
Closes#13824
Most systems use *IETF language tag* codes which are typically a combination
of the ISO 639 language code and ISO 3166-1 country code with an underscore
or hyphen delimiter. For example `en_US`, `en_AU`, etc.
Whilst the `$locale.id` comes close, the lowercase format makes it impossible
to transform to an IETF tag reliably. For example, it would be impossible
to deduce `en_Dsrt_US` from `en-dsrt-us`.
Closes#13390
This change edits syntax for code consistency.
It removes whitespace to match the style of the rest of the code,
and changes double quotes to single quotes to conform with
Google's JavaScript Style Guide.
Closes#12889
The unknown provider error often happens when code is minified and one
did not use the correct syntax that supports minification. It's
frustrating to have to hunt for a bug in minified code, so adding the
simple hint that `ngStrictDi` will tell you what is wrong in the original
code will save you quite some trouble.
Closes#12717
Prior to this fix the addition and removal of a CSS class via
ngAnimate would cause flicker effects because $animate was unable
to keep track of the CSS classes once they were applied to the
element. This fix ensures that ngAnimate always keeps a reference
to the classes in the currently running animation so that cancelling
works accordingly.
The commit also adds a test for a previously untested animation merge path.
Closes#10156Closes#13822
In the description of the example, you use `element` to refer to the container parameter and
`listenerFn` to refer to the callback parameter.
Closes#12716
If directives are required through an object hash, rather than a string or array,
the required directives' controllers are bound to the current directive's controller
in much the same way as the properties are bound to using `bindToController`.
This only happens if `bindToController` is truthy.
The binding is done after the controller has been constructed and all the bindings
are guaranteed to be complete by the time the controller's `$onInit` method
is called.
This change makes it much simpler to access require controllers without the
need for manually wiring them up in link functions. In particular this
enables support for `require` in directives defined using `mod.component()`
Closes#6040Closes#5893Closes#13763
This provides an elegant alternative to the array form of the `require`
property but also helps to support binding of `require`d controllers
to directive controllers.
Closes#8401Closes#13763
This commit positively affects performance in two main ways:
1, When wrapping text nodes in the compile step, we do not need the overhead
of the `forEach` function versus a normal for loop since we do not make
use of the closure for anything.
2. When actually wrapping the node, we can completely bypass jqLite which
avoids several function calls and the overhead of cloning the wrapper node
which we already know to be unique.
Tests in applications show about an 83% decrease in time spent in this
specific loop.
This commit speeds up the code that checks if an element can
be animated, for the following two cases:
The checks will be sped up in cases where the animation
is disabled via $animate.enabled(element, false) on any parent element.
A minor speed-up is also included for cases where the $rootElement of the
app (the bootstrap element) is on the body or lower in the DOM tree.
This commit fixes two bugs:
1) Previously, animate would assume that a found host element
was part of the $rootElement (while it's possible that it is also outside the root).
2) Previously, if a parent of the animated element was pinned to a host element, the
host would not be checked regarding animations enabled status etc.
Closes#13783
Prior to this fix any promise/callback chained on a call to the $animate
methods would only flush if and when the browser page is visible. This
fix ensures that a timeout will be used instead when the document
is hidden.
Prior to this fix, ngAnimate would always trigger animations even if
the browser tab or browser window was not visible. This would cause
issues with class updates / DOM operations even if elements were not
using animations. The root cause is that browsers do not flush calls to
requestAnimationFrame when browser windows / tabs are not visible.
This fix disables animations if `document.hidden` is `true`.
Closes#12842Closes#13776
A bug in material has exposed that ngAnimate makes a copy of
the provided animation options twice. By making two copies,
the same DOM operations are performed during and at the end
of the animation. If the CSS classes being added/
removed contain existing transition code, then this will lead
to rendering issues.
Closes#13722Closes#13578
Includes the following fixes (per component):
* `$sniffer`: Properly determine the expected `vendorPrefix` for MS Edge
* `input`: MS Edge does not support dates with years with more than 4 digits.
Trying to set the value of an `input[datetime-local]` to `9999-12-31T23.59.59.999` throws an
error (probably related to converting the date to one with a year with more than 4 digits,
due to timezone offset).
* `$sanitize`: Fix failing tests on MS Edge
* `$animateCss`: Although the detected `vendorPrefix` for MS Edge is "ms", it doesn't seem to
recognize some vendor-prefixed CSS rules (e.g. `-ms-animation-*`). Other browsers (currently)
recognize either vendor-prefixed rules only or both.
Fixed by adding and retrieving styles using both prefixed and un-prefixed names.
* `$compile`: Skip failing `foreignObject` test on MS Edge.
For unknown reasons, an `<svg>` element inside a `<foreignObject>` element on MS Edge has no
size, causing the included `<circle>` element to also have no size and thus fails an
assertion (relying on the element having a non-zero size).
This seems to be an MS Edge issue; i.e. it is also reproducible without Angular.
(Tested with MS Edge version 25.10586.0.0 on Windows 10.)
Closes#13686
Prior to this fix if a parent container disabled animations for
itself then no children could be enabled explicity via
`$animate.enabled`. This patch allows for that to work.
Closes#13179Closes#13695
The `Module.component()` helper now delegates to `$compileProvider.component()`.
This has the following benefits:
- when using only the loader, we are not accessing out of scope variables / functions
- components can be registered via $compileProvider
- docs are a bit easier to find
- it is easier to keep the Batarang version of the loader up to date if there is minimal
code in that file.
Closes#13692
BREAKING CHANGE:
Before this change, the filter assumed that the input (if not undefined/null) was of type 'string'
and that certain methods (such as `.match()`) would be available on it. Passing a non-string value
would most likely result in a not-very-useful error being thrown (trying to call a method that does
not exist) or in unexpected behavior (if the input happened to have the assumed methods).
After this change, a proper (informative) error will be thrown. If you want to pass non-string
values through `linky`, you need to explicitly convert them to strings first.
Since input values could be initialized asynchronously, `undefined` or `null` will still be
returned unchanged (without throwing an error).
Closes#13547Closes#13693
Previously, the `$render` function was re-defined in the `select` directive's
`preLink` function. When a `select` element is compiled, every `option`
element inside it is linked and registered with the `selectCtrl`, which
calls `$render` to update the selected `option`. `$render` calls `selectCtrl.writeValue`,
which adds an unknown `option` in case no option is selected. In cases where
`optgroup` elements are followed by a line-break, adding the unknown `option`
confuses the html compiler and makes it call the link function of the following
`option` with a wrong element, which means this option is not correctly
registered.
Since manipulation of the DOM in the `preLink` function is wrong API usage,
the problem cannot be fixed in the compiler.
With this commit, the `$render` function is not re-defined until the `select` directive's
`postLink` function, at which point all `option` elements have been linked
already.
The commit also changes the `toEqualSelectWithOptions` matcher to
take selected options in groups into account.
Closes#13583Closes#13583Closes#13663
Due to recent changes in Chrome, Firefox and Webkit use of the
event.timeStamp value will lead to unpredictable behaviour due to
precision changes. Therefore it's best to stick entirely to use
`Date.now()` when it comes to confirming the end of transition-
ending values. See #13494 for more info.
Applies to 1.2, 1.3, 1.4 and 1.5.
Closes#13494Closes#13495
Previously, when an animation was closed because no animation styles
where found, it would call .off() with an empty string as the argument.
For both jquery/jqlite this is the same as calling .off() without any
argument, which deregisters all event listeners on an element.
Closes#13514
The default value of for transclude in component helper is now `false`.
The change is motivated by the fact that using `transclude: true` when not necessary
made component unusable in conjunction with structural directives that also require
transclusion such as `ng-switch-when` and `ng-repeat`.
Closes#13566Closes#13581
BREAKING CHANGE:
Angular 1.5.0.beta.2 introduced the `module.component` helper where `transclude` was true by default.
This changes the default for `transclude` to `false`. If you created components that expected
transclusion then you must change your code to specify `transclude: true`.
- Move interpolation info from Directive guide into new interpolation guide
- Add information about boolean attributes to interpolation guide
- remove wroong examples from prefixed boolean attribute docs, link
to interpolation guide instead
- mention additional examples for attributes that benefit from ngAttr
- add docs for ngRequired directive
With slow internet connection scope may be destroyed before template is loaded.
Previously in this case ngInclude compiled template that leaded to memory leaks
and errors in some cases.
Closes: #13515Closes: #13543
Background:
Prior to ffb6b2f, there was a bug in `URL_REGEXP`, trying to match the hostname as `\S+` (meaning
any non-space character). This resulted in never actually validating the structure of the URL (e.g.
segments such as port, path, query, fragment).
Then ffb6b2f and subsequently e4bb838 fixed that bug, but revealed `URL_REGEXP`'s "strictness" wrt
certain parts of the URL.
Since browsers are too lenient when it comes to URL validation anyway, it doesn't make sense for
Angular to be much stricter, so this commit relaxes the "strictness" of `URL_REGEXP`, focusing more
on the general structure, than on the specific characters allowed in each segment.
Note 1: `URL_REGEXP` still seems to be stricter than browsers in some cases.
Note 2: Browsers don't always agree on what is a valid URL and what isn't.
Fixes#13528Closes#13544
`baseThey` used to construct the testcase description by replacing `$prop` using a RegExp.
If the replacement string contained `$&` (which has a special meaning with RegExps), the resulting
string was not as expected.x
Previously, ddescribe, merge-conflicts, jshint, and jscs would run
after unit & e2e tests ran. The order was orginally changed as part of
https://github.com/angular/angular.js/pull/9792.
While the logic is sound that style errors shouldn't block tests from
running, ddescribe should always run. This was not guaraneteed; when
Travis exits with a warning after some browsers have run, ddescribe
doesn't get run and it doesn't become apparent that not
all tests have run.
Additionally, a separate job clearly separates style from test errors,
which e.g. means you can open a PR that includes an iit to speed up
the job, and see immediately if the test passes, because the ddescribe
error is in another job.
ES6's `class Foo {}` constructors cannot be instantiated using
`fn.apply`. This change extracts injection argument collection and then
uses new (Function.bind.apply(ctor, args)) to instantiate the service
instance.
Closes: #12598Closes: #12597
Previously, the animate queue would only detect pinned elements when
they were the same element as the to-be-animated element.
Related #12617Closes#13466
Internet Explorer 11 returns '' for optgroup elements without a value
attribute. We only want to skip option elements with value ''
Fixes#13487Closes#13489
Previously the transition/animation end events were not removed when the
animation was closed. This normally didn't matter, because
the close function knows the animations are closed and won't do work
twice.
However, the listeners themselves do computation that could fail when
the event was missing some data, for example when the event was
triggered instead of natural.
Closes#10387
Previously, $animateCss wouldn't use transition styles that were on the element
before the animation process started. Precisely, transition property, timing-function
and delay were overwritten in the process.
Closes#12656Closes#13333
Updated example which manually injects the filter.
It matches sibling example in functionality.
Also put html, js and css into separate files.
Also change anchors to buttons.
Closes#13402
The original statement is in the past tense (as if it were referring to a previous step of the
tutorial). The mentioned changes, however, are being done in this setp.
Closes#13452
The use element can reference external svg's (same origin) and can include
xlink javascript urls or foreign object that can execute xss.
This change disallows `<use>` elements in sanitized SVG markup.
An example of a malicious SVG document would be:
SVG to sanitize:
```
<svg><use xlink:href="test.svg#xss" /></svg>
```
External SVG file (test.svg)
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="100"
height="100"
id="xss">
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="javascript:alert(1)">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</a>
</svg>
```
Here the SVG to sanitize loads in the `test.svg` file via the `<use>` element.
The sanitizer is not able to parse this file, which contains malicious
executable mark-up.
This can only be taken advantage of if the external file is available via the
same origin restrictions in place.
Closes#13453
BREAKING CHANGE:
The `<use>` element is now removed from SVG passed to the `$sanitize` service.
This element is only used to import external SVG resources, which is a security
risk as the `$sanitize` service does not have access to the resource in order
to sanitize it.
Previously the contents of the `ngTransclude` element would always be emptied,
even if there was no transclusion to replace it.
Now, optional slots that have not been filled with content will not cause
the `ngTransclude` contents to be emptied.
Closes#13426
"any of the parameter value" contains plural (any of the) as well as singular (value).
Fixed to be singular to match the rest of the text block.
Closes#13448
Previously $rootScope would be new for each test, but old $rootScopes would never be destroyed.
Now that we are able to destroy the $rootScope, doing so provides an opportunity for code to clean
up things like long-lived event handlers between tests.
Closes#13433
All the resolves for a route are now attached to the route's local scope,
as the property whose name is given by the `resolveAs` property on the
route definition.
If `resolveAs` is not specified it defaults to `$resolve`.
This will make it easier to use `ngRoute`, by being able to reference all
the resolve values for the route, directly on the scope, rather than having
to implement a controller just to copy the resolves across manually.
For example, rather than
```js
$routeProvider.when('/', {
resolve: {
item1: ($http) => $http.get(...),
item2: ($http) => $http.get(...)
},
template: '<my-app item1="vm.item1" item2="vm.item2">'</my-app>`,
controllerAs: 'vm',
controller: ['item1', 'item2', function(item1, item2) {
this.item1 = item1;
this.item2 = item2;
}]
});
```
one can now do
```js
$routeProvider.when('/', {
resolve: {
item1: ($http) => $http.get(...),
item2: ($http) => $http.get(...)
},
template: '<my-app item1="$resolve.item1" item2="$resolve.item2">'</my-app>`
});
```
BREAKING CHANGE:
A new property is being attached to the scope of the route. The default name
for this property is `$resolve`. If your scope already contains a property
with this name then it will be hidden or overwritten.
In this case, you should choose a custom name for this property, that will
not collide with other properties on the scope, by specifying the `resolveAs`
property on the route.
Closes#13400
The example has been expanded to make it easier to provoke the
behavior that the description is talking about (rollbackViewValue
and programmatic model updates)
Related #13340
The new prepare class is added before the animation is pushed to the
queue and removed before the animation runs, i.e. it is immediately
available when a structural animation (enter, leave, move)
is initialized.
The class can be used to apply CSS to explicitly hide these elements
to prevent a flash of content before the animation runs.
This can happen if a structural animation (such as ng-if) sits at the
bottom of a tree which has ng-class animations on the parents.
Because child animations are spaced out with requestAnimationFrame,
the ng-enter class might not be applied in time, so the ng.if element is
briefly visible before its animation starts.
During parent structural animations, ongoing animations on child elements
are closed. These child elements are identified by their data-ng-animate
attribute. If an element is the clone of an animating element,
it might have this attribute, but no animation runner associated with it,
so we need to ignore it.
Fixes#11992Closes#13424
Prior to this fix the provided options object would be
altered as the animation kicks off due to the underlying
mechanics of ngAnimate. This patch ensures that a
copy of the provided options is used instead. This patch
also works for when `$animateCss` is used by itself.
Fixes#13040Closes#13175
Previously, options.delay was only considered when a class added an
extra transition style (which leads to style recalculation).
Fixes#13355Closes#13363
Some preprocessors such as Jade will automatically provide a value for an attribute
rather than leave it empty. E.g. `<div ng-transclude="ng-transclude">`.
In these situations we still want to use the default transclusion slot.
Closes#12934Closes#13383
When calling `$parse` with `undefined` as the expression and with
an interceptor, then when the function is evaluated, then call the
interceptor
Closes: #13367Closes: #13373
Introduced changes:
- Deprecate passing a promise as `timeout` (for `$resource` actions).
It never worked correctly anyway.
Now a warning is logged (using `$log.debug()`) and the property is
removed.
- Add support for a boolean `cancellable` property in actions'
configuration, the `$resource` factory's `options` parameter and the
`$resourceProvider`'s `defaults` property.
If true, the `$cancelRequest` method (added to all returned values for
non-instance calls) will abort the request (if it's not already
completed or aborted).
If there is a numeric `timeout` specified on the action's configuration,
the value of `cancellable` will be ignored.
Example usage:
```js
var Post = $resource('/posts/:id', {id: '@id'}, {
get: {
method: 'GET',
cancellable: true
}
});
var currentPost = Post.get({id: 1});
...
// A moment later the user selects another post, so
// we don't need the previous request any more
currentPost.$cancelRequest();
currentPost = Post.get({id: 2});
...
```
BREAKING CHANGE:
Using a promise as `timeout` is no longer supported and will log a
warning. It never worked the way it was supposed to anyway.
Before:
```js
var deferred = $q.defer();
var User = $resource('/api/user/:id', {id: '@id'}, {
get: {method: 'GET', timeout: deferred.promise}
});
var user = User.get({id: 1}); // sends a request
deferred.resolve(); // aborts the request
// Now, we need to re-define `User` passing a new promise as `timeout`
// or else all subsequent requests from `someAction` will be aborted
User = $resource(...);
user = User.get({id: 2});
```
After:
```js
var User = $resource('/api/user/:id', {id: '@id'}, {
get: {method: 'GET', cancellable: true}
});
var user = User.get({id: 1}); // sends a request
instance.$cancelRequest(); // aborts the request
user = User.get({id: 2});
```
Fixes#9332Closes#13050Closes#13058Closes#13210
This is needed for languages for which the month on its own has a
different format (case) than when used as part of a date.
Closes#3744Fixes#10247Fixes#12642Closes#12844
The $$AnimateRunner class is now the same for the core $animate service
and the ngAnimate $animate service. Previously, the core used a different
implementation that didn't match the ngAnimate behavior with regard
to callbacks.
Closes#13205Closes#13347
When compiling a `replace` directive, the compiler merges the attributes from
the replaced element onto the template element.
Unfortunately, `setAttribute` and other related DOM methods do not allow certain
attribute names - in particular Angular 2 style names such as `(click)` and `[value]`.
This is relevant when using ngForward with Angular Material, since the `mgButton`
directive uses `replace` and in the former you often use `(click)`.
This fixes the problem but for those special attributes the speed is considerably
slow.
Closes#13317Closes#13318
Previously, the directive bindings were evaluated against the directive's
new (non-isolate) scope, instead of the correct (parent) scope.
This went unnoticed most of the time, since a property would be eventually
looked up in the parent scope due to prototypal inheritance. The incorrect
behaviour was exhibited when a property on the child scope was shadowing
that on the parent scope.
This commit fixes it.
Fixes#13021Closes#13025
Previously, we would check if an attribute indicates a multi-element
directive, now we only do this check if the attribute name actually
matches the multi-element name pattern.
Closes#12365
The API section now uses a multi-column list. This preserves the actual
order of items. Note that only browser that support @supports and
columns get the new behavior.
The line-breaking behavior of search results is also improved. Previously,
long words would break onto new lines or run into the second column.
Fixes#8089Closes#13074
BREAKING CHANGE:
ngMessage is now compiled with a priority of 1, which means directives
on the same element as ngMessage with a priority lower than 1 will
be applied when ngMessage calls the $transclude function.
Previously, they were applied during the initial compile phase and were
passed the comment element created by the transclusion of ngMessage.
To restore this behavior, custom directives need to have
their priority increased to at least "1".
BREAKING CHANGE:
Previously, an non array-like input would pass through the orderBy filter
unchanged.
Now, an error is thrown. This can be worked around by converting an object
to an array, either manually or using a filter such as
https://github.com/petebacondarwin/angular-toArrayFilter.
(`null` and `undefined` still pass through without an error, in order to
support asynchronous loading of resources.)
Closes#11255Closes#11719
Since we are promoting component directives as the building blocks of
Angular applications, this new helper provides a simpler method for
defining such directives. By using sensible, widely accepted, conventions
the number of parameters needed has been cut down dramatically.
Many component directives can now be defined by simply providing a `name`,
`template`/`templateUrl`, a `controller`, and `bindings`:
```js
myMod.component('myComp', {
template: '<div>My name is {{myComp.name}}</div>',
controller: function() {
},
bindings: { name: '=' }
});
```
Closes#10007Closes#12933
Previously, there was no check for the existence of an item in the
cache when calling `$cacheFactory.remove()` before modifying the cache size
count.
Closes#12321Closes#12329
It is now possible to configure the options sent to $http for template requests.
If no value is configured then the request will use the default $http options.
Thanks to @luckycadow for help on this feature
Closes#13188Closes#11868Closes#6860
Note, that (as a by-product of the previous implementation) only non-empty
data was passed through the `transformResponse` pipeline. This is no
longer the case.
When using a custom `transformResponse` function, one should make sure it
can also handle an empty (i.e. falsy) `data` argument appropriately.
Fixes#12976Closes#12979
In the updateOn:blur example, there is an input for user.data but the
result is missing and nowhere to see how the value changes compared to user.name.
Closes#13129
Changes:
* Modify warning message to indicate that `track by` can be used with `select as`,
but subject to certain limitations.
* Provide both a working and an non-working example.
* Explain why the latter does not work.
Closes#13007
The URL_REGEXP in use to perform validation in ngInput is too restrictive and fails to
follow RFC3987. In particular, it only accepts ftp, http, and https scheme components and
rejects perfectly valid schemes such as "file", "mailto", "chrome-extension",
etc. The regex also requires the scheme to be followed by two "/" but the RFC says
0 to n are acceptable. This change fixes both of these issues to better align to
the standard.
Closes#11341Closes#11381
Based on the current configuration, Karma will run the tests on both
Chrome and Firefox, which will result in an error if either browser is not
available on the user's machine. This commit adds a note and directions on
how to solve this.
Closes#13114
For simple expressions without filters that have a stateless interceptor
then handle the 2nd phase parse evaluation using `inputs`.
TL;DR
This fixes the issue that interpolated simple expressions were evaluated twice
within one digest loop.
Long version, things happen in the following order:
* There was an overhaul on $interpolate, this overhaul changed $parse and
incorporated the concept of an interceptor.
* Optimization on $parse landed so expressions that have filters without
parameters (or the parameters are constants) would be evaluated in 2 phases,
first to evaluate the expression sans the filter evaluation and then with
the filter evaluation. This also used interceptors [the second evaluation
issue was added here]
* More optimizations on $parse landed and now expressions could be evaluated
in 2 phases. One to get all the possible values that could change (lets call
this state), the state was checked by $watch to know if an expression changed.
The second to continue the evaluation (as long as this state is provided).
This, once again, used interceptors
The last change, was supposed to fix the issue, but there was an assumption in
the existing code that the code would always generate the 2 phases functions,
but that is not true. If the expression is simple enough (just like the one in
your case) then the 2-phase evaluations functions are not generated. In this
case, if a stateless interceptor was added (just like what $interpolate adds)
then the state was not used and you see the function being evaluated twice.
This explains why, if you change the expression from
`Hello {{log('A')}} {{log('B')}}!` to `Hello {{log('A') + ' ' + log('B')}}!`,
then the repetition is not there.
Closes#12983Closes#13002
The `controller` and `transclude` parameters of the linking function were not
mentioned in the description, but used in the examples.
This commit improves the description and links to the `$compile` API docs
for more details.
Closes#13028
Optional extra attributes may be defined either as:
- a map of attributes and values
- a function that takes the url as a parameter and returns a map
Closes#12558Closes#13061
Add `params` argument to the `when()` and `expect()` functions to give map regex
groups to keys on a new `params` argument of the `respond()` callback.
Add `whenRoute` and `expectRoute` methods to `$httpBackend` to support matching
URLs by patterns similar to those defined for `ngRoute`.
Closes#12406
Previously we assigned `noop` if there was no function but there is no
performance advantage in doing this since the check would have to happen
either at assignment time or at call time.
Removing this use of `noop` makes the code clearer, IMO :-)
Closes#12528
Since only one of three invocations of `initializeDirectiveBindings` actually
adds a `$destroy` handler to the scope (the others just manually call unwatch
as needed), we can move that code out of this method.
This also has the benefit of simplifying what parameters need to be passed
through to the linking functions
Closes#12528
We don't need to have values in the cache from previous tests. This was
causing failures in all subsequent tests when a single test failed due
to a memory leak.
Now that we reset the cache each time we do not need to store the cache
size at the start of each test
Closes#13013
When ngOptions is present on a select, the option directive should not be able to
register options on the selectCtrl since this may cause errors during the
ngOptions lifecycle.
This can happen in the following cases:
- there is a blank option below the select element, an ngModel
directive, an ngOptions directive and some other directive on the select
element, which compiles the children of the select
(i.e. the option elements) before ngOptions is has finished linking.
- there is a blank option below the select element, an ngModel
directive, an ngOptions directive and another directive, which uses
templateUrl and replace:true.
What happens is:
- the option directive is compiled and adds an element `$destroy` listener
that will call `ngModel.$render` when the option element is removed.
- when `ngOptions` processes the option, it removes the element, and
triggers the `$destroy` listener on the option.
- the registered `$destroy` listener calls `$render` on `ngModel`.
- $render calls `selectCtrl.writeValue()`, which accesses the `options`
object in the `ngOptions` directive.
- Since `ngOptions` has not yet completed linking the `options` has not
yet been defined and we get an error.
This fix moves the registration code for the `option` directive into the
`SelectController.registerOption()` method, which is then overridden by
the `ngOptions` directive as a `noop`.
Fixes#11685Closes#12972Closes#12968Closes#13012
Previously, specifying a negative `begin` whose abs value exceeds the
input's length, would behave unexpectedly (depending on the value of
`limit` relative to `begin`). E.g.:
```
limitToFilter('12345', 3, -7) === '1'
// but
limitToFilter('12345', 10, -7) === '123'
```
This commit fixes the unexpected behaviour, by setting `begin` to 0 in the
aforementioned cases. Thus, the previous examples become:
```
limitToFilter('12345', 3, -7) === limitToFilter('12345', 3, 0) === '123'
// and
limitToFilter('12345', 10, -7) === limitToFilter('12345', 10, 0) === '12345'
```
Fixes#12775Closes#12781
Before 1.3, it was possible to call `angular.mock.module()` from inside
another module. After this version additional calls were just ignored.
It is helpful to be able to do this since a test may have helper functions
that need to access "config"-time things such as constants or providers,
and without this change it is difficult to get hold of the `$provide`
object from within those helpers.
Closes#12887
`$interpolateProvider.startSymbol` & friends are often used dangerously, to embed Angular templating in other templating languages. This change documents that that is a very dangerous practice.
Linking to usage section makes it easier for beginners to find out what the config object looks like.
The General Usage section now features an example that actually uses $http(config), and the Shortcut Methods section has been moved so that it appears directly after.
Closes#12949Closes#12950
When the empty/blank option has a directive that transcludes, ngIf for example,
a comment will be added into the select. Previously, ngOptions used this
comment as the empty option, which would mess up the displayed options.
Closes#12190
This improves the search results for certain terms.
For example, previously guide/scope was unfindable with the search
term 'scope', now it's the first hit.
Closes#12937
Some animations make use of the `from` and `to` styling only for the
lifetime of the animation. This patch allows for those styles to be
removed once the animation is closed automatically within `$animateCss`.
Closes#12930
Prior to this fix anchoring would allow for a container to be a document
node or something higher beyond the body tag. This patch makes it fall
back to body incase the rootElement node exists as a parent ancestor.
Closes#12872
Relying on the body node to be present right at injection has
caused issues with unit testing as well as some animations on
the body element. Reverting this patch fixes these issues.
Closes#12874
Callbacks are detected within the internals of ngAnimate whenever an
animation starts and ends. In order to allow the user to set callbacks
the callback detection needs to happen during the next tick. Prior to
this fix we used $$rAF to do the tick detection, however, with this
patch we intelligently use $$postDigest to do that for us and then
only issue a call to `$$rAF` if necessary.
If `ngMessage` tried to add a message back in that was about to be removed
after an animation, the NgMessageController got confused and tried to detach
the newly added message, when the pending node was destroyed.
This change applies a unique `attachId` to the message object and its DOM
node when it is attached. This is then checked when a DOM node is being
destroyed to prevent unwanted calls to `detach`.
Closes#12856Closes#12903
In certain scenarios, IE10/11/Edge create unresponsive select elements.
The following contribute to the bug:
- There need to be at least 2 selects next to each other
- The option elements are added via javascript
- the option.value is accessed before it is set
- the option.label is added after the option.value has been set
- The first select is wrappend in an element with display: inline or
display: inline-block,
This cannot be tested in a unit-test or e2e test.
Closes#11314Closes#11795
If the `$viewValue` is empty then the `ng-empty` CSS class is applied
to the input. Conversely, if it is not empty the `ng-not-empty` CSS class
is applied. Emptiness is ascertained by calling `NgModelController.$isEmpty()`
Closes#10050Closes#12848
with arrow functions parenthesis are optional in case you have exactly
one argument to the function. the previous regexp assumed function
arguments are always inside parenthesis and so it didn't annotate
functions like `$http => $http.get(...)` correctly
Closes#12890
Now one can use `''`, `0`, `false` and `null` as option groups. Previously
all of these falsy values were treated as the option not being a member of
a group.
Closes#7015Closes#7024Closes#12888
BREAKING CHANGES
If your data contains falsy values for option groups, then these options
will now be placed into option groups. Only option groups that are `undefined`
will result in the option being put in no group. If you have data that
contains falsy values that should not be used as groups then you must
filter the values before passing them to `ngOptions` converting falsy
values to `undefined`.
For transcluded directives, the transclude function can be lazily compiled
most of the time since the contents will not be needed until the
`transclude` function was actually invoked. For example, the `transclude`
function that is passed to `ng-if` or `ng-switch-when` does not need to be
invoked until the condition that it's bound to has been matched. For
complex trees or switch statements, this can represent significant
performance gains since compilation of branches is deferred, and that
compilation may never actually happen if it isn't needed.
There are two instances where compilation will not be lazy; when we scan
ahead in the array of directives to be processed and find at least two of
the following:
* A directive that is transcluded and does not allow multiple transclusion
* A directive that has templateUrl and replace: true
* A directive that has a template and replace: true
In both of those cases, we will need to continue eager compilation in
order to generate the multiple transclusion exception at the correct time.
Closes#7047Closes#12840
BREAKING CHANGE:
`ngOptions` will now throw if `ngModel` is not present on the `select`
element. Previously, having no `ngModel` let `ngOptions` silently
fail, which could lead to hard to debug errors. The change should
therefore not affect any applications, as it simply makes the
requirement more strict and alerts the developer explicitly.
Leaner, more forceful style.
Fixes a grammatical problems with subject number doesn't agrees with the verb. (originally "We have built many features into
Angular which makes...", which reduces to "features...which makes").
More authoritative use of commas, such as the Oxford comma in lists of three or more.
Sentences that are sentences, not fragments. (Yes, that was a fragment just now. I'm not writing docs now that reflect the polish of the project.)
The English grammatical/stylistic notion of parallelism.
Etc. This is just polish. The ideas are fine.
Closes#10478
the script and style tag are explicitly blacklisted, so this doesn't change any functionality.
the change is done to improve code clarity.
Closes#12524
Closes#12524
BREAKING CHANGE: The svg support in is now an opt-in option
Applications that depend on this option can use to turn the option back on,
but while doing so, please read the warning provided in the documentation for
information on preventing click-hijacking attacks when this option is turned on.
Previously, even when `ng-jq` was empty (which should force the use of
jqLite), Angular tried to find jQuery on `window['']`. If it didn't find
anything there, it would fall back to jqLite (as expected).
Nonetheless, trying to access `window['']` calls `getElementById('')`,
which issues a warning in Firefox (maybe others).
This fix properly detects when `ng-jq` is empty and avoids trying to
access `window['']`.
Fixes#12741
Both browser reloads and iOS 9 bugs cause the window.location to report
a different href that which we have just set. The change does not become
available until the next tick.
This change generalises previous work to deal with reloads to deal with
the iOS 9 bug in the UIWebView component.
Closes#12241Closes#12819
There is an mismatch for status in controller and test.
In controller $scope.status = 'ERROR!' and in test we
expect($rootScope.status).toBe('Failed...') so the test will fail;
Closes#12834
When the min/max attributes are empty (i.e. `attrs.min/max === ''`), there
should be no min/max validation applied (i.e. all values should be valid
wrt min/max). This works correctly for `input[number]`, but not for date
input family (`input[date/datetime-local/time/week/month]`).
In the case on `input[number]`, an empty string for `attrs.min/max` is
translated to `undefined` for `minVal/maxVal` and a check for
`isUndefined(minVal/maxVal)` ensures that no min/max validation takes
place.
For the data input family, an empty string for `attrs.min/max` is
translated to `NaN` (by `parseDate()`), so an additional check (for
`isNaN(minVal/maxVal)`) is required.
Fixes#12363Closes#12785
As discussed in #10085, the original replacement string can be treated
as html when displayed by the browser so it replaces it with '...' string.
Closes#10103
Test that re-added controls propagate validity changes to the parent form.
Ensure that when a form / control that was removed and then attached
to a different parent, is renamed / deleted, the new parent will
be notified of the change.
Document that dynamic adding / removing of controls may require manually
propagating the current state of the control to the parent form.
This fixes cases where the control gets removed, but the control's
element stays in the DOM.
Previously, if the removed control's validity changed, a reference to
it would again be stored on its former parent form.
Fixes#12263
This delegates setting the control's parentForm to the parentForm's
$addControl method. This way, the model controller saves one instance
of looking up the parentForm controller. The form controller keeps two
lookups (one for its own ctrl, one for the optional parent).
This also fixes adding the parentForm in the following case:
- a control is removed from a parent, but its corresponding DOM
element is not destroyed
- the control is then re-added to the form
Before the fix, the control's parentForm was only set once during
controller initialization, so the the parentForm would not be set on
the control in that specific case.
IE11 (and maybe others) converts an `undefined` argument to `xhr.send()` to
string (`'undefined'`) for certain request methods (e.g. DELETE). This
causes the request to appear having a body, when it shouldn't.
Fixes#12141Fixes#12739
Closes
The postDigest handler was not being added if the first element in
to modify the CSS classes contained invalid CSS class names. This meant
that subsequent valid CSS class changes were not being handled since we
were not then adding the handler for those correct cases.
Closes#12674Closes#12725
- reorder the paragraphs to highlight more important info
- clarify what can / should be passed to the method,
and what to (not) expect from it
- clarify when the method will trigger a digest
Closes#12713Closes#11121Closes#12498
- add tests to ensure options with interpolated text are added / updated
- refactor tests for interpolated option values to use the
standard compile helper defined in the spec file.
- rephrase some test descriptions for clarity
Closes#12580
This is for options added without ngOptions.
Previously, an option with an interpolated value attribute would
not be updated if the binding changed, i.e. the select controller would
not recognize the changed option. Now the value attribute will
be observed if it contains an interpolation.
Closes#12005Closes#12582
Referring to the `user` as `form` in the previews is confusing,
since it makes it seem as though the data being displayed is attached
to the `form` object, when the `form` object is separate.
Closes#12687
`ng(Pattern|Minlength|Maxlength)` directives will now validate the
`ngModel` when on an element that is not an `input` or
a `textarea`. Previously, only their HTML5 counterparts worked on
every element.
This is because the three validators were extracted
into separate directives (see 26d91b653a
and 1be9bb9d35), whereas the aliased
attribute handling assumes the validators will only exist on
`input|textarea` (see d9b90d7c10 and
25541c1f87).
Since `ngMin` and `ngMax` are also aliased attributes, this means
observers of `min` and `max` will be fired if `ngMin` and `ngMax`
change. This will happen on any element, even if it does not have
an `ngModel`. However, since min/max validators are only ever added
as part of the `input[number|textarea]` types, even if the element
has an `ngModel`, no validators will be added.
Finally the commit also tests that `ng-required` works on any element,
although that validator worked on all elements before this fix.
Fixes#12158Closes#12658
This reverts the previous behaviour of using foreced reflows to deal
with preparation classes in favour of a system that uses
requestAnimationFrame (RAF).
Closes#12669Closes#12594Closes#12655Closes#12631Closes#12612Closes#12187
Since the HTML5 pattern validation constraint validates the input value,
we should also validate against the viewValue. While this worked in
core up to Angular 1.2, in 1.3, we changed not only validation,
but the way `input[date]` and `input[number]` are handled - they parse
their input values into `Date` and `Number` respectively, which cannot
be validated by a regex.
Fixes#12344
BREAKING CHANGE:
The `ngPattern` and `pattern` directives will validate the regex
against the `viewValue` of `ngModel`, i.e. the value of the model
before the $parsers are applied. Previously, the modelValue
(the result of the $parsers) was validated.
This fixes issues where `input[date]` and `input[number]` cannot
be validated because the viewValue string is parsed into
`Date` and `Number` respectively (starting with Angular 1.3).
It also brings the directives in line with HTML5 constraint
validation, which validates against the input value.
This change is unlikely to cause applications to fail, because even
in Angular 1.2, the value that was validated by pattern could have
been manipulated by the $parsers, as all validation was done
inside this pipeline.
If you rely on the pattern being validated against the modelValue,
you must create your own validator directive that overwrites
the built-in pattern validator:
```
.directive('patternModelOverwrite', function patternModelOverwriteDirective() {
return {
restrict: 'A',
require: '?ngModel',
priority: 1,
compile: function() {
var regexp, patternExp;
return {
pre: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
attr.$observe('pattern', function(regex) {
/**
* The built-in directive will call our overwritten validator
* (see below). We just need to update the regex.
* The preLink fn guaranetees our observer is called first.
*/
if (isString(regex) && regex.length > 0) {
regex = new RegExp('^' + regex + '$');
}
if (regex && !regex.test) {
//The built-in validator will throw at this point
return;
}
regexp = regex || undefined;
});
},
post: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
regexp, patternExp = attr.ngPattern || attr.pattern;
//The postLink fn guarantees we overwrite the built-in pattern validator
ctrl.$validators.pattern = function(value) {
return ctrl.$isEmpty(value) ||
isUndefined(regexp) ||
regexp.test(value);
};
}
};
}
};
});
```
Prior to this fix if `$animateCss` was called multiple on the same
element with new animation data then the preceeding fallback timout
would cause the animation to cancel midway. This fix ensures that
`$animateCss` can be triggered multiple times and only when the final
timeout has passed then all animations will be closed.
Closes#12490Closes#12359
- Change some wordings to make them more understandable
- Reorder the paragraphs so they can be read more easily as a coherent text
- Add examples for static single / multiple selects, and non-selected option
- Add example for select with repeated options
- Remove form-related info from ngOptions select (doesn't apply)
Setting the default value in a select is a real trap for beginners, questions about how to do this on StackExchange have been view more than 40000 times in the last year. This changes updates the documentation to make it clearer.
Closes#12546
When `options.delay` is passed into `$animateCss`the delay style would be
applied after the add/remove CSS classes are evaluated (for transitions).
At this point it is too late for the delay to be picked up (this
functionality however does work with keyfarme animations).
This patch ensures that the provided `options.delay` value is
applied before the CSS classes are applied to the element.
Closes#12584
Unnecessary split. The url returns a string without the hash,
resulting in an undefined value and making the test fails.
Matches the phonecat app more closely, too.
Closes#12590
A core version of `$animateCss` can now be injected when
ngAnimate is not present. This core version doesn't trigger any
animations in any way. All that it does is apply the provided from
and/or to styles as well as the addClass and removeClass values.
The motivation for this feature is to allow for directives to activate
animations automatically when ngAnimate is included without the need to
use `$animate`.
Closes#12509Closes#12570
It's unpredictable sometimes to ensure that a browser triggers a reflow
for an animation. Prior to this patch, reflows would be applied
carefully in between parent/child DOM structure, but that doesn't seem
to be enough for animations that contain complex CSS styling rules.
Closes#12553Closes#12554Closes#12267Closes#12554
Fix markdown quotation of a `;` so that it is properly rendered in the docs.
Makes it more consistent with the other codeblocked characters in the
list.
Closes#12549
Remove the `new` from the minErr assignment, so the closure compiler
can detect the errors correctly. Also removes the leading $ from the
variable name to be consistent with the Angular.js file.
Closes#12386Closes#12416
Summary:
- Use properly capitalized GitHub brand name
- Correctly negate two clauses using "nor" (caitp feels this may confuse
non-english speakers and need to be revised, but hopefully not)
- Correctly end sentence with period
Closes#12497
The removed line pointed to a removed example. Re-adding the example
would have been of questionable value, as it introduced several
concepts without context. It's therefore better to link to the guide,
which provides a better introduction.
Closes#12167
The original file included a code sample using `angular.injector(['myModule', 'ng'])`,
which appears to be incorrect when trying to retrieve anything attached to `myModule`.
Reversing the args fixes this.
Closes#12292
It will be good to have the binding results in the CSS classes /
binding to form / control state example, similar to the Simple Form
example.
Closes#12326
When users accidentally just pass a single string, e.g.
`angular.injector('myModule')`, this change give them a better error message.
Currently Angular just reports that the module with the name 'm' is missing,
as it's iterating through all characters in the string, instead of all strings
in the module.
Closes#12285
The legacy methods, `success` and `error`, have been deprecated.
Set this to `false` to cause `$http` to throw an error if these methods are
used in the application.
For now it defaults to `true`. In a future release we will remove these
methods altogether.
DEPRECATION NOTICE:
The legacy methods 'success' and 'error' on promises returned by $http
are now deprecated.
Closes#12112Closes#10508
Previously there was a custom built en-us locale that was included with
angular.js. This made likely that it would get out of sync with the real
en-us locale that is generated from the closure library.
This change removes that custom one and uses the generated one instead.
This also has the benefit of preventing the unwanted caught error on trying
to load `ngLocale` during angular bootstrap.
Closes#12462Closes#12444Closes#12134Closes#8174
The previous explanation in parentheses created a bit of confusion because the documentation stated to leave off the `listener`, but then said "be prepared for multiple calls to your listener". The new explanation clarifies that it is indeed the `watchExpression` that will be executed multiple times.
Closes#12429
Previously, optional empty '='-bound expressions were ignored ---
erroneously they stopped being ignored, and no tests were caused to
fail for this reason. This change restores the original ignoring
behaviour while still preventing other errors fixed by 8a1eb16Closes#12144Closes#12259Closes#12290
In some cases people will not follow all URL standards and may have
unescaped = characters in their GET parameter values. Currently $location
will not parse them correctly dropping everything after the unescaped =.
This change includes all characters after the first `=` up to the next `&`.
Closes#12351
This reverts commit 70ce425e6a.
There are internal projects in Google that generate their own version
of angular.js and so this commit caused those projects to break.
We are going to look into a more satisfactory way of getting this change
in.
In Chrome, if two alert boxes pop up, without enough time between them,
Protractor (or possibly ChromeDriver) sometimes fails to recognize the
second alert.
Do not trigger Firefox validation on form initialization.
- Do not set a value to an <input> field if the field already has the same value
Closes#12102
We cannot re-enter a `$apply` block while already in a `$apply` or `$digest`
phase.
Before this change such an invalid call to `$apply` was incorrectly clearing
the phase, which meant that a second invalid `$apply` call was being allowed.
Closes#12174
This fix ensures that a structural child animation will never close a
parent class based early so that the CSS classes for the child are ready
for it to perform its CSS animation. The reasoning for the past for this
was because their is a one frame delay before the classes were applied.
If a parent and a child animation happen at the same time then the
animations may not be picked up for the element since the CSS classes
may not have been applied yet.
This fix ensures that parent CSS classes are applied in a synchronous
manner without the need to run a one RAF wait. The solution to this was
to apply the preparation classes during the pre-digest phase and then
apply the CSS classes right after with a forced reflow paint.
BREAKING CHANGE: CSS classes added/removed by ngAnimate are now applied
synchronously once the first digest has passed.
The previous behavior involved ngAnimate having to wait for one
requestAnimationFrame before CSS classes were added/removed. The CSS classes
are now applied directly after the first digest that is triggered after
`$animate.addClass`, `$animate.removeClass` or `$animate.setClass` is
called. If any of your code relies on waiting for one frame before
checking for CSS classes on the element then please change this
behavior. If a parent class-based animation, however, is run through a
JavaScript animation which triggers an animation for `beforeAddClass`
and/or `beforeRemoveClass` then the CSS classes will not be applied
in time for the children (and the parent class-based animation will not
be cancelled by any child animations).
Closes#11975Closes#12276
Use `extend` on `Promise.prototype` and `Deferred.prototype`, to avoid having to
manually set `constructor` on the overwritten prototypes.
Closes#10697
Instead of merging existing animation option to new animation options we can
merge in reverse and utilize old animation runner.
Closes#12266Closes#12007
This change calls $timeout with the invokeApply
parameter set to false which stops ngAnimate
from invoking its changes inside an $apply block
Closes#12281Closes#12282
Line 548: Remove duplicate 'not' and clarify wording
Line 556: Remove period within parenthetical statement
Line 560: Clarify wording
Line 570: Capitalize 'E.g.' at the start of a sentence
Closes#12252
This regeneration takes into account the changes due to:
* update to closure library 27.0.1
* fix to default position of negative sign in currency formats
Closes#12307Closes#12362
Previously there was a custom built en-us locale that was included with
angular.js. This made likely that it would get out of sync with the real
en-us locale that is generated from the closure library.
This change removes that custom one and uses the generated one instead.
This also has the benefit of preventing the unwanted caught error on trying
to load `ngLocale` during angular bootstrap.
Closes#12134Closes#8174
Previously, if you navigate outside of the Angular application, say be clicking
the back button, the $location service would try to handle the url change
and error due to the URL not being valid for the application.
This fixes that issue by ensuring that a reload happens when you navigate
to a URL that is not within the application.
Closes #11667
There are two different features in Angular that can break CSP rules:
use of `eval` to execute a string as JavaScript and dynamic injection of
CSS style rules into the DOM.
This change allows us to configure which of these features should be turned
off to allow a more fine grained set of CSP rules to be supported.
Closes#11933Closes#8459Closes#12346
`$animateCss` is a fan of transition animations, but it turns out that
if only a keyframeStyle is provided into the animation upon constrution
then it will quit because it assumes that nothing will be animated
(since no classes or styles are being applied). This patch ensures that
a keyframe style can solely be applied to an animation triggered with
`$animateCss`.
```js
// this will now work as expected
$animateCss(element, { keyframeStyle: '1s rotate' }).start();
```
Closes#12124Closes#12340
This fix ensures that both `$animateCss` and `$animate` swallow the error
when an animation takes place in the sitation that the element is removed
from the parent element sometime before or during the preparation stages of the
animation.
Closes#11975Closes#12338
A controller is a instantiated object created **from** a constructor function.
It was not accurate to describe a Controller **as** a constructor function.
Closes#11888
This reverts commit 8a1eb1625c.
This commit broke the tabs component on the material project,
which caused internal breakages. Will open a separate issue to
look into the issue.
Move all the calls to $sce.getTrustedUrl inside $templateRequest, and
also trust the contents of the cache. This allows prefetching templates
and to bypass the checks on things where they make no sense, like
templates specified in script tags.
Closes#12219Closes#12220Closes#12240
If you previously returned a object from a controller constructor function,
it would not be bound to the scope. As of 1.4 it does, and can cause
unexpected objects as the scope.
Closes#12227
While directives are not allowed to request both a new (normal) and an
isolate scope on the same element, the relevant check was not performed
correctly when the directive requesting the isolate scope had a lower
priority and specified a `templateUrl`.
In that case, the check was deferred until the template was fetched, but
the info about other directives requesting a new (normal) scope was not
properly preserved (in `previousCompileContext`).
This commit fixes this, so now an error is thrown (as expected).
Fixes#12215Closes#12217
It turns out that the options that are displayed are more constrained than
just whether the property starts with a $ character.
If the values collection is array-like then we only display the options that
are identified by numerical properties - it's an array right?
So this commit aligns `getWatchables` with `getOptions`.
See #12010
Previously, if you navigated outside of the current base URL angular
crashed with a `Cannot call method 'charAt' of undefined` error.
Closes#11302Closes#4776
By refactoring to use a Schwartzian transform, we can ensure that objects
with no custom `toString` or `toValue` methods are just ordered using
their position in the original collection.
Closes#11866Closes#11312Closes#4282
Shadows only when attributes are non-optional and not own properties,
only stores the observed '@' values when they are indeed strings.
Partial revert of 6339d30d1379689da5eec9647a953f64821f8b0
Closes#12151Closes#12144
The `window.location.hash' setter will strip of a single leading hash character
if it exists from the fragment before joining the fragment value to the href
with a new hash character.
This meant that if we want the fragment to lead with a hash character, we
must do `window.location.hash = '##test'` to ensure that the first hash
character in the fragment is not lost.
The `$location.hash` setter works differently and assumes that the value
passed is the the full fragment, i.e. it does not attempt to strip off a
single leading hash character.
Previously, if you called, `$location.hash('#test')`, the leading hash was
being stripped and the resulting url fragment did not contain this hash:
`$location.hash()`, then became 'test' rather than `#test`, which led to
an infinite digest.
Closes#10423Closes#12145
As of Angular 1.3 `$setViewValue` already calls `$apply` and triggers a
digest cycle, so now there is no need wrapping the `$setViewValue`
function call with `$apply`, which will just trigger an additional digest
cycle.
When there is an expression of the form
* true && a.b.c
* true && a()
* true && a()()
* false || a.b.c
* false || a()
* false || a()()
where `a == null`
Closes#12099
If the reader does not cd into angular-phonecat subdirectory,
npm install will not work.
This comment helps newbies understand npm install is dependent
on a custom project.json file.
Closes#12040
The fixed test is supposed to test a fix for an IE11 bug/peculiarity that
arises when using a specifically configured MutationObserver on the page
(see #11781 for more info).
The configuration contained a typo (`sublist` instead of `subtree`), which
effectively failed to set up the MutationObserver in a way that would make
the IE11 bug appear.
Closes#12061
The use of correctly implies that Angular is doing something incorrect, however it is that we expect a number passed as a string to be sorted as a number. Angular does not do what we are expecting, although it responds correctly to what we have actually asked - sorting based on the string representation of a number.
Closes#12046
Two bullet points were indented causing the entire lines
to be formatted as code by markdown.
Decreased indentation level by one, as it seems this was not the intention.
Closes#12035
IE11 MutationObserver breaks consecutive text nodes into several text nodes.
This patch merges consecutive text nodes into a single node before
looking for interpolations.
Closes#11781
Modify the example, to show that, when using `ngClass`'s map syntax,
hyphenated classes (e.h. such as those used by Bootstrap) must be enclosed
in quotes.
Closes#12027
The in-page anchor tags that serve as bookmarks for information about views and models have
visible text content that unintentionally makes them seem like clickable links navigating to
other parts of the page or to entirely different pages.
Closes#11450
Improve the sorting behaviour in the 2nd example: Clicking on an unsorted
column sorts in ascending order, while clicking on a sorted column sorts
in descending order. Also, add a simple sort indicator.
Closes#11981
Expressions that compute labels and track by values for ngOptions were
being called for properties, that start with $ even though those properties
were being ignored as options.
Closes#11930Closes#12010
The paragraph below this changes says:
"Then the `required` message will be displayed first."
`required` needs to be `true` to match that sentence.
Closes#12009
Change the check on changed value for ngOptions to ensure that a reference check is only done
when trackBy is not used. Previously, if trackBy was being used but the values of the objects were
equal a reference check was then used which would cause the check to be true if the objects had
different memory references but the values were equal. This can cause issues with forms being
marked dirty when the value of the model as not actually changed.
Closes#11936Closes#11996
Previously, when using ngAria with the ng-hide directive,
and the value passed to ng-hide was not boolean,
the aria-hidden attribute was set to this non-boolean value.
Closes#11865Closes#11998
aria-hidden should mirror the boolean representation of their ng-*
counterpart (ng-show, ng-hide) instead of their actual value. Same
applies to aria-disabled and ng-disabled
Closes#11365
Use data-ng-model instead of data-ng:model which is accepted for legacy reason.
The next "Normalization" section is saying:
> Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for
> ngBind). If you want to use an HTML validating tool, you can instead use the
> data-prefixed version (e.g. data-ng-bind for ngBind). The other forms
> shown above are accepted for legacy reasons but we advise you to avoid
> them.
Closes#11960
One time binding of object literals are treated differently than simple expressions. Added a link to Ben Nadel's article describing how object literals's keys are checked for undefined.
Closes#11982
Remove the unused elementTransclusion argument from createBoundTranscludeFn.
Also remove the nodeLinkFn.elementTranscludeOnThisElement attribute, which
becomes unnecessary.
Closes#9962Closes#11985
***Note*: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.**
**Do you want to request a *feature* or report a *bug*?**
**What is the current behavior?**
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).**
**What is the expected behavior?**
**What is the motivation / use case for changing the behavior?**
**Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.**
**Other information (e.g. stacktraces, related issues, suggestions how to fix)**
@@ -19,7 +19,7 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
## <a name="question"></a> Got a Question or Problem?
If you have questions about how to use AngularJS, please direct these to the [Google Group][groups]
discussion list or [StackOverflow][stackoverflow]. We are also available on [IRC][irc].
discussion list or [StackOverflow][stackoverflow]. We are also available on [IRC][irc] and [Gitter][gitter].
## <a name="issue"></a> Found an Issue?
If you find a bug in the source code or a mistake in the documentation, you can help us by
@@ -71,7 +71,7 @@ chances of your issue being dealt with quickly:
* **Angular Version(s)** - is it a regression?
* **Browsers and Operating System** - is this a problem with all browsers or only IE8?
* **Reproduce the Error** - provide a live example (using [Plunker][plunker] or
[JSFiddle][jsfiddle]) or a unambiguous set of steps.
[JSFiddle][jsfiddle]) or an unambiguous set of steps.
***Related Issues** - has a similar issue been reported before?
***Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
causing the problem (line of code or commit)
@@ -123,13 +123,19 @@ Before you submit your pull request consider the following guidelines:
* If we suggest changes then:
* Make the required updates.
* Re-run the Angular test suite to ensure tests are still passing.
* Rebase your branchand force push to your GitHub repository (this will update your Pull Request):
* Commit your changes to your branch (e.g. `my-fix-branch`).
* Push the changes to your GitHub repository (this will update your Pull Request).
If the PR gets too outdated we may ask you to rebase and force push to update the PR:
```shell
git rebase master -i
git push origin my-fix-branch -f
```
*WARNING. Squashing or reverting commits and forced push thereafter may remove GitHub comments
on code that were previously made by you and others in your commits.*
That's it! Thank you for your contribution!
#### After your pull request is merged
@@ -187,6 +193,8 @@ We have very precise rules over how our git commit messages can be formatted. T
readable messages** that are easy to follow when looking through the **project history**. But also,
we use the git commit messages to **generate the AngularJS change log**.
The commit message formatting can be added using a typical git workflow or through the use of a CLI wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `npm run commit` in your terminal after staging your changes in git.
### Commit Message Format
Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
format that includes a **type**, a **scope** and a **subject**:
@@ -199,8 +207,13 @@ format that includes a **type**, a **scope** and a **subject**:
<footer>
```
The **header** is mandatory and the **scope** of the header is optional.
Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
to read on github as well as in various git tools.
to read on GitHub as well as in various git tools.
### Revert
If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
### Type
Must be one of the following:
@@ -210,7 +223,7 @@ Must be one of the following:
* **docs**: Documentation only changes
* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
semi-colons, etc)
* **refactor**: A code change that neither fixes a bug or adds a feature
* **refactor**: A code change that neither fixes a bug nor adds a feature
* **perf**: A code change that improves performance
* **test**: Adding missing tests
* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
@@ -228,13 +241,14 @@ The subject contains succinct description of the change:
* no dot (.) at the end
### Body
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes"
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
The body should include the motivation for the change and contrast this with previous behavior.
### Footer
The footer should contain any information about **Breaking Changes** and is also the place to
reference GitHub issues that this commit **Closes**.
**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
A detailed explanation can be found in this [document][commit-message-format].
@@ -262,6 +276,7 @@ You can find out more detailed information about contributing in the
grunt.registerTask('test','Run unit, docs and e2e tests with Karma',['jshint','jscs','package','test:unit','test:promises-aplus','tests:docs','test:protractor']);
grunt.registerTask('test','Run unit, docs and e2e tests with Karma',['jshint','jscs','package','test:unit','test:promises-aplus','tests:docs','test:protractor']);
grunt.registerTask('test:jqlite','Run the unit tests with Karma',['tests:jqlite']);
grunt.registerTask('test:jquery','Run the jQuery unit tests with Karma',['tests:jquery']);
grunt.registerTask('test:modules','Run the Karma module tests with Karma',['build','tests:modules']);
grunt.registerTask('test:travis-protractor','Run the end to end tests with Protractor for Travis CI builds',['connect:testserver','protractor:travis']);
grunt.registerTask('test:ci-protractor','Run the end to end tests with Protractor for Jenkins CI builds',['webdriver','connect:testserver','protractor:jenkins']);
grunt.registerTask('test:e2e','Alias for test:protractor',['test:protractor']);
AngularJS is the next generation framework where each component is designed to work with every other component in an interconnected way like a well-oiled machine. AngularJS is JavaScript MVC made easy and done right. (Well it is not really MVC, read on, to understand what this means.)
#### MVC, no, MV* done the right way!
MVC, short for Model-View-Controller, is a design pattern, i.e. how the code should be organized and how the different parts of an application separated for proper readability and debugging. Model is the data and the database. View is the user interface and what the user sees. Controller is the main link between Model and View. These are the three pillars of major programming frameworks present on the market today. On the other hand AngularJS works on MV*, short for Model-View-_Whatever_. The _Whatever_ is AngularJS's way of telling that you may create any kind of linking between the Model and the View here.
Unlike other frameworks in any programming language, where MVC, the three separate components, each one has to be written and then connected by the programmer, AngularJS helps the programmer by asking him/her to just create these and everything else will be taken care of by AngularJS.
#### Interconnection with HTML at the root level
AngularJS uses HTML to define the user's interface. AngularJS also enables the programmer to write new HTML tags (AngularJS Directives) and increase the readability and understandability of the HTML code. Directives are AngularJS’s way of bringing additional functionality to HTML. Directives achieve this by enabling us to invent our own HTML elements. This also helps in making the code DRY (Don't Repeat Yourself), which means once created, a new directive can be used anywhere within the application.
#### Data Handling made simple
Data and Data Models in AngularJS are plain JavaScript objects and one can add and change properties directly on it and loop over objects and arrays at will.
#### Two-way Data Binding
One of AngularJS's strongest features. Two-way Data Binding means that if something changes in the Model, the change gets reflected in the View instantaneously, and the same happens the other way around. This is also referred to as Reactive Programming, i.e. suppose `a = b + c` is being programmed and after this, if the value of `b` and/or `c` is changed then the value of `a` will be automatically updated to reflect the change. AngularJS uses its "scopes" as a glue between the Model and View and makes these updates in one available for the other.
#### Less Written Code and Easily Maintainable Code
Everything in AngularJS is created to enable the programmer to end up writing less code that is easily maintainable and readable by any other new person on the team. Believe it or not, one can write a complete working two-way data binded application in less than 10 lines of code. Try and see for yourself!
#### Testing Ready
AngularJS has Dependency Injection, i.e. it takes care of providing all the necessary dependencies to its controllers whenever required. This helps in making the AngularJS code ready for unit testing by making use of mock dependencies created and injected. This makes AngularJS more modular and easily testable thus in turn helping a team create more robust applications.
@@ -8,7 +8,7 @@ but the required directive controller is not present on the current DOM element
To resolve this error ensure that there is no typo in the required controller name and that the required directive controller is present on the current element.
If the required controller is expected to be on a ancestor element, make sure that you prefix the controller name in the `require` definition with `^`.
If the required controller is expected to be on an ancestor element, make sure that you prefix the controller name in the `require` definition with `^`.
If the required controller is optionally requested, use `?` or `^?` to specify that.
When declaring isolate scope the scope definition object must be in specific format which starts with mode character (`@&=`) with an optional local name.
When declaring isolate scope the scope definition object must be in specific format which starts with mode character (`@&=<`), after which comes an optional `?`, and it ends with an optional local name.
```
myModule.directive('directiveName', function factory() {
@@ -12,9 +12,11 @@ myModule.directive('directiveName', function factory() {
scope: {
'attrName': '@', // OK
'attrName2': '=localName', // OK
'attrName3': 'name', // ERROR: missing mode @&=
'attrName4': ' = name', // ERROR: extra spaces
'attrName5': 'name=', // ERROR: must be prefixed with @&=
'attrName3': '<?localName', // OK
'attrName4': ' = name', // OK
'attrName5': 'name', // ERROR: missing mode @&=
'attrName6': 'name=', // ERROR: must be prefixed with @&=
'attrName7': '=name?', // ERROR: ? must come directly after the mode
This error occurs when the HTML string passed to '$sanitize' can't be parsed by the sanitizer.
The error contains part of the html string that can't be parsed.
The parser is more strict than a typical browser parser, so it's possible that some obscure input would produce this error despite the string being recognized as valid HTML by a browser.
If a valid html code results in this error, please file a bug.
This error occurs when `$sanitize` sanitizer determines that `document.implementation.createHTMLDocument ` api is not supported by the current browser.
This api is necessary for safe parsing of HTML strings into DOM trees and without it the sanitizer can't sanitize the input.
The api is present in all supported browsers including IE 9.0, so the presence of this error usually indicates that Angular's `$sanitize` is being used on an unsupported platform.
By default, animations are disabled when the Angular app {@link guide/bootstrap bootstraps}. If you are using the {@link ngApp} directive,
this happens in the `DOMContentLoaded` event, so immediately after the page has been loaded.
Animations are disabled, so that UI and content are instantly visible. Otherwise, with many animations on
the page, the loading process may become too visually overwhelming, and the performance may suffer.
Internally, `ngAnimate` waits until all template downloads that are started right after bootstrap have finished.
Then, it waits for the currently running {@link ng.$rootScope.Scope#$digest} and the one after that to finish.
This ensures that the whole app has been compiled fully before animations are attempted.
If you do want your animations to play when the app bootstraps, you can enable animations globally in
your main module's {@link angular.Module#run run} function:
```js
myModule.run(function($animate) {
$animate.enabled(true);
});
```
## How to (selectively) enable, disable and skip animations
There are three different ways to disable animations, both globally and for specific animations.
Disabling specific animations can help to speed up the render performance, for example for large `ngRepeat`
lists that don't actually have animations. Because ngAnimate checks at runtime if animations are present,
performance will take a hit even if an element has no animation.
### In the config: {@link $animateProvider#classNameFilter $animateProvider.classNameFilter()}
This function can be called in the {@link angular.Module#config config} phase of an app. It takes a regex as the only argument,
which will then be matched against the classes of any element that is about to be animated. The regex
allows a lot of flexibility - you can either allow animations only for specific classes (useful when
you are working with 3rd party animations), or exclude specific classes from getting animated.
```js
app.config(function($animateProvider) {
$animateProvider.classNameFilter(/animate-/);
});
```
```css
/* prefixed with animate- */
.animate-fade-add.animate-fade-add-active {
transition:1s linear all;
opacity:0;
}
```
The classNameFilter approach generally applies the biggest speed boost, because the matching is
done before any other animation disabling strategies are checked. However, that also means it is not
possible to override class name matching with the two following strategies. It's of course still possible
to enable / disable animations by changing an element's class name at runtime.
### At runtime: {@link ng.$animate#enabled $animate.enabled()}
This function can be used to enable / disable animations in two different ways:
With a single `boolean` argument, it enables / disables animations globally: `$animate.enabled(false)`
disables all animations in your app.
When the second argument is a native DOM or jQuery element, the function enables / disables
animations on this element *and all its children*: `$animate.enabled(false, myElement)`. This is the
most flexible way to change the animation state. For example, even if you have used it to disable
animations on a parent element, you can still re-enable it for a child element. And compared to the
`classNameFilter`, you can change the animation status at runtime instead of during the config phase.
Note however that the `$animate.enabled()` state for individual elements does not overwrite disabling
rules that have been set in the {@link $animateProvider#classNameFilter classNameFilter}.
### Via CSS styles: overwriting styles in the `ng-animate` CSS class
Whenever an animation is started, ngAnimate applies the `ng-animate` class to the element for the
whole duration of the animation. By applying CSS transition / animation styling to the class,
you can skip an animation:
```css
.my-class{
transition: transform 2s;
}
.my-class:hover {
transform: translateX(50px);
}
my-class.ng-animate {
transition: 0s;
}
```
By setting `transition: 0s`, ngAnimate will ignore the existing transition styles, and not try to animate them (Javascript
animations will still execute, though). This can be used to prevent {@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries
issues with existing animations interfering with ngAnimate}.
## Preventing flicker before an animation starts
When nesting elements with structural animations such as `ngIf` into elements that have class-based
animations such as `ngClass`, it sometimes happens that before the actual animation starts, there is a brief flicker or flash of content
where the animated element is briefly visible.
To prevent this, you can apply styles to the `ng-[event]-prepare` class, which is added as soon as an animation is initialized,
but removed before the actual animation starts (after waiting for a $digest). This class is only added for *structural*
animations (`enter`, `move`, and `leave`).
Here's an example where you might see flickering:
```html
<div ng-class="{red: myProp}">
<div ng-class="{blue: myProp}">
<div class="message" ng-if="myProp"></div>
</div>
</div>
```
It is possible that during the `enter` event, the `.message` div will be briefly visible before it starts animating.
In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:
```css
.message.ng-enter-prepare {
opacity: 0;
}
/* Other animation styles ... */
```
## Preventing Collisions with Existing Animations and Third Party Libraries
By default, any `ngAnimate` enabled directives will assume any transition / animation styles on the
element are part of an `ngAnimate` animation. This can lead to problems when the styles are actually
for animations that are independent of `ngAnimate`.
For example, an element acts as a loading spinner. It has an inifinite css animation on it, and also an
{@link ngIf `ngIf`} directive, for which no animations are defined:
```css
@keyframes rotating {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: rotating 2s linear infinite;
}
```
Now, when the `ngIf` changes, `ngAnimate` will see the spinner animation and use
it to animate the `enter`/`leave` event, which doesn't work because
the animation is infinite. The element will still be added / removed after a timeout, but there will be a
noticable delay.
This might also happen because some third-party frameworks place animation duration defaults
across many element or className selectors in order to make their code small and reuseable.
You can prevent this unwanted behavior by adding CSS to the `.ng-animate` class that is added
for the whole duration of an animation. Simply overwrite the transition / animation duration. In the
case of the spinner, this would be:
```css
.spinner.ng-animate {
transition: 0s none;
animation: 0s none;
}
```
If you do have CSS transitions / animations defined for the animation events, make sure they have higher priority
than any styles that are independent from ngAnimate.
You can also use one of the two other {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations strategies to disable animations}.
## More about animations
For a full breakdown of each method available on `$animate`, see the {@link ng.$animate API documentation}.
In Angular, a Component is a special kind of {@link guide/directive directive} that uses a simpler
configuration which is suitable for a component-based application structure.
This makes it easier to write an app in a way that's similar to using Web Components or using Angular
2's style of application architecture.
Advantages of Components:
- simpler configuration than plain directives
- promote sane defaults and best practices
- optimized for component-based architecture
- writing component directives will make it easier to upgrade to Angular 2
When not to use Components:
- for directives that rely on DOM manipulation, adding event listeners etc, because the compile
and link functions are unavailable
- when you need advanced directive definition options like priority, terminal, multi-element
- when you want a directive that is triggered by an attribute or CSS class, rather than an element
## Creating and configuring a Component
Components can be registered using the `.component()` method of an Angular module (returned by {@link module `angular.module()`}). The method takes two arguments:
* The name of the Component (as string).
* The Component config object. (Note that, unlike the `.directive()` method, this method does **not** take a factory function.)
|{@link concepts#module Module} | a container for the different parts of an app including controllers, services, filters, directives which configures the Injector |
|{@link concepts#service Service} | reusable business logic independent of views |
|{@link concepts#module Module} | a container for the different parts of an app including controllers, services, filters, directives which configures the Injector |
|{@link concepts#service Service} | reusable business logic independent of views |
## A first example: Data binding
@@ -57,7 +57,7 @@ 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 <a name="compiler">{@link compiler compiler}</a>.
The loaded, transformed and rendered DOM is then called the <a name="view">view</a>.
The loaded, transformed and rendered DOM is then called the <a name="view"></a>*view*.
The first kind of new markup are the <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
@@ -76,10 +76,10 @@ stores/updates the value of the input field into/from a variable.
The second kind of new markup are the double curly braces `{{ expression | filter }}`:
When the compiler encounters this markup, it will replace it with the evaluated value of the markup.
An <a name="expression">{@link expression expression}</a> in a template is a JavaScript-like code snippet that allows
to read and write variables. Note that those variables are not global variables.
Angular to read and write variables. Note that those variables are not global variables.
Just like variables in a JavaScript function live in a scope,
Angular provides a <a name="scope">{@link scope scope}</a> for the variables accessible to expressions.
The values that are stored in variables on the scope are referred to as the <a name="model">model</a>
The values that are stored in variables on the scope are referred to as the <a name="model"></a>*model*
in the rest of the documentation.
Applied to the example above, the markup directs Angular to "take the data we got from the input widgets
and multiply them together".
@@ -334,9 +334,9 @@ The following example shows how this is done with Angular:
@@ -42,16 +43,25 @@ mirrors the process of compiling source code in
Before we can write a directive, we need to know how Angular's {@link guide/compiler HTML compiler}
determines when to use a given directive.
In the following example, we say that the `<input>` element **matches** the `ngModel` directive.
Similar to the terminology used when an [element **matches** a selector](https://developer.mozilla.org/en-US/docs/Web/API/Element.matches), we say an element **matches** a
directive when the directive is part of its declaration.
In the following example, we say that the `<input>` element **matches** the `ngModel` directive
```html
<input ng-model="foo">
```
The following also **matches** `ngModel`:
The following `<input>` element also **matches** `ngModel`:
```html
<input data-ng:model="foo">
<input data-ng-model="foo">
```
And the following <person> element **matches** the `person` directive:
```html
<person>{{name}}</person>
```
### Normalization
@@ -89,8 +99,13 @@ For example, the following forms are all equivalent and match the {@link ngBind}
Web browsers are sometimes picky about what values they consider valid for attributes.
For example, considering this template:
```html
<svg>
<circle cx="{{cx}}"></circle>
</svg>
```
We would expect Angular to be able to bind to this, but when we check the console we see
something like `Error: Invalid value for attribute cx="{{cx}}"`. Because of the SVG DOM API's
restrictions, you cannot simply write `cx="{{cx}}"`.
With `ng-attr-cx` you can work around this problem.
If an attribute with a binding is prefixed with the `ngAttr` prefix (denormalized as `ng-attr-`)
then during the binding it will be applied to the corresponding unprefixed attribute. This allows
you to bind to attributes that would otherwise be eagerly processed by browsers
(e.g. an SVG element's `circle[cx]` attributes). When using `ngAttr`, the `allOrNothing` flag of
{@link ng.$interpolate $interpolate} is used, so if any expression in the interpolated string
results in `undefined`, the attribute is removed and not added to the element.
For example, we could fix the example above by instead writing:
```html
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
```
If one wants to modify a camelcased attribute (SVG elements have valid camelcased attributes), such as `viewBox` on the `svg` element, one can use underscores to denote that the attribute to bind to is naturally camelcased.
For example, to bind to `viewBox`, we can write:
```html
<svg ng-attr-view_box="{{viewBox}}">
</svg>
```
## Creating Directives
First let's talk about the {@link ng.$compileProvider#directive API for registering directives}. Much like
@@ -345,6 +303,7 @@ The `restrict` option is typically set to:
* `'A'` - only matches attribute name
* `'E'` - only matches element name
* `'C'` - only matches class name
* `'M'` - only matches comment
These restrictions can all be combined as needed:
@@ -448,7 +407,7 @@ This is clearly not a great solution.
What we want to be able to do is separate the scope inside a directive from the scope
outside, and then map the outer scope to a directive's inner scope. We can do this by creating what
we call an **isolate scope**. To do this, we can use a directive's `scope` option:
we call an **isolate scope**. To do this, we can use a {@link $compile#-scope- directive's `scope`} option:
<example module="docsIsolateScopeDirective">
<file name="script.js">
@@ -577,14 +536,24 @@ want to reuse throughout your app.
In this example we will build a directive that displays the current time.
Once a second, it updates the DOM to reflect the current time.
Directives that want to modify the DOM typically use the `link` option.
`link` takes a function with the following signature, `function link(scope, element, attrs) { ... }`
where:
Directives that want to modify the DOM typically use the `link` option to register DOM listeners
as well as update the DOM. It is executed after the template has been cloned and is where
directive logic will be put.
`link` takes a function with the following signature,
* **Mobile:** [Angular on Mobile Guide](http://www.ng-newsletter.com/posts/angular-on-mobile.html), [PhoneGap](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/)
@@ -91,7 +91,7 @@ This is a short list of libraries with specific support and documentation for wo
### Server-Specific
* **Django:** [Tutorial](http://blog.mourafiq.com/post/55034504632/end-to-end-web-app-with-django-rest-framework), [Integrating AngularJS with Django](http://django-angular.readthedocs.org/en/latest/integration.html), [Getting Started with Django Rest Framework and AngularJS](http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html)
* **FireBase:** [AngularFire](http://angularfire.com/), [Realtime Apps with AngularJS and FireBase (video)](http://www.youtube.com/watch?v=C7ZI7z7qnHU)
* **FireBase:** [AngularFire](http://angularfire.com/), [Firebase Foundations for AngularJS](http://blog.watchandcode.com/firebase-foundations/), [Realtime Apps with AngularJS and FireBase (video)](http://www.youtube.com/watch?v=C7ZI7z7qnHU)
@@ -357,7 +359,7 @@ element, to which it can then insert the transcluded content into its template.
Before compilation:
```html
<div translude-directive>
<div transclude-directive>
Some transcluded content
</div>
```
@@ -428,5 +430,50 @@ If your directive uses `templateUrl`, consider using
to pre-compile HTML templates and thus avoid having to load them over HTTP during test execution.
Otherwise you may run into issues if the test directory hierarchy differs from the application's.
## Testing Promises
When testing promises, it's important to know that the resolution of promises is tied to the {@link ng.$rootScope.Scope#$digest digest cycle}.
That means a promise's `then`, `catch` and `finally` callback functions are only called after a digest has run.
In tests, you can trigger a digest by calling a scope's {@link ng.$rootScope.Scope#$apply `$apply` function}.
If you don't have a scope in your test, you can inject the {@link ng.$rootScope $rootScope} and call `$apply` on it.
There is also an example of testing promises in the {@link ng.$q#testing `$q` service documentation}.
## Using `beforeAll()`
Jasmine's `beforeAll()` and mocha's `before()` hooks are often useful for sharing test setup - either to reduce test run-time or simply to make for more focussed test cases.
By default, ngMock will create an injector per test case to ensure your tests do not affect each other. However, if we want to use `beforeAll()`, ngMock will have to create the injector before any test cases are run, and share that injector through all the cases for that `describe`. That is where {@link angular.mock.module.sharedInjector module.sharedInjector()} comes in. When it's called within a `describe` block, a single injector is shared between all hooks and test cases run in that block.
In the example below we are testing a service that takes a long time to generate its answer. To avoid having all of the assertions we want to write in a single test case, {@link angular.mock.module.sharedInjector module.sharedInjector()} and Jasmine's `beforeAll()` are used to run the service only once. The test cases then all make assertions about the properties added to the service instance.
```javascript
describe("Deep Thought", function() {
module.sharedInjector();
beforeAll(module("UltimateQuestion"));
beforeAll(inject(function(DeepThought) {
expect(DeepThought.answer).toBeUndefined();
DeepThought.generateAnswer();
}));
it("has calculated the answer correctly", inject(function(DeepThought) {
// Because of sharedInjector, we have access to the instance of the DeepThought service
// that was provided to the beforeAll() hook. Therefore we can test the generated answer
expect(DeepThought.answer).toBe(42);
}));
it("has calculated the answer within the expected time", inject(function(DeepThought) {
starter app with a directory layout, test harness, and scripts to begin building your application.
#Further Steps
#Further Steps
##Watch Videos
##Watch Videos
If you haven’t had a chance to watch the videos from the homepage, please check out:
@@ -29,13 +29,13 @@ If you haven’t had a chance to watch the videos from the homepage, please chec
And visit our [YouTube channel](http://www.youtube.com/user/angularjs) for more AngularJS video presentations and
tutorials.
##Subscribe
##Subscribe
* Subscribe to the [mailing list](http://groups.google.com/forum/?fromgroups#!forum/angular). Ask questions here!
* Follow us on [Twitter](https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fangularjs.org%2F®ion=follow_link&screen_name=angularjs&source=followbutton&variant=2.0)
* Add us to your circles on [Google+](https://plus.google.com/110323587230527980117/posts)
##Read more
##Read more
The AngularJS documentation includes the {@link guide/index Developer Guide} covering concepts and the
@@ -32,17 +32,18 @@ We are using [Bower][bower] to install client side dependencies. This step upda
"license": "MIT",
"private": true,
"dependencies": {
"angular": "~1.3.0",
"angular-mocks": "~1.3.0",
"angular": "1.4.x",
"angular-mocks": "1.4.x",
"jquery": "~2.1.1",
"bootstrap": "~3.1.1",
"angular-route": "~1.3.0",
"angular-resource": "~1.3.0"
"angular-route": "1.4.x",
"angular-resource": "1.4.x"
}
}
```
The new dependency `"angular-resource": "~1.3.0"` tells bower to install a version of the
angular-resource component that is compatible with version 1.3.x. We must ask bower to download
The new dependency `"angular-resource": "1.4.x"` tells bower to install a version of the
angular-resource component that is compatible with version 1.4.x. We must ask bower to download
and install this dependency. We can do this by running:
```
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Peter Bacon Darwin
Martin Staffa
Georgios Kalpakas
Jason Bedard
Georgii Dolzhykov
aortyl
a510
David Rodenas Pico
Gene McCulley
Jurko Gospodnetić
Jan Niehusmann
Chris Chua
Pablo Iván G. Soto
mohamed amr
Josh
Andrew
SHAHRUKH-KHAN
glenr4
andykuszyk
Maciej Kołodziejczak
Artur
Robin Janssens
Michał Gołębiowski
cscport
Lucas Mirelmann
Alex Chuev
Daniel Herman
pmadruga
Steve Mao
Wassim Chegham
Owen Craig
surya prakash singh
Rongduan Zhu
Matias Niemelä
Huc Arnaud
Maxim Salnikov
Josh Schneider
lordg
Thanos Korakas
Gordon Zhu
Ciro Nunes
Tim Ruffles
Ivo Mirra
Nabil Hashmi
Matt Janssen
Steve Shaffer
Foxandxss
Vadorequest
marvin sl
Igor Dolgov
anh
Ben Elliott
Kin
Ryo Utsunomiya
Yonatan Kra
TepigMC
MicCarr
ryanhart2
Aftab Ansari
biohazardpb4
Alexander
srijan
lucienbertin
alex-teren
Sean Murphy
Remy Sharp
Wesley Cho
Gabriel Monteagudo
Lee Adcock
Martin Sikora
Aashish Nagpal
John Mercer
Prayag Verma
kuroky360
campersau
Marcy Sutton
Wojciech Krzystek
Smith
Dan Ryan
Michael
Isaac
Thomas Moffett
robw
Leo Gallucci
Michal Raczkowski
Robert Reiz
Zac Smith
Robin Glauser
Moorzee
marianoc84
Livvie Lin
Tobias Leugger - Vibes
Martin Raifer
Alireza Mirian
Qingyu Zhou
Josh Duff
Edgar Flores
Adrian Roselli
Maxime Lasserre
dmitriz
Shahar Talmi
Andy Patterson
Konstantin Ulitin
Waitaya Krongapiradee
Kyle Pittman
Sébastien Arod
Ieuan Griffiths
ammills01
Alexander Zagumennikov
mkalish
Justas Brazauskas
Philip Harrison
ReneFerwerda
Martin Probst
zainengineer
Hovhannes Babayan
Mil4n
Dmitrij Maslov
Marcus Nielsen
Andy Gurden
Utsav Shah
xieranmaya
Adam Zerner
Joan Claret
Thodoris Bais
J.P. Poveda
Matt Erickson
Rahat Ahmed
Anita Perala
Julián Salgado
Anas Qadrei
Leonardo Borges Avelino
rrsivabalan
Eric Lee Carraway
Jakub Torbicki
mzdunek93
Doug Krugman
jody tate
JonyD
luckylooke
Matthew Hill
Chris J. Lee
Nuri Hodges
Bert Verhelst
Michael George Attard
Pablo Villoslada Puigcerber
Stephen Sauceda
Sreenivasan K
Stanislav Komanec
Alicia Lauerman
Charlie-Hua
Stu Cox
Ryan Hart
Sam Rawlins
Andrew Austin
Kuzminov Aleksandr Sergeevich
sevdog
Risan Bagja Pradana
Jack Viers
zurin
Michael Salmon
Stian Jensen
Flavio Corpa Ríos
Jason Hopper
Sugan Krishnan
Richard Harrington
Raghav
spoonraker
Magnus Pedersen
Alexandr Gureev
John Zhang
Donghwan Kim
koyner
Shrulik
Rishabh Jain
Stefan Krüger
daviskoh
Igor Minar
Ivan Verevkin
Kent C. Dodds
Marcin Wosinek
Mark Knell
Sjur Bakka
Misko Hevery
Alessandro Diaferia
Jay Springate
Magee Mooney
Arliang
toastman
lucastetreault
indrimuska
Akshay Agarwal
kwypchlo
HeberLZ
Bernie Telles
=Florian Bernstein
Pawel Kozlowski
Izhaki
Mike
Tim Whitbeck
Nabil Kadimi
Ron Fenolio
Rex Salisbury
Joakim Blomskøld
Ziyu Wang
grsmvg
Karl Svartholm
Meli
Elvio Cavalcante
David Czech
Ilya Mochalov
Luke Waite
Caitlin Potter
Frank
arm1n
Rouven Weßling
Yun Liu
luanshixia
Ryan Hendry
Eric Adams
Derk Vedelaar
Satish Maurya
ArchmageInc
Jacob Carter
Steven
Strikeskids
Laisky.Cai
patyatka
Jochen Niebuhr
Blake Johnston
ColinFletch
Jesse Mandel
bluepnume
Olen Davis
jbnizet
startswithaj
shoja
Ashish Dasnurkar
Mohamed Samy
Andrew Passanisi
Dominic Watson
niteshthakur
Jerry Orta
Jeff Cross
Raphael Jamet
Chris Bosco
Bart Verkoeijen
Yichao Wang
Phil Brown
Jandalf
Tsuyoshi Yoshizawa
Stéphane Campinas
Alfonso Presa
Nir Noy
Thomas Landauer
Conny Sjöblom
David Link
David Anderton
Josh Sherick
Will Fong
qbzzt
Allan Bogh
Kevin Huang
fahdsheikh
Robert Jenks
Dominick
Steve Mao
David Eriksson
Boris Cherny
Pascal Precht
Yuriy Bash
Steven Easter
Henry Zhu
Michal Miszczyszyn
Fred Sauer
Xavier Haniquaut
Wenhua Zhao
Ran Ding
Vladimir Lugovsky
Jeff Lee
Ron Tsui
Yi EungJun
Daniel
Michael Watts
pholly
Tero Parviainen
Ryan Dale