Compare commits

...

215 Commits

Author SHA1 Message Date
Martin Staffa 617b36117a docs(changelog): add release notes for 1.6.4 2017-03-31 10:47:45 +02:00
Jason Bedard 189461f9bf fix($parse): standardize one-time literal vs non-literal and interceptors
Previously literal one-time bindings did not use the expression `inputs`, causing infinite digest issues with literal values. This often forces the use of deepEquals when watching one-time literals.

`ng-class` is one example of deepEquals which is no longer required.

This one-time/literal behavior is now also consistently propogated through interceptors.

Closes #15858
2017-03-31 09:36:19 +02:00
Jason Bedard 93879b3c72 fix($parse): fix infinite digest errors when watching objects with .valueOf in literals
Closes #15867
2017-03-31 09:17:55 +02:00
Jason Bedard c2b8fab0a4 fix($rootScope): provide correct value of one-time bindings in watchGroup 2017-03-30 22:22:22 -07:00
bennycoomans f403925ee0 docs(guide/Migrating from Previous Versions): fix typo "indentifiers"
Closes #15871
2017-03-29 14:49:00 +02:00
Michał Gołębiowski 1e841a89c1 docs($compile): remove a mention of preassigning bindings in controllers
The deprecation warning is no longer needed as the feature has been removed
in 1.7.

Closes #15870
2017-03-29 14:15:26 +02:00
Jason Bedard 2b0c0505e2 refactor($parse): move duplicate $parse interpreter/compiler logic into Parser
- the construction of the AST is now in the Parser
- the assigning of the literal and constant flags is now in the Parser
- remove unused references to the lexer, $filter and options on the Parser
2017-03-27 23:29:02 -07:00
Jason Bedard 9d74f0fdcb refactor($compile): reuse shared simpleCompare method 2017-03-27 23:25:22 -07:00
Jason Bedard f1d0f03863 refactor($parse): make use of local variable instead of refetching property 2017-03-27 22:53:12 -07:00
Jason Bedard b0f6afcdac test($compile): add test for #15833 2017-03-27 22:47:25 -07:00
Jason Bedard 2931a6df03 refactor(ngModel): use local scope param in watcher 2017-03-27 22:47:15 -07:00
Michał Gołębiowski bf5c2eef34 fix(jqLite): make jqLite invoke jqLite.cleanData as a method
The previous implementation of jqLite didn't use cleanData from the jqLite
object but instead used a cached version which maede it impossible to
monkey-patch jqLite.cleanData similarly to how you can do it in jQuery.

The cleanData method is not meant to be called directly by userland code;
its purpose is mainly to be able to be monkey-patched; therefore, the previous
implementation didn't make a lot of sense.

This commit enables one of the tests so far run only with jQuery to run with
jqLite as well.

Ref #8486
Ref #8695
Closes #15846
2017-03-27 11:55:56 +02:00
Michał Gołębiowski dcdd5def8f test(jQuery): run tests with jQuery 2.1, 2.2 & 3.2
Also, update jQuery 2.2.x mentions in the tutorial to 3.2.x.

Closes #15843
2017-03-27 11:23:49 +02:00
Peter Mertz f3aa1d183a docs($interval): Update interval promise docs
It's currently not clear when or why the promise returned by `$interval` resolves. This updates the docs to be more specific.

Closes #15862
2017-03-25 18:08:38 +02:00
Martin Staffa 80077f35d0 docs(faq): clarify the versioning strategy
- When do breaking changes appear
- Relationship with Semver
- Compatibility of modules

Closes #15845
2017-03-24 12:45:28 +01:00
Martin Staffa 32f38a33b6 docs($animate): remove obsolete error doc 2017-03-24 10:44:51 +01:00
Martin Staffa 9de0842719 chore(doc-gen): report on missing or obsolete error docs
Closes #12527
2017-03-24 10:44:51 +01:00
Rodrigo b9d2b30808 docs(filterFilter): clarify the comparator parameter
Closes #15827
2017-03-23 16:00:37 +02:00
Michał Gołębiowski 3d0abffbc0 chore(yarn): rely on Travis built-in Yarn support, update Yarn in Jenkins
On Travis we now rely on built-in Yarn support and we only cache the Yarn cache,
not node_modules. This creates a more stable environment as we don't install
over previous node_modules state but we still won't download packages from the
internet in the second run for the same yarn.lock as Yarn takes packages from
its local cache if they exist there.

We install a new Yarn verison manually on Jenkins; the location of the install
script changed.

Closes #15851
2017-03-22 22:49:51 +01:00
Martin Staffa c35786ae26 chore(github): update issue template
Closes #15824
2017-03-22 17:03:44 +01:00
Michał Gołębiowski 60644d5d05 chore(*): remove unused docs/bower_components mentions 2017-03-22 16:49:16 +01:00
Michał Gołębiowski 233f47b98a chore($parse): make sure no one changes .toEqual(-0) to .toBe(-0) 2017-03-22 12:08:05 +01:00
Martin Staffa 421040588c docs(component-router): give deprecation notice red color 2017-03-22 12:00:32 +01:00
Jason Bedard f132ce740a refactor($controller): remove unused injected $window
Closes #15839
2017-03-22 11:54:55 +01:00
Joshua J Wilborn 5377baf0fc docs ($compile): add error documentation for noslot error in $compile
Fixes #15790
Closes  #15828
2017-03-22 11:51:55 +01:00
Michał Gołębiowski bf7685abbd test(jqLite): test not firing $destroy on jqLite.cleanData with jQuery UI
So far it wasn't tested that Angular's logic for skipping it triggering
the $destroy event on jQuery.cleanData in the replaceWith internal function
works correctly when Angular is not the last one to patch the cleanData method
(e.g. if jQuery UI does the patching later). This commits adds the relevant
test.

Ref #8486
2017-03-22 10:37:17 +00:00
Michał Gołębiowski ba2e0d3d9b docs(faq): document the AngularJS/jqLite deprecation strategy
Fixes #15282
2017-03-22 10:32:28 +00:00
Raphael Jamet 0d9d57d418 docs($sce): overhaul the $sce service documentation
A big docs update around `$sce`:
There is a lot of content in there that is often misunderstood, and some of the
documentation starts to get really old too. Also fixed capitalization,
formatting, indentation and uniformized `@param` descriptions.

Closes #15735
2017-03-21 17:34:33 +02:00
Richard Kaufhold d96e58fdc8 feat($resource): add hasBody action configuration option
By default, only `PUT`, `POST` and `PATCH` requests have a body, but you can use
`hasBody` to configure any action to either have or not have a body, regardless
of its HTTP method.

Fixes #10128

Closes #12181
2017-03-21 12:43:48 +02:00
Georgios Kalpakas 70dbb15846 docs($sanitize): fix incorrect test description 2017-03-20 16:26:14 +02:00
BobChao87 d94153939c docs($resource): encode ) in link
JSDoc to HTML converter was treating the close parenthesis in
`[MDN](...#toJson()_behavior)` as the final close parenthesis, thus resulting in
a broken link.
This commit fixes it by percent-encoding the parentesis in the link address.

Closes #15825
2017-03-20 12:50:18 +02:00
xfg eacf06f5cf docs(ngMock/$httpBackend): add catch() block to example
Make the `it should fail authentication` test pass.

Closes #15822
2017-03-20 12:45:06 +02:00
TheRealMaxion bb2a247aa5 docs(tutorial/step_09) fix typo
Closes #15829
2017-03-20 12:32:39 +02:00
TheRealMaxion 24c94b83fa docs(tutorial/step_04): fix typo (each --> its)
Closes #15826
2017-03-20 12:27:44 +02:00
Vitaliy 0c3620bbf5 docs($interpolate): fix typo
There was missing `JS` at line 141.

Closes #15817
2017-03-15 18:19:06 +01:00
Michał Gołębiowski 38f8c97af7 fix($compile): remove the preAssignBindingsEnabled flag
Closes #15782

BREAKING CHANGE:

Previously, the `$compileProvider.preAssignBindingsEnabled` flag was supported.
The flag controlled whether bindings were available inside the controller
constructor or only in the `$onInit` hook. The bindings are now no longer
available in the constructor.

To migrate your code:

1. If you haven't invoked `$compileProvider.preAssignBindingsEnabled()` you
don't have to do anything to migrate.

2. If you specified `$compileProvider.preAssignBindingsEnabled(false)`, you
can remove that statement - since AngularJS 1.6.0 this is the default so your
app should still work even in AngularJS 1.6 after such removal. Afterwards,
migrating to AngularJS 1.7.0 shouldn't require any further action.

3. If you specified `$compileProvider.preAssignBindingsEnabled(true)` you need
to first migrate your code so that the flag can be flipped to `false`. The
instructions on how to do that are available in the "Migrating from 1.5 to 1.6"
guide:
https://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6
Afterwards, remove the `$compileProvider.preAssignBindingsEnabled(true)`
statement.
2017-03-15 15:38:44 +01:00
Chirag Bhatia c80fa1cfe1 fix($http): throw more informative error on invalid JSON response
Fixes #15695

Closes #15724
2017-03-14 14:47:39 +02:00
Martin Staffa 11d9ad1eb2 fix(ngTouch): remove ngClick override, $touchProvider, and $touch
Closes #15761
Closes #15755

BREAKING CHANGE:

The `ngClick` directive from the ngTouch module has been removed, and with it the
corresponding `$touchProvider` and `$touch` service.

If you have included ngTouch v1.5.0 or higher in your application, and have not
changed the value of `$touchProvider.ngClickOverrideEnabled()`, or injected and used the `$touch`
service, then there are no migration steps for your code. Otherwise you must remove references to
the provider and service.

The `ngClick` override directive had been deprecated and by default disabled since v1.5.0,
because of buggy behavior in edge cases, and a general trend to avoid special touch based
overrides of click events. In modern browsers, it should not be necessary to use a touch override
library:

- Chrome, Firefox, Edge, and Safari remove the 300ms delay when
  `<meta name="viewport" content="width=device-width">` is set.
- Internet Explorer 10+, Edge, Safari, and Chrome remove the delay on elements that have the
  `touch-action` css property is set to `manipulation`.

You can find out more in these articles:
https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html#//apple_ref/doc/uid/TP40014305-CH10-SW8
https://blogs.msdn.microsoft.com/ie/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay/
2017-03-14 11:48:54 +01:00
eeeqxxtg 5a13cacf9f docs(changelog): fix typo (resourceUrlWhiteList --> resourceUrlWhitelist)
Closes #15809
2017-03-14 11:30:14 +02:00
Ash Searle 28bad725b1 fix(dateFilter): correctly handle newlines in format string
Fixes #15794

Closes #15792
2017-03-13 19:28:26 +02:00
Martin Staffa 1daa4f2231 fix(Angular): remove angular.lowercase and angular.uppercase
Closes #15445

BREAKING CHANGE:

The helper functions `angular.lowercase` `and angular.uppercase` have
been removed.

These functions have been deprecated since 1.5.0. They are internally
used, but should not be exposed as they contain special locale handling 
(for Turkish) to maintain internal consistency regardless of user-set locale.

Developers should generally use the built-ins `toLowerCase` and `toUpperCase`
or `toLocaleLowerCase` and `toLocaleUpperCase` for special cases.

Further, we generally discourage using the angular.x helpers in application code.
2017-03-08 14:33:34 +01:00
Martin Staffa 4d43ee3327 docs(changelog): move bootstrap fixes to Bug Fix section 2017-03-08 12:47:23 +01:00
Martin Staffa a59f46b37d docs(changelog): add release notes for 1.6.3 2017-03-08 12:22:32 +01:00
Pablo Targa 728ce72372 docs(ngAnimate): update staggering config for use with css animations
Closes #15743
2017-03-07 20:20:01 +01:00
diegomrsantos b779091ffd docs(guide/migration): add info for 1.4 (ng)Pattern BC
Breaking change was introduced in commit 0e001084ff.
This content being included in the migration guide is taken from the commit message of commit 0e001084ff.

Closes #15758
Closes #15765
2017-03-07 20:13:24 +01:00
Raphael Jamet 6ccbfa65d6 feat($compile): lower the xlink:href security context for SVG's a and image elements
Previously, `xlink:href` on SVG's `<a>` and `<image>` elements, was
`$sce.RESOURCE_URL`. While this makes sense for other `xlink:href` usecases, it
was an overkill for these elements.
This commit lowers the `xlink:href` security context for these specific
elements, treating it in the same way as `a[href]` or `img[src]` respectively.
The `xlink:href` security context for other elements is not affected.

BREAKING CHANGE:

In the unlikely case that an app relied on RESOURCE_URL whitelisting for the
purpose of binding to the `xlink:href` property of SVG's `<a>` or `<image>`
elements and if the values do not pass the regular URL sanitization, they will
break.

To fix this you need to ensure that the values used for binding to the affected
`xlink:href` contexts are considered safe URLs, e.g. by whitelisting them in
`$compileProvider`'s `aHrefSanitizationWhitelist` (for `<a>` elements) or
`imgSrcSanitizationWhitelist` (for `<image>` elements).

Closes #15736
2017-03-05 00:57:04 +02:00
mohamed amr cc793a1364 test(errorHandlingConfig): add tests for errorHandlingConfig() (independent of minErr)
Closes #15770
2017-03-05 00:44:45 +02:00
Michał Gołębiowski 3dc0096dc4 fix($log): don't parse error stacks manually outside of IE/Edge
IE/Edge display errors in such a way that it requires the user to click in
4 places to see the stack trace. There is no way to feature-detect it so
there's a chance of the user agent sniffing to go wrong but since it's only
about logging, this shouldn't break apps. Other browsers display errors in
a sensible way and some of them map stack traces along source maps if available
so it makes sense to let browsers display it as they want.

Fixes #15590
Closes #15767
2017-03-03 11:38:58 +01:00
jason-larigakis-hs 846fa1cdf6 docs(guide/Providers): remove confusing section
This part of the guide  is called "Providers", which means the section no longer applies.

Closes #15771
2017-03-03 11:08:54 +01:00
Peter Bacon Darwin 60e294cbd8 feat(info): add angularVersion info to each module
You can now check what version of AngularJS a core module is designed for:

```
var angularVersion = $injector.modules['myModule'].info().angularVersion;
```
2017-03-02 08:22:08 +00:00
Peter Bacon Darwin 550f309dba feat($injector): add new modules property
The `modules` property is a hash of the modules loaded into the injector
at bootstrap time. This can be used to access the module's info.
2017-03-02 08:22:08 +00:00
Peter Bacon Darwin 49aba51e6b feat(Module): add info() method
The new `info()` method lets developers store arbitrary information about
their module for consumption later.

Closes #15225
2017-03-02 08:22:08 +00:00
Martin Staffa e269c14425 fix($controller): remove instantiating controllers defined on window
This also removes the likewise deprecated `$controllerProvider.allowGlobals()` method.

Closes #15349
Closes #15762

BREAKING CHANGE:

The option to instantiate controllers from constructors on the global `window` object
has been removed. Likewise, the deprecated `$controllerProvider.allowGlobals()`
method that could enable this behavior, has been removed.

This behavior had been deprecated since AngularJS v1.3.0, because polluting the global scope
is bad. To migrate, remove the call to $controllerProvider.allowGlobals() in the config, and
register your controller via the Module API or the $controllerProvider, e.g.

```
angular.module('myModule', []).controller('myController', function() {...});

angular.module('myModule', []).config(function($controllerProvider) {
  $controllerProvider.register('myController', function() {...});
});

```
2017-03-01 13:27:17 +01:00
Peter Bacon Darwin 19bc52127f fix(Angular): do not autobootstrap if the src exists but is empty
In Chrome an empty `src` attribute will be ignored, but in Firefox it seems
happy to prepend the `base[href]` and try to load whatever that is.
2017-02-27 11:53:44 +00:00
Georgios Kalpakas 4f69d38f09 fix($sanitize): prevent clobbered elements from freezing the browser
Closes #15699
2017-02-24 16:38:16 +00:00
Peter Bacon Darwin ebe90051ed fix(Angular): do not auto bootstrap if the currentScript has been clobbered 2017-02-24 14:53:22 +00:00
Peter Bacon Darwin a649758655 fix(Angular): do not auto bootstrap if the script source is bad and inside SVG 2017-02-24 14:52:13 +00:00
Peter Bacon Darwin c357b1aba6 test(Angular): refactor auto bootstrap tests 2017-02-24 14:46:27 +00:00
Martin Staffa 603b66e1fa docs(changelog): insert release notes for 1.2.32
They were only in the v1.2.x branch.
2017-02-24 11:09:11 +01:00
Martin Staffa 295043d32e docs($compile): clarify to which element scope isolation applies
Closes #13556
2017-02-22 21:05:44 +01:00
waahhhh 892d236afc docs(changelog): correct typo
changed spelling from "auto-bootstraping" to "auto-bootstrapping".

Closes #15729
2017-02-21 15:20:14 +01:00
Peter Bacon Darwin b7ee5ee3c6 chore(jenkins): disable unit testing on Safari
There is a strange failure in the animation code that only appears to happen
on Safari 10 on OS/X. While we investigate we are disabling this browser
to allow the development (and doc generation) to continue.
2017-02-20 20:09:38 +00:00
Georgios Kalpakas b55637a8f7 fix($animate): reset classNameFilter to null when a disallowed RegExp is used
Closes #14913
2017-02-17 11:26:23 +02:00
Georgios Kalpakas 9a2efb7b66 fix($animate): improve detection on ng-animate in classNameFilter RegExp
Fixes #14806
2017-02-17 11:26:21 +02:00
Martin Staffa db46d24491 chore(docs-app): add debounce to search input
This fixes issues where the search results do not correctly reflect
the search query. This happens in Firefox when you enter a search query
very rapidly.
There is probably an issue with the async behavior of the search / webworker,
so this is just a workaround.
2017-02-16 14:28:43 +01:00
Keith Walsh f779230f70 docs($resource): add minor clarification
Closes #15711
2017-02-16 11:59:35 +02:00
Martin Staffa 62494bae38 chore(docs-app): update links in header menu
They are now in the same order as angularjs.org

Closes #14351
2017-02-15 15:53:51 +01:00
Martin Staffa f85656e934 chore(docs-app): update the header style
Also adds a new fixed strip / bar about the AngularJS version

Closes #14963
Closes #15670
2017-02-15 15:53:51 +01:00
Martin Staffa b9d3185e52 docs(select, ngOptions): add ngAttrSize as argument
Closes #1619
2017-02-15 15:25:25 +01:00
Martin Staffa 43cf54c3a2 docs(ngModelController): improve $formatters and $parsers info
Closes #11714
Closes #8194
2017-02-15 13:05:15 +01:00
Martin Staffa 15149c1da1 docs(filterFilter): add note about self-referencing objects in array
Relate #6655, #6319
2017-02-15 12:19:06 +01:00
Martin Staffa 23e747331b docs(guide/directive): clarify which type of matching directives support
Closes #15710
2017-02-15 12:19:06 +01:00
Georgii Dolzhykov 71f437c15a refactor($rootScope): remove extraneous call to $parse in $evalAsync
Closes #15682
2017-02-09 23:38:03 +02:00
Michał Gołębiowski 2c7400e7d0 chore(jenkins): get rid of Opera from the Jenkins build script
The Opera launcher hasn't been installed for ages, but until Karma 1.4.0 the
error of Opera not being able to start was ignored. Karma has fixed the bug and
now Jenkins is failing.

This commit also removes Opera/Opera launcher mentions from the docs. We don't
support Opera officially anymore (it's sort-of supported via being based on
Blink).

Closes #15691
2017-02-09 12:56:59 +02:00
PRIJCK Frederik (FPRJ) 2af2607fba fix(filterFilter): don't throw if key.charAt is not a function
Previously, when an object has keys which are not of type string, `filterFilter`
would throw an exception for trying to call `key.charAt()`, which is a string
method.

This commit checks whether `charAt` is defined before calling it.

Fixes #15644

Closes #15660
2017-02-08 23:17:26 +02:00
mohamed amr a0641ea475 feat(errorHandlingConfig): make the depth for object stringification in errors configurable
Closes #15402
Closes #15433
2017-02-08 19:05:43 +02:00
Martin Staffa 538f4606ff fix(select): add attribute "selected" for select[multiple]
This helps screen readers identify the selected options,
see #14419
2017-02-08 17:44:47 +01:00
Martin Staffa 4385e1268a fix(select): keep original selection when using shift to add options in IE/Edge
In IE9-11 + Edge, the selected options were previously incorrect under the following
circumstances:
- at least two options are selected
- shift+click or shift+down/up is used to add to the selection (any number of options)

In these cases, only the last of the previously selected options and the newly selected
options would be selected.

The problems seems to be that the render engine gets confused when an option that
already has selected = true gets selected = true set again.

Note that this is not testable via unit test because it's not possible to simulate
click / keyboard events on option elements (the events are delegated to the select element
change event), and the problem also doesn't appear when modifying the option elements directly
and then using the selectController API. It seems that this only happens when you manipulate the
select directly in the user interface.

Fixes #15675
Closes #15676
2017-02-08 17:44:47 +01:00
Martin Staffa ba8b924bf5 test($http): ensure json deserialization errors are forwarded to error handler
Since https://github.com/angular/angular.js/commit/e13eeabd7e34a78becec06cfbe72c23f2dcb85f9,
errors thrown from onFulfilled and onRejected handlers are passed to the regular http
error handlers. Before this, JSON deserialization errors lead to hard application errors, and could
not be handled by application code. This behavior was introduced in https://github.com/angular/angular.js/commit/7b6c1d08aceba6704a40302f373400aed9ed0e0b, and originally, a malformed JSON string was forwarded
as the data to the http success response handler.

This commit adds a specifc test case, even though the behavior is unlikely to break in the future without
a change in the $q rejection handling.

Related #11433
Closes #15689
2017-02-08 17:41:23 +01:00
Matt Lewis 0ce9348bc0 fix($jsonpCallbacks): allow $window to be mocked in unit tests
Fixes #15685

Closes #15686
2017-02-08 18:07:17 +02:00
Georgios Kalpakas a29f66c465 chore(*): update dependencies (including changez-angular) 2017-02-08 18:07:17 +02:00
Georgios Kalpakas 79c4a712d7 docs(changelog): update with changes for 1.6.2 2017-02-07 15:26:25 +02:00
Martin Staffa 2f667b177c docs(guide/scopes): mention component directive scopes, reorder info
Closes #15634
2017-02-06 17:25:14 +01:00
Martin Staffa 07f34e7af3 docs: fix some dangling links
They broke during the Angular -> AngularJS rename
2017-02-06 16:42:49 +01:00
Georgios Kalpakas 493b4967de test($resource): fix broken test
(Introduced while "cleaning up" the tests for in edfb691.)
2017-02-05 17:56:51 +02:00
Georgios Kalpakas 8c1b4c020d refactor(*): remove ignored expensiveChecks argument passed to $parse()
This is a follow-up to #15094.

Closes #15680
2017-02-05 15:38:27 +02:00
Kyle Wuolle edfb691deb fix($resource): do not swallow errors in success callback
Previously, errors thrown inside the `success` callback would be swallowed by a
noop `catch()` handler. The `catch()` handler was added in order to avoid an
unnecessary "Possibly Unhandled Rejection" error, in case the user provided an
`error` callback (which would handle request errors).

The handler was added too "eagrly" and as a result would swallow errors thrown
in the `success` callback, despite the fact that those errors would _not_ be
handled by the `error` callback.

This commit fixes this, by adding the `catch()` handler "lazily", only when it
is certain that a rejection will be handled by the `error` callback.

Fixes #15624

Closes #15628
2017-02-04 21:00:32 +02:00
Kindy Lin 8162362217 fix($parse): make sure ES6 object computed properties are watched
Add the missing watches for ES6 object computed properties which were
implemented in #14407.

Closes #15678
2017-02-04 16:16:04 +02:00
Dimitris Vardoulakis 15581287a4 refactor(*): avoid non-existent property warnings from Closure Compiler
Closes #15672
2017-02-02 22:37:17 +02:00
Chris fd76d872fc docs(misc/started): update Twitter handle (@angularjs --> @angular)
Closes #15671
2017-02-02 19:29:25 +02:00
Jessica Soltero 3708162bc8 docs(guide/expression): typo in one-time-binding
Closes #15668
2017-02-02 12:45:10 +02:00
Michał Gołębiowski 813117da31 refactor($injector): remove the Chrome stringification hack
The Chrome stringification hack added in afcedff34c
is no longer needed. I verified that both of the commented out tests pass
on Chrome 56.
2017-02-01 15:02:11 +00:00
Michał Gołębiowski dc8762eff1 chore(anchorScroll): remove a Jasmine toHaveBeenCalled workaround
The Jasmine fix landed long time ago and we've updated Jasmine since that
happened.
2017-02-01 13:36:08 +00:00
Michał Gołębiowski 1e3c7d2922 docs($location): fix examples
The examples contained tests with assertions in form of regular equality
comparisons which would be noops and in case of an error nothing would get
reported. Also, one of the test mixed a HTML5 browser scenario with a non-HTML5
one.
2017-02-01 13:35:01 +00:00
Michał Gołębiowski 187fce7cdf docs($animation): fix weird spaces around colons 2017-02-01 13:29:06 +00:00
Peter Bacon Darwin 2b00e8893e feat(ngModel): add $overrideModelOptions support
This change allows developers to modify the model options for an `ngModel`
directive programmatically.

Closes #15415
2017-02-01 12:19:37 +00:00
Patrick McElhaney d03357a320 docs(guide/component): add replace option
Add `replace` to the table comparing components to directives options. The
`replace` option is deprecated, but it is still documented for directives, so
it is worth pointing it out as a difference between directives and components.

Closes #15658
2017-01-31 19:34:29 +02:00
Georgios Kalpakas 03dbd94cb8 fix($compile): do not swallow thrown errors in test
In e13eeab, errors/rejections produced during fetching the template or compiling
an asynchronous directive, where overzealously silenced. This doesn't make any
difference in (most) production apps, where `$exceptionHandler` does not rethrow
the errors. In tests though (where `$exceptionHandler` rethrows by default), it
can unexpectedly "swallow" thrown errors.

This commit fixes it by removing the extraneous `.catch(noop)`, thus letting
errors thrown by `$exceptionHandler` to surface.

The changes in 'compileSpec.js' essentially revert the modifications that were
unnecessarily (and incorrectly) done in e13eeab (and also one incorrect
modification from [c22615c][1]).

[1]: https://github.com/angular/angular.js/commit/c22615cbfbaa7d1712e79b6bf2ace6eb41313bac#diff-348c2f3781ed66a24894c2046a52c628L2084

Fixes #15629

Closes #15631
2017-01-30 19:23:50 +02:00
Peter Bacon Darwin 0ef193f1a3 chore(docs): don't use bower for docs dependencies 2017-01-30 13:31:56 +00:00
Frederik Prijck dea8ae9af0 chore(doc-gen): show arguments as a subsection of the usage section
Previously, on the docs of directives which include the `animation` section, `arguments` are shown as an `h3` element below the `animation` `h2` element, making it look like it's a subsection of `animations`.

This commit ensures that the àrgument` `h3`element is rendered correctly after the `usage` `h2` element.

Fixes #15645
Closes #15646
2017-01-28 15:20:05 +01:00
vteremasov 39a90a9c20 fix($resource): correctly unescape /\. even if \. comes from a param value
Closes #15627
2017-01-27 18:15:49 +02:00
Jason Bedard fd4f011118 perf($compile): do not use deepWatch in literal one-way bindings
Avoiding deep watchers for array/object literals will improve watcher
performance of all literals passed as one-way bindings, especially those
containing references to large/complex objects.

BREAKING CHANGE:
Previously when a literal value was passed into a directive/component via
one-way binding it would be watched with a deep watcher.

For example, for `<my-component input="[a]">`, a new instance of the array
would be passed into the directive/component (and trigger $onChanges) not
only if `a` changed but also if any sub property of `a` changed such as
`a.b` or `a.b.c.d.e` etc.

This also means a new but equal value for `a` would NOT trigger such a
change.

Now literal values use an input-based watch similar to other directive/component
one-way bindings. In this context inputs are the non-constant parts of the
literal. In the example above the input would be `a`. Changes are only
triggered when the inputs to the literal change.

Closes #15301
2017-01-27 10:05:51 +00:00
Jason Bedard 7084deccaa feat($parse): allow watching array/object of inputs to literal values
The inputs of array/object literals are now watched for changes.
If the an input changes then a new instance of the literal will be
provided when the parsed expression is executed.

Closes #15301
2017-01-27 10:05:50 +00:00
frederikprijck 7019d9f27a fix($sniffer): allow history for NW.js apps
Previously `$sniffer` incorrectly detected NW.js apps as Chrome Packaged Apps,
disallowing them to use the history API.

This commit correctly detects NW.js apps and allows them to use the History API.

Fixes #15474

Closes #15633
2017-01-27 00:11:58 +02:00
Martin Staffa 89f3e3b0af fix(select): keep ngModel when selected option is recreated by ngRepeat
Fixes #15630 
Closes #15632
2017-01-26 13:29:11 +01:00
Georgios Kalpakas 641e13acc1 refactor(*): replace HashMap with NgMap
For the time being, we will be using `NgMap`, which is an API-compatible
implementation of native `Map` (for the features required in Angular). This will
make it easy to switch to using the native implementations, once they become
more stable.

Note:
At the moment some native implementations are still buggy (often in subtle ways)
and can cause hard-to-debug failures.)

Closes #15483
2017-01-25 23:20:18 +02:00
Georgios Kalpakas 028fa1abb2 test(hashKey): add tests for hashKey() 2017-01-25 23:17:06 +02:00
Martin Staffa 3c259ce624 docs(ngDisabled): list some elements that natively support
Closes #15473
2017-01-25 20:07:50 +01:00
Martin Staffa ef7d18b1c4 docs($compile): fix AngularJS versions 2017-01-25 20:03:04 +01:00
Peter Bacon Darwin 03043839d5 docs(*): ensure naming is correct for Angular(JS) versions 2017-01-25 08:18:39 +00:00
Georgios Kalpakas d24617bf32 fix(ngAnimate): correctly animate transcluded clones with templateUrl
Previously, `$animate` would decide whether an animation should be cancelled
based on some assumption that didn't hold in specific cases (e.g. when animating
transcluded clones with `templateUrl` directives on them for the first time). As
a result, the entering elements would not be animated in such cases. This
affected commonly used, structural built-in directives (`ngIf`, `ngRepeat`,
`ngSwitch` etc).
This commit fixes it by avoiding invalid assumptions (i.e. by taking into
account the transformations that take place while compiling such elements).

Partly addresses #14074 and #14124.

Fixes #15510

Closes #15514
2017-01-24 23:54:33 +02:00
Georgios Kalpakas 2b7a359363 test(ngAnimate): make expectations more specific 2017-01-24 23:54:33 +02:00
Georgios Kalpakas e7d8eee46d refactor(ngAnimate): simplify functions and remove redundant args/calls
Simplifies/Optimizes the following functions:

- `areAnimationsAllowed()`
- `cleanupEventListeners()`
- `closeChildAnimations()`
- `clearElementAnimationState()`
- `markElementAnimationState()`
- `findCallbacks()`

Although not its primary aim, this commit also offers a small performance boost
to animations (~5% as measured with the `animation-bp` benchmark).
2017-01-24 23:54:32 +02:00
Georgios Kalpakas 565ca6a1f5 chore(benchmarks): add basic animation benchmark 2017-01-24 23:54:32 +02:00
Georgios Kalpakas 54a7caf667 docs(*): document the breaking change in 7ceb5f6 2017-01-20 22:47:27 +02:00
Peter Bacon Darwin eba7c28261 chore(package): relax yarn version constraint 2017-01-19 08:18:40 +00:00
Peter Bacon Darwin 83b67b6c54 revert:docs(guide/scope): access the current element's scope in the console
This reverts commit c6bd58eb58.
The recommended approach of just typing scope does not appear to work out of the box.

See https://github.com/angular/angular.js/pull/4884#issuecomment-273686380
2017-01-19 07:55:33 +00:00
frederikprijck d85b3f56ac fix(ngValue): correctly update the value property when value is undefined
Previously, when the expression evaluated to `undefined` the `value` property
was not updated. This happened because jqLite/jQuery's `prop(_, undefined)` is
treated as a getter, thus not apdating the property.

This commit fixes it by setting the property to `null` instead.
(On IE9 we use `''` - see inline comments for more info.)

Fixes #15603

Closes #15605
2017-01-18 19:01:11 +02:00
Raphael Jamet 1cf728e209 fix($compile) : add base[href] to the list of RESOURCE_URL context attributes
Previously, `base[href]` didn't have an SCE context. This was not ideal, because
`base[href]` affects the behavior of all relative URLs across the page.
Furthermore, since #15145, `base[href]` also affects which URLs are considered
trusted under the 'self' policy for white- or black-listed resource URLs.

This commit tightens the security of Angular apps, by adding `base[href]` to the
list of RESOURCE_URL context attributes, essentially putting the same
constraints on bindings to `base[href]` as on iframe or script sources.

Refer to the
[`$sce` API docs](https://code.angularjs.org/snapshot/docs/api/ng/service/$sce)
for more info on SCE trusted contexts.

Closes #15597

BREAKING CHANGE:

Previously, `<base href="{{ $ctrl.baseUrl }}" />` would not require `baseUrl` to
be trusted as a RESOURCE_URL. Now, `baseUrl` will be sent to `$sce`'s
RESOURCE_URL checks. By default, it will break unless `baseUrl` is of the same
origin as the application document.

Refer to the
[`$sce` API docs](https://code.angularjs.org/snapshot/docs/api/ng/service/$sce)
for more info on how to trust a value in a RESOURCE_URL context.

Also, concatenation in trusted contexts is not allowed, which means that the
following won't work: `<base href="/something/{{ $ctrl.partialPath }}" />`.

Either construct complex values in a controller (recommended):

```js
this.baseUrl = '/something/' + this.partialPath;
```
```html
<base href="{{ $ctrl.baseUrl }}" />
```

Or use string concatenation in the interpolation expression (not recommended
except for the simplest of cases):

```html
<base href="{{ '/something/' + $ctrl.partialPath }}" />
```
2017-01-18 12:02:15 +02:00
Martin Brown 675f99bc5a docs(guide/i18n): fix typos
Closes #15616
2017-01-17 18:09:19 +02:00
Georgios Kalpakas 5b6763f575 docs(changelog): update with changes for 1.5.11 2017-01-13 01:07:45 +02:00
Georgios Kalpakas 22392ef949 style($compile): remove trailing whitespace 2017-01-12 23:12:01 +02:00
Grace Benz f63c46406f docs($compile): add some detail about $onChanges
Closes #15604
2017-01-12 22:39:47 +02:00
Georgios Kalpakas 3983a66eda test(e2e): make test less flakey-prone 2017-01-12 22:24:49 +02:00
Peter Bacon Darwin 74e232dab7 fix(ngMockE2E): ensure that mocked $httpBackend uses correct $browser
The fix from #13124 enabled ngMock and ngMockE2E to work together but
did it in a way that meant that the "real" `$httpBackend` service that
was used in pass-through depended upon a different `$browser` service
to the rest of the app.

This broke Protractor since it watches the `$browser` for outstanding
requests and the pass through requests were being tracked by the wrong
`$browser` instance.

Closes #15593
2017-01-12 09:46:24 +00:00
Georgios Kalpakas 2e27df690c chore(*): update dgeni-packages (and other devDependencies)
`dgeni-packages` prior to version 0.16.3 specified `engine.yarn: '^0.17.9'`,
which was unnecessarily strict and would cause any task to fail if someone had a
yarn version >=0.18.0.
Other devDependencies were also updated (because why not).

Closes #15600
2017-01-12 00:33:26 +02:00
Sammy Jelin c522a43f41 fix($route): make asynchronous tasks count as pending requests
Protractor users were having a problem where if they had asynchonous code in a
`route.resolve` or `route.resolveRedirectTo` variable, Protractor was not
waiting for that code to complete before continuing. See
https://github.com/angular/protractor/issues/789#issuecomment-190983200 for
details.

This commit fixes it by ensuring that `$browser#outstandingRequestCount` is
properly increased/decreased while `$route` (asynchronously) processes a route.

Also, enhanced `ngMock` to wait for pending requests, before calling callbacks
from `$browser.notifyWhenNoOutstandingRequests()`.

Related to angular/protractor#789.

Closes #14159
2017-01-12 00:07:22 +02:00
frederikprijck 9c722cfcd2 fix($compile): allow the usage of "$" in isolate scope property alias
Previously, when using an alias for an isolate scope or `bindings` property
(e.g. `alias: '<attrName'` instead of `attrName: '<'`), a `$compile:iscp` error
was thrown if the attribute name contained a "$".
This commit removes the error by changing the regex to allow "$" characters in
the attribute name when using a property alias.

Fixes: #15586

Closes #15594
2017-01-11 11:39:03 +02:00
Alex Dobkin 9412962696 fix($sce): consider document base URL in 'self' URL policy
Page authors can use the `<base>` tag in HTML to specify URL to use as a base
when resovling relative URLs. This can cause SCE to reject relative URLs on the
page, because they fail the same-origin test.

To improve compatibility with the `<base>` tag, this commit changes the logic
for matching URLs to the 'self' policy to allow URLs that match the protocol and
domain of the base URL in addition to URLs that match the loading origin.

**Security Note:**
If an attacker can inject a `<base>` tag into the page, they can circumvent SCE
protections. However, injecting a `<base>` tag typically requires the ability to
inject arbitrary HTML into the page, which is a more serious vulnerabilty than
bypassing SCE.

Fixes #15144

Closes #15145
2017-01-10 14:20:15 +02:00
Georgios Kalpakas 752f411c8b fix($location): correctly handle external URL change during $digest
Previously, when the URL was changed directly (e.g. via `location.href`) during
a `$digest` (e.g. via `scope.$evalAsync()` or `promise.then()`) the change was
not handled correctly, unless a `popstate` or `hashchange` event was fired
synchronously.

This was an issue when calling `history.pushState()/replaceState()` in all
browsers, since these methods do not emit any event. This was also an issue when
setting `location.href` in IE11, where (unlike other browsers) no `popstate`
event is fired at all for hash-only changes ([known bug][1]) and the
`hashchange` event is fired asynchronously (which is too late).

This commit fixes both usecases by:

1. Keeping track of `$location` setter methods being called and only processing
   a URL change if it originated from such a call. If there is a URL difference
   but no setter method has been called, this means that the browser URL/history
   has been updated directly and the change hasn't yet been propagated to
   `$location` (e.g. due to no event being fired synchronously or at all).
2. Checking for URL/state changes at the end of the `$digest`, in order to
   detect changes via `history` methods (that took place during the `$digest`).

[1]: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/

Fixes #11075
Fixes #12571
Fixes #15556

Closes #15561
2017-01-09 23:58:10 +02:00
Georgios Kalpakas 2b360bf305 fix(*): detect external changes in history.state
Previously, `$browser.$$checkUrlChange()` (which was run before each `$digest`)
would only detect an external change (i.e. not via `$location`) to the browser
URL. External changes to `history.state` would not be detected and propagated to
`$location`.

This would not be a problem if changes were followed by a `popstate` or
`hashchange` event (which would call `cacheStateAndFireUrlChange()`). But since
`history.pushState()/replaceState()` do not fire any events, calling these
methods manually would result in `$location` getting out-of-sync with the actual
history state.

This was not detected in tests, because the mocked `window.history` would
incorrectly trigger `popstate` when calling `pushState()/replaceState()`, which
"covered" the bug.

This commit fixes it by always calling `cacheState()`, before looking for and
propagating a URL/state change.
2017-01-09 23:57:31 +02:00
Nikhil Wins c00903be7a refactor($interpolate): remove unnecessary else
Closes: #15575
2017-01-05 13:57:56 +01:00
David Jöch 3776b2ef30 style($log): fix indentation
Closes #15579
2017-01-05 13:02:01 +02:00
Florian Berger e193cda800 docs(*): fix typos
Closes #15577
2017-01-05 11:04:17 +02:00
Nic Mitchell 296e9f6cdf chore(*): update copyright year
Closes #15573
2017-01-04 12:14:45 +02:00
Georgios Kalpakas 035f1cd90e docs(guide/$location): correctly format heading 2017-01-03 22:36:28 +02:00
Georgios Kalpakas 0694af8fc4 fix(angularInit): allow auto-bootstraping from inline script
Some browsers (e.g. Safari 9.x, PhantomJS) do not set `link.origin/protocol`
correctly, when setting `link.href` to `null`, which prevented auto-bootstraping
Angular from scripts without a `src` attribute (i.e. inline scripts).
Inline scripts are on the same origin as the loading page, so auto-bootstraping
should be allowed.

Fixes #15567

Closes #15571
2017-01-03 19:14:57 +02:00
Soumya Ranjan Mohanty 090a839ac9 docs(guide/services): fix syntax for Jasmine v2.x
Closes #15570
2017-01-03 16:13:22 +02:00
Georgios Kalpakas 5294d208ae docs(ngShow/ngHide): improve docs and fix inconsistencies between ngShow/ngHide
Closes #15471
2017-01-03 12:41:11 +02:00
Deco 4082fb03b6 docs(tutorial/step_04): fix typo
Closes #15562
2016-12-31 12:31:31 +02:00
Georgios Kalpakas a24777a2c4 fix(input): fix step validation for input[type=number/range]
Previously, the validation would incorrectly fail in certain cases (e.g.
`step: 0.01`, `value: 1.16 or 20.1`), due to Floating Point Arithmetic
limitations. The previous fix for FPA limitations (081d06ff) tried to solve the
issue by converting the numbers to integers, before doing the actual
calculation, but it failed to account for cases where the conversion itself
returned non-integer values (again due to FPA limitations).
This commit fixes it by ensuring that the values used in the final calculation
are always integers.

Fixes #15504

Closes #15506
2016-12-29 10:16:07 +02:00
Georgios Kalpakas 99a3adbdaa docs(CHANGELOG.md): add missing commas 2016-12-29 10:08:40 +02:00
supasak 922a83e94f fix($resource): delete $cancelRequest() in toJSON()
Closes #15244
2016-12-29 10:00:42 +02:00
Peter Bacon Darwin ee1458fdba docs(CHANGELOG): add 1.6.1 release info 2016-12-23 10:53:38 +00:00
Peter Bacon Darwin cfc16b17f7 chore(deps): update changez-angular version 2016-12-23 10:52:32 +00:00
Naomi Black 8ceeeccdd7 docs(guide/forms): remove implicit bias from example
Closes #15543
2016-12-23 11:42:16 +02:00
Thomas Grainger 316f60fd14 fix($q): Add traceback to unhandled promise rejections
Fixes #14631
Closes #15527
2016-12-21 20:08:24 +01:00
sp00m f768da2488 fix($$cookieReader): correctly handle forbidden access to document.cookie
In certain cases (e.g. on LG webOS using the `file:` protocol), access to
`document.cookie` may not be allowed and throw an error. This could break
`$http` which relies on `$$cookieReader()` for retrieving the XSRF token.
This commit fixes it by treating `document.cookie` as empty, when access to it
is fordibben.

Fixes  #15523

Closes #15532
2016-12-20 23:28:34 +02:00
Simon Legner c898ae9e45 docs(CHANGELOG): fix typo
Closes #15529
2016-12-20 10:29:36 +02:00
Thomas Grainger 47b14bf3e3 docs(guide/migration): improve grammar
Closes #15526
2016-12-20 01:16:24 +02:00
Georgios Kalpakas 4e143fcae3 fix(ngOptions): do not unset the selected property unless necessary
Previously, when updating the value of a `select[multiple]` element, all options
were first set to `selected = false` and then the selected ones were set to
`true`. By setting an already selected option to `selected = false` and then
`true` again - essentially unselecting and reselecting it - caused some browsers
(including Firefox, IE and under some circumstances Chrome) to unexpectedly
scroll to the last selected option.

This commit fixes it by ensuring that the `selected` property is only set if its
current value is different than the new one and even then it is set to its final
value at once (i.e. without first setting it to `false`), thus avoiding the
undesirable behavior.

Fixes #15477

Closes #15478
2016-12-19 22:44:36 +02:00
Peter Neave 15d07c0108 docs(tutorial/step_13): add missing dependency phoneDetails module
Closes #15521
2016-12-19 20:53:38 +02:00
Peter Bacon Darwin d08e31984d chore(doc-gen): update to dgeni-packages@0.16.2 2016-12-16 14:08:37 +00:00
Georgios Kalpakas fbe0b73ab5 docs(CHANGELOG.md): remove reverted bug fix
Related to 02f045b.
2016-12-16 11:11:22 +02:00
Peter Bacon Darwin 07987e26e9 docs(CHANGELOG): add note to 1.5.0-beta.1 2016-12-15 20:41:13 +00:00
Georgios Kalpakas c6842b5a65 docs(CHANGELOG.md): add changes for v1.5.10 2016-12-15 19:18:29 +02:00
Georgios Kalpakas baa30695f3 docs(CHANGELOG.md): add missing entries for v1.6.0-rc.0/v1.6.0 2016-12-15 19:18:28 +02:00
Georgios Kalpakas d03cac4cd5 docs($q): document the default value for errorOnUnhandledRejections 2016-12-14 00:43:52 +02:00
Jannick Fahlbusch e9a4de035d docs($interval): improve fn description
If no additional arguments are passed, the function is called with the current iteration count.

Closes #15503
2016-12-13 14:07:58 +02:00
Georgios Kalpakas ce8abac66d fix(ngModelOptions): work correctly when on the template of replace directives
Previously, in order for `ngModel` and `ngModelOptions` to work correctly
together, the latter's pre-linking function should be run before the former's
pre-linking function. This was typically what happened, except when `ngModel`
was used on an element which also had a `replace` directive, whose template
included `ngModelOptions`. In that case, the order was reversed.

This commit fixes it by moving the initialization logic of `ngModelOptions` from
its pre-linking function to its controller's `$onInit()` lifecycle hook.

Fixes #15492

Closes #15493
2016-12-13 00:09:56 +02:00
Georgios Kalpakas fade1db253 refactor(testabilityPatch): remove code duplication 2016-12-13 00:04:57 +02:00
Aaron Brewer 29f3bf4bd6 docs(ngMessageExp): improve description
Closes #15486
2016-12-11 20:58:13 +02:00
idhindsight 7f8bc587ae docs(tutorial/step_09): fix typo (it's --> its)
Closes #15485
2016-12-10 22:15:35 +02:00
David Rodenas Pico 1ecf6efa81 chore(benchpress): add an ngClass benchmark
Closes #15243
2016-12-09 12:20:31 +02:00
Georgios Kalpakas b82097085d perf(ngClass): avoid unnecessary .data() accesses, deep-watching and copies
Includes the following commits (see #15246 for details):

- **perf(ngClass): only access the element's `data` once**

- **refactor(ngClass): simplify conditions**

- **refactor(ngClass): move helper functions outside the closure**

- **refactor(ngClass): exit `arrayDifference()` early if an input is empty**

- **perf(ngClass): avoid deep-watching (if possible) and unnecessary copies**

  The cases that should benefit most are:

  1. When using large objects as values (e.g.: `{loaded: $ctrl.data}`).
  2. When using objects/arrays and there are frequent changes.
  3. When there are many `$index` changes (e.g. addition/deletion/reordering in large `ngRepeat`s).

  The differences in operations per digest include:

  1. `Regular expression (when not changed)`
     **Before:** `equals()`
     **After:**  `toClassString()`

  2. `Regular expression (when changed)`
     **Before:** `copy()` + 2 x `arrayClasses()` + `shallowCopy()`
     **After:**  2 x `split()`

  3. `One-time expression (when not changed)`
     **Before:** `equals()`
     **After:**  `toFlatValue()` + `equals()`*

  4. `One-time expression (when changed)`
     **Before:** `copy()` + 2 x `arrayClasses()` + `shallowCopy()`
     **After:**  `copy()`* + `toClassString()`* + 2 x `split()`

  5. `$index modulo changed`
     **Before:** `arrayClasses()`
     **After:**  -

  (*): on flatter structure

  In large based on #14404. Kudos to @drpicox for the initial idea and a big part
  of the implementation.

Closes #14404

Closes #15246
2016-12-09 11:49:10 +02:00
Georgios Kalpakas 5fd5e131b6 fix(ngClassOdd/Even): add/remove the correct classes when expression/$index change simultaneously 2016-12-09 11:49:09 +02:00
David Rodenas Pico 7b2ed4ae41 test(ngClass): add some tests about one-time bindings and objects inside arrays 2016-12-09 11:49:09 +02:00
Georgios Kalpakas 7c80d8afa9 refactor(ngClass): remove redundant $observer and dependency on $animate
Includes the following commits (see #15246 for details):

- **refactor(ngClass): remove unnecessary dependency on `$animate`**

- **refactor(ngClass): remove redundant `$observe`r**

  The code was added in b41fe9f in order to support having both `ngClass` and
  interpolation in `class` work together. `ngClass` has changed considerably since
  b41fe9f and for simple cases to work the `$observe`r is no longer necessary (as
  indicated by the expanded test still passing).

  That said, it is a [documented known issue][1] that `ngClass` should not be used
  together with interpolation in `class` and more complicated cases do not work
  anyway.

[1]: https://docs.angularjs.org/api/ng/directive/ngClass#known-issues
2016-12-09 11:48:02 +02:00
Aman Mittal d05f894aff docs(guide/external-resources): add "AngularJS in Action" book
Closes #15480
2016-12-09 11:34:53 +02:00
Georgios Kalpakas 1c0c2605d3 fix($rootScope): when adding/removing watchers during $digest
Previously, adding a watcher during a `$digest` (i.e. from within a watcher),
would result in the next watcher getting skipped. Similarly, removing a watcher
during a `$digest` could result in the current watcher being run twice (if the
removed watcher had not run yet in the current `$digest`).

This commit fixes both cases by keeping track of the current watcher index
during a digest and properly updating it when adding/removing watchers.

Fixes #15422

Closes #15424
2016-12-09 10:39:54 +02:00
Peter Bacon Darwin 5b477614ff chore(docs): fix plnkrOpener to use $onInit
Since 1.6.0 does not preassign bindings before running the controller
constructor function, we must move initialisation into the `$onInit`
method.
2016-12-09 01:12:59 +00:00
Peter Bacon Darwin 9595337f67 chore(package): update docs app to run on 1.6.0 2016-12-08 23:42:55 +00:00
Georgios Kalpakas a9e91461a8 fix(jqLite): silently ignore after() if element has no parent
Previously, the element was always assumed to have a parent and an error was
thrown when that was not the case.
This commit makes jqLite consistent with jQuery, which silently ignores a call
on elements that do not have a parent.

Fixes #15331
Closes #15367

Closes #15475
2016-12-08 18:11:34 +02:00
Peter Bacon Darwin 4e7f652b5f chore(package): update dist-tag for master/1.7 2016-12-08 13:56:34 +00:00
Georgios Kalpakas e922c38612 docs(ngMockE2E): correctly document the data arg of $httpBackend.when(...) 2016-12-08 14:53:47 +02:00
Peter Bacon Darwin 1b7ddd3491 chore(bower/npm): use npm (not yarn) to publish
yarn has an annoying behaviour in that it wants to do the version bumping
for you and requires an interactive terminal to tell it what version.
2016-12-08 12:21:57 +00:00
Peter Bacon Darwin 4c5afb5cc2 chore(jenkins): ensure deps are installed before trying to use them 2016-12-08 11:07:52 +00:00
Peter Bacon Darwin f0dc288824 chore(jenkins): fix working directory to make yarn work 2016-12-08 10:53:07 +00:00
Peter Bacon Darwin 70490ef717 docs(CHANGELOG): fix 1.6.0 release name 2016-12-08 10:21:48 +00:00
Peter Bacon Darwin dfef3bf2d4 chore(package): update dist-tag for 1.6.0 release 2016-12-08 10:18:07 +00:00
Peter Bacon Darwin f727adddeb docs(CHANGELOG): 1.6.0 release notes 2016-12-08 10:15:05 +00:00
Peter Bacon Darwin fc89a85406 chore(jenkins): fix yarn and grunt installation 2016-12-07 10:53:37 +00:00
Georgios Kalpakas b4f5377a2f docs(guide/migration): fix typo 2016-12-07 01:55:48 +02:00
Georgios Kalpakas 7a667c77e3 fix(select): do not throw when removing the element (e.g. via ngIf)
Fixes #15466

Closes #15468
2016-12-06 12:43:34 +02:00
Georgios Kalpakas 752b1e69b7 fix($resource): allow params in hostname (except for IPv6 addresses)
Support for IPv6 addresses (in b643f0d) was too aggressive and broke support for params in the
`hostname` part of a URL.
This commit restores support for params in the `hostname`, as long as it is not an IPv6 address.

Fixes #14542

Closes #14906
2016-12-03 09:56:18 +02:00
ojab 1102c84f59 docs(guide/templates): camelCase directive name for consistency
Closes #15465
2016-12-02 23:40:22 +02:00
Martin Staffa 245b27101a fix(ngOptions): don't add comment nodes as empty options
When the "empty option" element contains a transclusion directive, the result of the compilation always includes a comment node. Since we are adding / removing the "selected" attribute on the empty option, we need to make sure it's an actual element.

To solve this, we take advantage of the fact the each option element has an option directive that tries to register the option with the selectController. With ngOptions, this registerOption function is normally noop'd since it's not possible to add dynamic options. Now if the result of the empty option compilation is a comment, we re-define the function so that it catches empty options when they are actually linked / rendered.

Closes #15454
Closes #15459
2016-12-02 18:48:49 +01:00
Martin Staffa f5d2bf3d6e chore(doc-gen): render @example tag in ngdoc @method
Currently, ngdoc `@method` ignores `@example` tags and does not output them.
This is usually not a problem, as examples are mostly defined directly
in the `@description` via code blocks or `<example>`
elements. However, some methods still have `@example` tags (possibly
from a previous docs version).

While not absolutely necessary, having special markup for Examples
makes them a) easier to find visually in the docs, and b) easier
to link to as they will have a unique id.

Closes #14722
Closes #15448
2016-12-01 16:11:25 +01:00
Georgios Kalpakas 9c2d0b8af3 test($compile): work around Chrome issue with reported size for <foreignObject>
Since Chrome 53-57+, the reported size of `<foreignObject>` elements and their
descendants is affected by global display settings (e.g. font size) and browser
settings (e.g. default zoom level). This could cause tests incorrectly failing
due to such settings.

In order to avoid false negatives, we now compare against the size of the
equivalent, hand-written SVG instead of fixed widths/heights.

Fixes #15333

Closes #15458
2016-12-01 14:28:39 +02:00
Rob Wu 465d173455 feat(security): do not bootstrap from unknown schemes with a different origin 2016-12-01 11:29:22 +00:00
Martin Staffa f1db7d735b docs(ngModelOptions): fix broken layout because of code section 2016-11-29 23:51:13 +01:00
Peter Bacon Darwin b77defde81 docs(contribute): mention nvm-windows 2016-11-29 13:25:59 +00:00
Peter Bacon Darwin afafb7a8ab docs(FAQ) add link to security guide 2016-11-29 13:25:58 +00:00
Peter Bacon Darwin f04fcdfe9f chore(grunt): check node, yarn and grunt-cli versions
If global versions of node, yarn or grunt-cli don't match what we expect then blow up.
2016-11-29 13:25:58 +00:00
Peter Bacon Darwin 5dd3a35f47 chore(grunt): run gulp directly rather than through npm 2016-11-29 13:25:58 +00:00
Peter Bacon Darwin ca139dee8e chore(utils): install npm-run to simplify scripts 2016-11-29 13:25:58 +00:00
Peter Bacon Darwin 099083352a chore(travis): install grunt-cli globally to simplify scripts 2016-11-29 13:25:57 +00:00
Peter Bacon Darwin f54e9242fc chore(jenkins): remove path to grunt
grunt is installed globally on jenkins so we can just use it directly.
2016-11-29 13:25:57 +00:00
Peter Bacon Darwin d003ec1d41 docs(ComponentRouter): it is unlikely ever to appear on bower or CDN 2016-11-29 13:25:57 +00:00
Peter Bacon Darwin aadee894da chore(validate-commit): remove redundant scripts 2016-11-29 13:25:57 +00:00
Peter Bacon Darwin ad4e86a582 chore(saucelabs): update sauce-connect to 4.4.1 2016-11-29 13:25:57 +00:00
Peter Bacon Darwin e8f9cbfdce chore(bower): set clone depth to speed up releases
We already use `git clone ... --depth=1` for the `code.angularjs.org`
repository, which speeds up the cloning of the repository.
2016-11-29 13:25:57 +00:00
Peter Bacon Darwin d4863a82fa chore(npm-bundle-deps): remove unused script
This became reduntant as of 507ee2d9ba
2016-11-29 13:25:57 +00:00
Peter Bacon Darwin 736b6c7fed style(*): fix no-useless-escape eslint errors 2016-11-29 13:25:56 +00:00
Peter Bacon Darwin 1dedcdf2bc docs(*): switch from npm to yarn 2016-11-29 13:25:56 +00:00
Peter Bacon Darwin 05c3336f92 chore(dependencies): USE YARN (and node 6) 2016-11-29 13:24:50 +00:00
Martin Staffa d1e4f5728c chore(docs-app): improve deprecation box layout
Deprecated boxes for APIs appear right under the header and were missing
a bit of margin. Boxes for methods still look good even with the
additional margin.
2016-11-28 19:01:43 +01:00
Wesley Cho 9f61e74be3 docs($rootScope): add note about watching File objects
- Add note recommending against watching `File` objects with deep watchers

Closes #15440
2016-11-28 18:50:36 +01:00
Wesley Cho 4059600d20 docs(*): add deprecation notice for angular.lowercase/uppercase
Closes #15441
Closes #14316
2016-11-28 18:50:36 +01:00
Georgios Kalpakas c625b0d568 chore(docs): use correct script-URL for plnkr on snapshot
Fixes #15437

Closes #15438
2016-11-28 12:14:55 +02:00
Wesley Cho 04cbe1e74f refactor($q): replace occurrences of .when() with .resolve()
Related to #13709.

Closes #15442
2016-11-28 12:02:10 +02:00
Georgios Kalpakas 9399d68d98 docs(*): document the breaking change introduced in e1da4be (#15434)
Closes #15434
2016-11-25 11:38:50 +00:00
Peter Bacon Darwin 4a320ab9f0 docs(CHANGELOG): add missing feature to 1.6.0-rc.0 2016-11-25 09:59:14 +00:00
Georgios Kalpakas 44f9ae6126 docs(input[number]): fix typo 2016-11-25 10:44:39 +02:00
Peter Bacon Darwin cdb9e08f4e docs(CHANGELOG): add missing "closes" link 2016-11-24 21:34:31 +00:00
309 changed files with 22503 additions and 38280 deletions
-1
View File
@@ -1,6 +1,5 @@
bower_components/**
build/**
docs/bower_components/**
docs/app/assets/js/angular-bootstrap/**
docs/config/templates/**
node_modules/**
+28 -19
View File
@@ -1,27 +1,36 @@
***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.**
<!--
IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATION
-->
**Do you want to request a *feature* or report a *bug*?**
<!--
- For *SUPPORT QUESTIONS*, use one of the
[support channels](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question).
- Before submitting, please **SEARCH GITHUB** for a similar issue or PR. -->
**I'm submitting a ...**
<!-- (check one with "x") -->
- [ ] bug report
- [ ] feature request
- [ ] other (Please do not submit support requests here (see above))
**Current behavior:**
<!-- Describe how the bug manifests / how the current features are insufficient. -->
**What is the current behavior?**
**Expected / new behavior:**
<!-- Describe what the behavior would be without the bug / how the feature would improve AngularJS -->
**Minimal reproduction of the problem with instructions:**
<!--
If the current behavior is a bug or you can illustrate your feature request better with an example,
please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:yBpEi4).
-->
**Angular version:** 1.x.y
<!-- Check whether this is still an issue in the most recent stable or in the snapshot AngularJS version (https://code.angularjs.org/snapshot/) -->
**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).**
**Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
<!-- All browsers where this could be reproduced (and Operating System if relevant) -->
**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)**
**Anything else:**
<!-- e.g. stacktraces, related issues, suggestions how to fix -->
+1 -2
View File
@@ -1,2 +1 @@
4
6
+3 -15
View File
@@ -1,13 +1,12 @@
language: node_js
sudo: false
node_js:
- '4.4'
- '6'
cache:
yarn: true
directories:
- node_modules
- bower_components
- docs/bower_components
branches:
except:
@@ -36,19 +35,8 @@ addons:
packages:
- g++-4.8
install:
# Check the size of caches
- du -sh ./node_modules ./bower_components/ ./docs/bower_components/ || true
# - npm config set registry http://23.251.144.68
# Disable the spinner, it looks bad on Travis
- npm config set spin false
# Log HTTP requests
- npm config set loglevel http
#- npm install -g npm@2.5
# Install npm dependencies and ensure that npm cache is not stale
- npm install
before_script:
- du -sh ./node_modules ./bower_components/ || true
- ./scripts/travis/before_build.sh
script:
+1936 -13
View File
File diff suppressed because it is too large Load Diff
+15 -11
View File
@@ -15,7 +15,7 @@ today! Here are the guidelines we'd like you to follow:
## <a name="coc"></a> Code of Conduct
Help us keep Angular open and inclusive. Please read and follow our [Code of Conduct][coc].
Help us keep AngularJS open and inclusive. Please read and follow our [Code of Conduct][coc].
## <a name="question"></a> Got a Question or Problem?
@@ -29,7 +29,7 @@ If you find a bug in the source code or a mistake in the documentation, you can
submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
with a fix.
**Localization Issues:** Angular.js uses the [Google Closure I18N library] to generate
**Localization Issues:** AngularJS uses the [Google Closure I18N library] to generate
its own I18N files (the ngLocale module). This means that any changes to these files would be lost
the next time that we import the library.
Since the Closure library i18n data is itself auto-generated from the data of the
@@ -81,7 +81,7 @@ quickly:
* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
* **Motivation for or Use Case** - explain why this is a bug for you
* **Angular Version(s)** - is it a regression?
* **AngularJS Version(s)** - is it a regression?
* **Browsers and Operating System** - is this a problem with all browsers or only specific ones?
* **Reproduce the Error** - provide a live example (using [Plunker][plunker] or
[JSFiddle][jsfiddle]) or an unambiguous set of steps.
@@ -108,7 +108,7 @@ Before you submit your pull request consider the following guidelines:
* Create your patch, **including appropriate test cases**.
* Follow our [Coding Rules](#rules).
* Run the full Angular test suite, as described in the [developer documentation][dev-doc],
* Run the full AngularJS test suite, as described in the [developer documentation][dev-doc],
and ensure that all tests pass.
* Commit your changes using a descriptive commit message that follows our
[commit message conventions](#commit) and passes our commit message presubmit hook
@@ -132,11 +132,11 @@ Before you submit your pull request consider the following guidelines:
git push origin my-fix-branch
```
In GitHub, send a pull request to `angular:master`.
In GitHub, send a pull request to `angular.js:master`.
If we suggest changes, then:
* Make the required updates.
* Re-run the Angular test suite to ensure tests are still passing.
* Re-run the AngularJS test suite to ensure tests are still passing.
* Commit your changes to your branch (e.g. `my-fix-branch`).
* Push the changes to your GitHub repository (this will update your Pull Request).
@@ -189,10 +189,10 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
* All features or bug fixes **must be tested** by one or more [specs][unit-testing].
* All public API methods **must be documented** with ngdoc, an extended version of jsdoc (we added
support for markdown and templating via @ngdoc tag). To see how we document our APIs, please check
out the existing ngdocs and see [this wiki page][ngDocs].
out the existing source code and see [this wiki page][ngDocs].
* With the exceptions listed below, we follow the rules contained in
[Google's JavaScript Style Guide][js-style-guide]:
* **Do not use namespaces**: Instead, wrap the entire angular code base in an anonymous closure and
* **Do not use namespaces**: Instead, wrap the entire AngularJS code base in an anonymous closure and
export our API explicitly rather than implicitly.
* Wrap all code at **100 characters**.
* Instead of complex inheritance hierarchies, we **prefer simple objects**. We use prototypal
@@ -209,7 +209,9 @@ 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.
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 `yarn 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
@@ -229,7 +231,8 @@ Any line of the commit message cannot be longer 100 characters! This allows the
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.
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:
@@ -266,7 +269,8 @@ The body should include the motivation for the change and contrast this with pre
The footer should contain any information about **Breaking Changes** and is also the place to
[reference GitHub issues that this commit closes][closing-issues].
**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.
**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].
+56 -17
View File
@@ -10,26 +10,63 @@ var path = require('path');
var e2e = require('./test/e2e/tools');
var semver = require('semver');
var fs = require('fs');
var exec = require('shelljs').exec;
var pkg = require(__dirname + '/package.json');
var useNodeVersion = fs.readFileSync('.nvmrc', 'utf8');
if (!semver.satisfies(process.version, useNodeVersion)) {
throw new Error('Invalid node version; please use node v' + useNodeVersion);
// Node.js version checks
if (!semver.satisfies(process.version, pkg.engines.node)) {
reportOrFail('Invalid node version (' + process.version + '). ' +
'Please use a version that satisfies ' + pkg.engines.node);
}
// Yarn version checks
var expectedYarnVersion = pkg.engines.yarn;
var currentYarnVersion = exec('yarn --version', {silent: true}).stdout.trim();
if (!semver.satisfies(currentYarnVersion, expectedYarnVersion)) {
reportOrFail('Invalid yarn version (' + currentYarnVersion + '). ' +
'Please use a version that satisfies ' + expectedYarnVersion);
}
// Grunt CLI version checks
var expectedGruntVersion = pkg.engines.grunt;
var currentGruntVersions = exec('grunt --version', {silent: true}).stdout;
var match = /^grunt-cli v(.+)$/m.exec(currentGruntVersions);
if (!match) {
reportOrFail('Unable to compute the current grunt-cli version. We found:\n' +
currentGruntVersions);
} else {
if (!semver.satisfies(match[1], expectedGruntVersion)) {
reportOrFail('Invalid grunt-cli version (' + match[1] + '). ' +
'Please use a version that satisfies ' + expectedGruntVersion);
}
}
// Ensure Node.js dependencies have been installed
if (!process.env.TRAVIS && !process.env.JENKINS_HOME) {
var yarnOutput = exec('yarn install');
if (yarnOutput.code !== 0) {
throw new Error('Yarn install failed: ' + yarnOutput.stderr);
}
}
module.exports = function(grunt) {
//grunt plugins
// this loads all the node_modules that start with `grunt-` as plugins
require('load-grunt-tasks')(grunt);
// load additional grunt tasks
grunt.loadTasks('lib/grunt');
grunt.loadNpmTasks('angular-benchpress');
// compute version related info for this build
var NG_VERSION = versionInfo.currentVersion;
NG_VERSION.cdn = versionInfo.cdnVersion;
var dist = 'angular-' + NG_VERSION.full;
if (versionInfo.cdnVersion == null) {
throw new Error('Unable to read CDN version, are you offline or has the CDN not been properly pushed?');
throw new Error('Unable to read CDN version, are you offline or has the CDN not been properly pushed?\n' +
'Perhaps you want to set the NG1_BUILD_NO_REMOTE_VERSION_REQUESTS environment variable?');
}
//config
@@ -135,7 +172,6 @@ module.exports = function(grunt) {
'test/**/*.js',
'i18n/**/*.js',
'!docs/app/assets/js/angular-bootstrap/**',
'!docs/bower_components/**',
'!docs/config/templates/**',
'!src/angular.bind.js',
'!i18n/closure/**',
@@ -292,10 +328,9 @@ module.exports = function(grunt) {
},
shell: {
'npm-install': {
command: 'node scripts/npm/check-node-modules.js'
'install-node-dependencies': {
command: 'yarn'
},
'promises-aplus-tests': {
options: {
stdout: false,
@@ -322,13 +357,6 @@ module.exports = function(grunt) {
}
});
// global beforeEach task
if (!process.env.TRAVIS) {
grunt.task.run('shell:npm-install');
}
//alias tasks
grunt.registerTask('test', 'Run unit, docs and e2e tests with Karma', ['eslint', 'package', 'test:unit', 'test:promises-aplus', 'tests:docs', 'test:protractor']);
grunt.registerTask('test:jqlite', 'Run the unit tests with Karma' , ['tests:jqlite']);
@@ -350,3 +378,14 @@ module.exports = function(grunt) {
grunt.registerTask('ci-checks', ['ddescribe-iit', 'merge-conflict', 'eslint']);
grunt.registerTask('default', ['package']);
};
function reportOrFail(message) {
if (process.env.TRAVIS || process.env.JENKINS_HOME) {
throw new Error(message);
} else {
console.log('===============================================================================');
console.log(message);
console.log('===============================================================================');
}
}
+1 -1
View File
@@ -1,6 +1,6 @@
The MIT License
Copyright (c) 2010-2016 Google, Inc. http://angularjs.org
Copyright (c) 2010-2017 Google, Inc. http://angularjs.org
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
+1 -1
View File
@@ -7,7 +7,7 @@ in its `contrib/externs` directory.
The definitions contain externs for use with the Closure compiler (aka
JSCompiler). Passing these files to the --externs parameter of a compiler
pass allows using type annotations for AngularJS objects. For example,
Angular's $scope objects can be annotated as:
AngularJS's $scope objects can be annotated as:
```js
/** @type {angular.Scope} */
var scope = $scope;
+2 -2
View File
@@ -19,7 +19,7 @@ piece of cake. Best of all? It makes development fun!
* Contribution guidelines: [CONTRIBUTING.md](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md)
* Dashboard: https://dashboard.angularjs.org
##### Looking for Angular 2? Go here: https://github.com/angular/angular
##### Looking for the new Angular? Go here: https://github.com/angular/angular
Building AngularJS
---------
@@ -80,7 +80,7 @@ HTML is also used to determine the wiring of the app. Special attributes in the
to load the app, which components or controllers to use for each element, etc. We specify "what"
gets loaded, but not "how". This declarative approach greatly simplifies app development in a sort
of WYSIWYG way. Rather than spending time on how the program flows and orchestrating the various
moving parts, we simply define what we want and Angular will take care of the dependencies.
moving parts, we simply define what we want and AngularJS will take care of the dependencies.
#### Data Handling made simple
Data and Data Models in AngularJS are plain JavaScript objects and one can add and change properties
+4 -4
View File
@@ -1,6 +1,6 @@
# Triage new issues/PRs on github
This document shows the steps the Angular team is using to triage issues.
This document shows the steps the AngularJS team is using to triage issues.
The labels are used later on for [planning releases](#assigning-work).
@@ -45,12 +45,12 @@ This process based on the idea of minimizing user pain
1. Label `frequency: *` How often does this issue come up? How many developers does this affect? Chose just one of the following:
* low - obscure issue affecting a handful of developers
* moderate - impacts a common usage pattern
* high - impacts most or all Angular apps
* high - impacts most or all AngularJS apps
1. Label `severity: *` - How bad is the issue? Chose just one of the following:
* security issue
* regression
* memory leak
* broken expected use - it's hard or impossible for a developer using Angular to accomplish something that Angular should be able to do
* broken expected use - it's hard or impossible for a developer using AngularJS to accomplish something that AngularJS should be able to do
* confusing - unexpected or inconsistent behavior; hard-to-debug
* inconvenience - causes ugly/boilerplate code in apps
1. Label `component: *`
@@ -95,7 +95,7 @@ You can mention him in the relevant thread like this: `@btford`.
> Thanks for submitting this issue!
> Unfortunately, we don't think this functionality belongs in core.
> The good news is that you could easily implement this as a third-party module and publish it on Bower and/or npm.
> The good news is that you could easily implement this as a third-party module and publish it on Bower and/or to the npm repository.
## Assigning Work
-1
View File
@@ -146,7 +146,6 @@ var angularFiles = {
'ngTouch': [
'src/ngTouch/touch.js',
'src/ngTouch/swipe.js',
'src/ngTouch/directive/ngClick.js',
'src/ngTouch/directive/ngSwipe.js'
],
'ngAria': [
+44
View File
@@ -0,0 +1,44 @@
'use strict';
angular
.module('animationBenchmark', ['ngAnimate'], config)
.controller('BenchmarkController', BenchmarkController);
// Functions - Definitions
function config($compileProvider) {
$compileProvider
.commentDirectivesEnabled(false)
.cssClassDirectivesEnabled(false)
.debugInfoEnabled(false);
}
function BenchmarkController($scope) {
var self = this;
var itemCount = 1000;
var items = (new Array(itemCount + 1)).join('.').split('');
benchmarkSteps.push({
name: 'create',
fn: function() {
$scope.$apply(function() {
self.items = items;
});
}
});
benchmarkSteps.push({
name: '$digest',
fn: function() {
$scope.$root.$digest();
}
});
benchmarkSteps.push({
name: 'destroy',
fn: function() {
$scope.$apply(function() {
self.items = [];
});
}
});
}
+22
View File
@@ -0,0 +1,22 @@
/* eslint-env node */
'use strict';
module.exports = function(config) {
config.set({
scripts: [
{
id: 'jquery',
src: 'jquery-noop.js'
}, {
id: 'angular',
src: '/build/angular.js'
}, {
id: 'angular-animate',
src: '/build/angular-animate.js'
}, {
src: 'app.js'
}
]
});
};
+1
View File
@@ -0,0 +1 @@
// Override me with ?jquery=/bower_components/jquery/dist/jquery.js
+28
View File
@@ -0,0 +1,28 @@
<style>
[ng-cloak] { display: none !important; }
.animation-container .ng-enter,
.animation-container .ng-leave {
transition: all 0.1s;
}
.animation-container .ng-enter,
.animation-container .ng-leave.ng-leave-active {
opacity: 0;
}
.animation-container .ng-enter.ng-enter-active,
.animation-container .ng-leave {
opacity: 1;
}
</style>
<div ng-app="animationBenchmark" ng-cloak ng-controller="BenchmarkController as bm">
<div class="container-fluid">
<h2>Large collection of elements animated in and out with ngAnimate</h2>
<div class="animation-container">
<div ng-repeat="i in bm.items track by $index">
Just a plain ol' element
</div>
</div>
</div>
</div>
+108
View File
@@ -0,0 +1,108 @@
'use strict';
var app = angular.module('ngClassBenchmark', []);
app.controller('DataController', function DataController($scope) {
this.init = function() {
this.numberOfTodos = 1000;
this.implementation = 'tableOptimized';
this.completedPeriodicity = 3;
this.importantPeriodicity = 13;
this.urgentPeriodicity = 29;
this.createTodos(100);
this.setTodosValuesWithSeed(0);
};
this.clearTodos = function() {
this.todos = null;
};
this.createTodos = function(count) {
var i;
this.todos = [];
for (i = 0; i < count; i++) {
this.todos.push({
id: i + 1,
completed: false,
important: false,
urgent: false
});
}
};
this.setTodosValuesWithSeed = function(offset) {
var i, todo;
for (i = 0; i < this.todos.length; i++) {
todo = this.todos[i];
todo.completed = 0 === (i + offset) % this.completedPeriodicity;
todo.important = 0 === (i + offset) % this.importantPeriodicity;
todo.urgent = 0 === (i + offset) % this.urgentPeriodicity;
}
};
this.init();
benchmarkSteps.push({
name: 'setup',
fn: function() {
$scope.$apply();
this.clearTodos();
this.createTodos(this.numberOfTodos);
}.bind(this)
});
benchmarkSteps.push({
name: 'create',
fn: function() {
// initialize data for first time that will construct the DOM
this.setTodosValuesWithSeed(0);
$scope.$apply();
}.bind(this)
});
benchmarkSteps.push({
name: '$apply',
fn: function() {
$scope.$apply();
}
});
benchmarkSteps.push({
name: 'update',
fn: function() {
// move everything but completed
this.setTodosValuesWithSeed(3);
$scope.$apply();
}.bind(this)
});
benchmarkSteps.push({
name: 'unclass',
fn: function() {
// remove all classes
this.setTodosValuesWithSeed(NaN);
$scope.$apply();
}.bind(this)
});
benchmarkSteps.push({
name: 'class',
fn: function() {
// add all classes as the initial state
this.setTodosValuesWithSeed(0);
$scope.$apply();
}.bind(this)
});
benchmarkSteps.push({
name: 'destroy',
fn: function() {
this.clearTodos();
$scope.$apply();
}.bind(this)
});
});
+15
View File
@@ -0,0 +1,15 @@
/* eslint-env node */
'use strict';
module.exports = function(config) {
config.set({
scripts: [{
id: 'angular',
src: '/build/angular.js'
},
{
src: 'app.js'
}]
});
};
+177
View File
@@ -0,0 +1,177 @@
<style>
.gold {
background: gold;
}
.silver {
background: silver;
}
.table tbody tr > td.success {
background-color: #dff0d8;
}
.table tbody tr > td.error {
background-color: #f2dede;
}
.table tbody tr > td.warning {
background-color: #fcf8e3;
}
.table tbody tr > td.info {
background-color: #d9edf7;
}
.completed {
text-decoration: line-through;
}
.important {
font-weight: bold;
}
.urgent {
color: red;
}
</style>
<div ng-app="ngClassBenchmark" ng-cloak class="container-fluid">
<div ng-controller="DataController as benchmark" class="row">
<div class="col-lg-12">
<div class="well">
<h3>Parameters</h3>
<br>
<p>
<label>Number of todos</label><br>
<input type="number" ng-model="benchmark.numberOfTodos">
</p>
<br>
<p>
<label>Implementation</label><br>
<div class="radio">
<label>
<input ng-model="benchmark.implementation" value="tableOptimized"
type="radio" name="implementation">
Table optimized <br>
<code>ng-class="todo.completed && 'success'"</code>
</label>
</div>
<div class="radio">
<label>
<input ng-model="benchmark.implementation" value="table"
type="radio" name="implementation">
Table <br>
<code>ng-class="{success: todo.completed}"</code>
</label>
</div>
<div class="radio">
<label>
<input ng-model="benchmark.implementation" value="list"
type="radio" name="implementation">
List <br>
<code>ng-class="{completed: todo.completed, urgent: todo.urgent, important: todo.important"}</code>
</label>
</div>
<div class="radio">
<label>
<input ng-model="benchmark.implementation" value="singleOptimized"
type="radio" name="implementation">
Single ngClass optimized <br>
<code>
ng-class="{'panel-success': !!benchmark.todos, 'panel-danger': !benchmark.todos}"
</code>
</label>
</div>
<div class="radio">
<label>
<input ng-model="benchmark.implementation" value="single"
type="radio" name="implementation">
Single ngClass <br>
<code>
ng-class="{'panel-success': benchmark.todos, 'panel-danger': !benchmark.todos}"
</code>
</label>
</div>
</p>
</div>
<br>
<h3>Example</h3>
<div ng-switch="benchmark.implementation">
<table ng-switch-when="tableOptimized" class="table">
<thead>
<tr>
<th>todo #id</th>
<th>completed?</th>
<th>urgent?</th>
<th>important?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todo in benchmark.todos track by todo.id"
ng-class="todo.completed && 'active'"
ng-class-even="todo.completed && todo.important && 'gold'"
ng-class-odd="todo.completed && todo.important && 'silver'"
>
<td>#{{todo.id}}</td>
<td>{{todo.completed}}</td>
<td ng-class="todo.urgent && 'danger'">{{todo.urgent}}</td>
<td ng-class="todo.important && 'success'">{{todo.important}}</td>
</tr>
</tbody>
</table>
<table ng-switch-when="table" class="table">
<thead>
<tr>
<th>todo #id</th>
<th>completed?</th>
<th>urgent?</th>
<th>important?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todo in benchmark.todos track by todo.id"
ng-class="{active: todo.completed}"
ng-class-even="{gold: todo.completed && todo.important}"
ng-class-odd="{silver: todo.completed && todo.important}"
>
<td>#{{todo.id}}</td>
<td>{{todo.completed}}</td>
<td ng-class="{danger: todo.urgent}">{{todo.urgent}}</td>
<td ng-class="{success: todo.important}">{{todo.important}}</td>
</tr>
</tbody>
</table>
<ul ng-switch-when="list">
<li ng-repeat="todo in benchmark.todos track by todo.id"
ng-class="{
completed: todo.completed,
urgent: todo.urgent,
important: todo.important
}">#{{todo.id}}</li>
</ul>
<div ng-switch-when="singleOptimized"
class="panel"
ng-class="{'panel-success': !!benchmark.todos, 'panel-danger': !benchmark.todos}">
<div class="panel-heading">
<h3 class="panel-title">Information</h3>
</div>
<div class="panel-body"> The title is green because there are todos... </div>
</div>
<div ng-switch-when="single"
class="panel"
ng-class="{'panel-success': benchmark.todos, 'panel-danger': !benchmark.todos}">
<div class="panel-heading">
<h3 class="panel-title">Information</h3>
</div>
<div class="panel-body"> The title is green because there are todos... </div>
</div>
</div>
</div>
</div>
</div>
<br><br><br>
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "angularjs",
"license": "MIT",
"devDependencies": {
"jquery": "3.1.0",
"jquery": "3.2.1",
"jquery-2.2": "jquery#2.2.4",
"jquery-2.1": "jquery#2.1.4",
"closure-compiler": "https://dl.google.com/closure-compiler/compiler-20140814.zip",
-208
View File
@@ -1,208 +0,0 @@
#!/usr/bin/env node
// TODO(vojta): pre-commit hook for validating messages
// TODO(vojta): report errors, currently Q silence everything which really sucks
'use strict';
var child = require('child_process');
var fs = require('fs');
var util = require('util');
var q = require('qq');
var GIT_LOG_CMD = 'git log --grep="%s" -E --format=%s %s..HEAD';
var GIT_TAG_CMD = 'git describe --tags --abbrev=0';
var HEADER_TPL = '<a name="%s"></a>\n# %s (%s)\n\n';
var LINK_ISSUE = '[#%s](https://github.com/angular/angular.js/issues/%s)';
var LINK_COMMIT = '[%s](https://github.com/angular/angular.js/commit/%s)';
var EMPTY_COMPONENT = '$$';
var warn = function() {
console.log('WARNING:', util.format.apply(null, arguments));
};
var parseRawCommit = function(raw) {
if (!raw) return null;
var lines = raw.split('\n');
var msg = {}, match;
msg.hash = lines.shift();
msg.subject = lines.shift();
msg.closes = [];
msg.breaks = [];
lines.forEach(function(line) {
match = line.match(/(?:Closes|Fixes)\s#(\d+)/);
if (match) msg.closes.push(parseInt(match[1], 10));
});
match = raw.match(/BREAKING CHANGE:([\s\S]*)/);
if (match) {
msg.breaking = match[1];
}
msg.body = lines.join('\n');
match = msg.subject.match(/^(.*)\((.*)\):\s(.*)$/);
if (!match || !match[1] || !match[3]) {
warn('Incorrect message: %s %s', msg.hash, msg.subject);
return null;
}
msg.type = match[1];
msg.component = match[2];
msg.subject = match[3];
return msg;
};
var linkToIssue = function(issue) {
return util.format(LINK_ISSUE, issue, issue);
};
var linkToCommit = function(hash) {
return util.format(LINK_COMMIT, hash.substr(0, 8), hash);
};
var currentDate = function() {
var now = new Date();
var pad = function(i) {
return ('0' + i).substr(-2);
};
return util.format('%d-%s-%s', now.getFullYear(), pad(now.getMonth() + 1), pad(now.getDate()));
};
var printSection = function(stream, title, section, printCommitLinks) {
printCommitLinks = printCommitLinks === undefined ? true : printCommitLinks;
var components = Object.getOwnPropertyNames(section).sort();
if (!components.length) return;
stream.write(util.format('\n## %s\n\n', title));
components.forEach(function(name) {
var prefix = '-';
var nested = section[name].length > 1;
if (name !== EMPTY_COMPONENT) {
if (nested) {
stream.write(util.format('- **%s:**\n', name));
prefix = ' -';
} else {
prefix = util.format('- **%s:**', name);
}
}
section[name].forEach(function(commit) {
if (printCommitLinks) {
stream.write(util.format('%s %s\n (%s', prefix, commit.subject, linkToCommit(commit.hash)));
if (commit.closes.length) {
stream.write(',\n ' + commit.closes.map(linkToIssue).join(', '));
}
stream.write(')\n');
} else {
stream.write(util.format('%s %s\n', prefix, commit.subject));
}
});
});
stream.write('\n');
};
var readGitLog = function(grep, from) {
var deferred = q.defer();
// TODO(vojta): if it's slow, use spawn and stream it instead
child.exec(util.format(GIT_LOG_CMD, grep, '%H%n%s%n%b%n==END==', from), function(code, stdout, stderr) {
var commits = [];
stdout.split('\n==END==\n').forEach(function(rawCommit) {
var commit = parseRawCommit(rawCommit);
if (commit) commits.push(commit);
});
deferred.resolve(commits);
});
return deferred.promise;
};
var writeChangelog = function(stream, commits, version) {
var sections = {
fix: {},
feat: {},
perf: {},
breaks: {}
};
commits.forEach(function(commit) {
var section = sections[commit.type];
var component = commit.component || EMPTY_COMPONENT;
if (section) {
section[component] = section[component] || [];
section[component].push(commit);
}
if (commit.breaking) {
sections.breaks[component] = sections.breaks[component] || [];
sections.breaks[component].push({
subject: util.format('due to %s,\n %s', linkToCommit(commit.hash), commit.breaking),
hash: commit.hash,
closes: []
});
}
});
stream.write(util.format(HEADER_TPL, version, version, currentDate()));
printSection(stream, 'Bug Fixes', sections.fix);
printSection(stream, 'Features', sections.feat);
printSection(stream, 'Performance Improvements', sections.perf);
printSection(stream, 'Breaking Changes', sections.breaks, false);
};
var getPreviousTag = function() {
var deferred = q.defer();
child.exec(GIT_TAG_CMD, function(code, stdout, stderr) {
if (code) deferred.reject('Cannot get the previous tag.');
else deferred.resolve(stdout.replace('\n', ''));
});
return deferred.promise;
};
var generate = function(version, file) {
getPreviousTag().then(function(tag) {
console.log('Reading git log since', tag);
readGitLog('^fix|^feat|^perf|BREAKING', tag).then(function(commits) {
console.log('Parsed', commits.length, 'commits');
console.log('Generating changelog to', file || 'stdout', '(', version, ')');
writeChangelog(file ? fs.createWriteStream(file) : process.stdout, commits, version);
});
});
};
// publish for testing
exports.parseRawCommit = parseRawCommit;
exports.printSection = printSection;
// hacky start if not run by jasmine :-D
if (process.argv.join('').indexOf('jasmine-node') === -1) {
generate(process.argv[2], process.argv[3]);
}
-108
View File
@@ -1,108 +0,0 @@
/* global describe: false, beforeEach: false, afterEach: false, it: false, expect: false */
'use strict';
describe('changelog.js', function() {
var ch = require('./changelog');
describe('parseRawCommit', function() {
it('should parse raw commit', function() {
var msg = ch.parseRawCommit(
'9b1aff905b638aa274a5fc8f88662df446d374bd\n' +
'feat(scope): broadcast $destroy event on scope destruction\n' +
'perf testing shows that in chrome this change adds 5-15% overhead\n' +
'when destroying 10k nested scopes where each scope has a $destroy listener\n');
expect(msg.type).toBe('feat');
expect(msg.hash).toBe('9b1aff905b638aa274a5fc8f88662df446d374bd');
expect(msg.subject).toBe('broadcast $destroy event on scope destruction');
expect(msg.body).toBe('perf testing shows that in chrome this change adds 5-15% overhead\n' +
'when destroying 10k nested scopes where each scope has a $destroy listener\n');
expect(msg.component).toBe('scope');
});
it('should parse closed issues', function() {
var msg = ch.parseRawCommit(
'13f31602f396bc269076ab4d389cfd8ca94b20ba\n' +
'feat(ng-list): Allow custom separator\n' +
'bla bla bla\n\n' +
'Closes #123\nCloses #25\n');
expect(msg.closes).toEqual([123, 25]);
});
it('should parse breaking changes', function() {
var msg = ch.parseRawCommit(
'13f31602f396bc269076ab4d389cfd8ca94b20ba\n' +
'feat(ng-list): Allow custom separator\n' +
'bla bla bla\n\n' +
'BREAKING CHANGE: first breaking change\nsomething else\n' +
'another line with more info\n');
expect(msg.breaking).toEqual(' first breaking change\nsomething else\nanother line with more info\n');
});
});
describe('printSection', function() {
var output;
var streamMock = {
write: function(str) {
output += str;
}
};
beforeEach(function() {
output = '';
});
it('should add a new line at the end of each breaking change list item ' +
'when there is 1 item per component', function() {
var title = 'test';
var printCommitLinks = false;
var section = {
module1: [{subject: 'breaking change 1'}],
module2: [{subject: 'breaking change 2'}]
};
var expectedOutput =
'\n## test\n\n' +
'- **module1:** breaking change 1\n' +
'- **module2:** breaking change 2\n' +
'\n';
ch.printSection(streamMock, title, section, printCommitLinks);
expect(output).toBe(expectedOutput);
});
it('should add a new line at the end of each breaking change list item ' +
'when there are multiple items per component', function() {
var title = 'test';
var printCommitLinks = false;
var section = {
module1: [
{subject: 'breaking change 1.1'},
{subject: 'breaking change 1.2'}
],
module2: [
{subject: 'breaking change 2.1'},
{subject: 'breaking change 2.2'}
]
};
var expectedOutput =
'\n## test\n\n' +
'- **module1:**\n' +
' - breaking change 1.1\n' +
' - breaking change 1.2\n' +
'- **module2:**\n' +
' - breaking change 2.1\n' +
' - breaking change 2.2\n' +
'\n';
ch.printSection(streamMock, title, section, printCommitLinks);
expect(output).toBe(expectedOutput);
});
});
});
+1
View File
@@ -0,0 +1 @@
.visible-phone{display:none}.visible-desktop{display:block}.navbar{display:block}.navbar .container{padding:0 16px;width:auto}.navbar .brand{float:left;margin:8px 80px 0 8px;padding:0}.navbar .brand a{display:block;height:30px;margin:6px 0 5px 0;overflow:hidden;padding:0;width:117px}.navbar .nav{float:right}.navbar .nav .dropdown-toggle{color:rgba(255,255,255,0.87);font-size:16px;font-weight:300;line-height:56px;padding:0 24px;text-transform:uppercase;transition:all .3s}.navbar .nav .dropdown-toggle:hover,.navbar .nav .dropdown-toggle:active,.navbar .nav .dropdown-toggle:focus{background:#37474F;color:#fff}.navbar .nav .dropdown-menu{background:#37474F;border:none;border-radius:0;box-shadow:0 0 16px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.24);color:#fff;left:auto;margin:0;padding:0;right:0}.navbar .nav .dropdown-menu:after,.navbar .nav .dropdown-menu:before{display:none}.navbar .nav .dropdown-menu li{border-bottom:1px solid rgba(38,50,56,0.56);box-sizing:border-box;line-height:48px}.navbar .nav .dropdown-menu li:last-child{border:none}.navbar .nav .dropdown-menu a{background:#37474F;color:#fff;font-weight:300;line-height:48px;padding:0 16px;transition:all .2s}.navbar .nav .dropdown-menu a:hover,.navbar .nav .dropdown-menu a:focus{background:#455A64}.navbar .navbar-search{left:200px;margin:0;position:absolute;right:440px;top:8px;width:auto}.navbar .navbar-search i{color:#546E7A;font-size:16px;left:12px;position:absolute;top:11px}.navbar .navbar-search .search-query{background:#37474F;border:none;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#546E7A;font-size:14px;height:40px;width:100%;padding:0 16px 0 32px;text-shadow:none;transition:all .3s}.navbar .navbar-search .search-query:-webkit-autofill,.navbar .navbar-search .search-query:-webkit-autofill:hover,.navbar .navbar-search .search-query:-webkit-autofill:focus{background-color:#fff;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#455A64}.navbar .navbar-search .search-query:hover,.navbar .navbar-search .search-query:active,.navbar .navbar-search .search-query:focus{background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,0.24);color:#2196F3}.navbar .navbar-search .search-query::-webkit-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query::-moz-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-ms-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-moz-placeholder{color:#546E7A}#navbar-main .navbar-inner{background:#263238;height:56px}#navbar-notice{z-index:1029;top:56px}#navbar-notice .navbar-inner{background:#ECEFF1;box-shadow:0 0 3px rgba(0,0,0,0.12),0 3px 3px rgba(0,0,0,0.24);height:auto}.site-notice{padding:4px 0;text-align:center;font-size:13px;margin:0}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.visible-phone{display:block}.visible-desktop{display:none}}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.homepage .container{padding:16px;width:auto}.homepage .span1{width:auto}.homepage .span2{width:auto}.homepage .span3{width:auto}.homepage .span4{width:auto}.homepage .span5{width:auto}.homepage .span6{width:auto}.homepage .span7{width:auto}.homepage .span8{width:auto}.homepage .span9{width:auto}.homepage .span10{width:auto}.homepage .navbar .container{padding:0 8px}.homepage #navbar-main .navbar-inner{height:40px}.homepage #navbar-main .brand{margin:6px 0 0 0}.homepage #navbar-main .brand a{margin:0}.homepage #navbar-main .nav{margin:0}.homepage #navbar-main .nav .dropdown-toggle{font-size:12px;line-height:40px;padding:0 8px}.homepage #navbar-main .dropdown-menu a{padding:0 8px}.homepage #navbar-main .navbar-search{background:#263238;border-bottom:1px solid #263238;left:0;right:0;top:100%}.homepage #navbar-main .navbar-search i{left:12px;top:7px}.homepage #navbar-main .navbar-search .search-query{border-radius:0;height:32px}.homepage #navbar-notice{top:40px}.homepage #navbar-notice .site-notice{font-size:11px}.homepage .hero{padding:80px 32px 32px 32px}.homepage .hero h2{background-size:230px 60px;height:60px;width:230px}}
+101 -6
View File
@@ -53,13 +53,13 @@ h1,h2,h3,h4,h5,h6 {
}
.header .brand {
padding-top: 6px;
padding-bottom: 0px;
}
.header .brand img {
margin-top: 5px;
height: 30px;
margin-top: 0;
height: auto;
vertical-align: top;
}
.docs-search {
@@ -82,6 +82,11 @@ h1,h2,h3,h4,h5,h6 {
margin-right: 10px;
}
.navbar .navbar-search i {
top: 13px;
font-size: 12px;
}
.docs-search > .search-query:focus {
outline: 0;
}
@@ -297,6 +302,7 @@ iframe.example {
}
.search-results-container {
position: relative;
padding-bottom: 1em;
border-top: 1px solid #111;
background: #181818;
@@ -435,15 +441,17 @@ iframe.example {
background: #f1f1f1;
}
.sup-header {
#navbar-sub {
padding-top: 10px;
padding-bottom: 5px;
background: rgba(245,245,245,0.88);
box-shadow: 0 0 2px #999;
z-index: 1028;
top: 83px;
}
.main-body-grid {
margin-top: 120px;
margin-top: 144px;
position: relative;
}
@@ -454,7 +462,7 @@ iframe.example {
.main-body-grid > .grid-left {
position: fixed;
top: 120px;
top: 144px;
bottom: 0;
overflow: auto;
}
@@ -662,6 +670,10 @@ ul.events > li {
max-width: 100%;
}
.deprecation {
margin-top: 15px;
}
.deprecation .title {
float: left;
margin-right: 5px;
@@ -823,3 +835,86 @@ ul.events > li {
iframe[name="example-anchoringExample"] {
height: 400px;
}
/*
angular-topnav.css and bootstrap overrides
*/
.navbar .navbar-inner .container {
padding: 0 16px;
width: auto;
height: auto;
}
.navbar .nav > li {
float: left;
}
.navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 48px;
}
#navbar-main .navbar-inner, #navbar-notice .navbar-inner {
box-shadow: none;
}
#navbar-sub .container {
max-width: 970px;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
background-color: inherit;
}
@media handheld and (max-width:800px), screen and (max-device-width:800px), screen and (max-width:800px) {
.navbar {
min-height: auto;
}
.search-results-container {
top: 32px;
overflow: auto;
max-height: 85vh;
padding-bottom: 0;
position: static;
}
.search-close {
right: 1px;
margin-left: 0;
top: 41px;
padding: 5px 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
box-shadow: none;
width: auto;
bottom: auto;
left: auto;
}
.navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
padding: 0 8px;
}
.homepage #navbar-notice {
top: 72px;
}
#navbar-notice .navbar-inner {
box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 3px 3px rgba(0, 0, 0, .24)
}
#navbar-sub {
position: relative;
top: 17px;
margin-top: 80px;
padding-bottom: 0;
margin-bottom: 0;
}
}
+1 -1
View File
@@ -4,7 +4,7 @@
/* global importScripts, lunr */
// Load up the lunr library
importScripts('../components/lunr.js-0.5.12/lunr.min.js');
importScripts('../components/lunr-0.7.2/lunr.min.js');
// Create the lunr index - the docs should be an array of object, each object containing
// the path and search terms for a page
+2 -2
View File
@@ -18,8 +18,8 @@ describe('doc.angularjs.org', function() {
var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
ngBindLink.click();
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('ngClick');
var mainHeader = element(by.css('.main-body h1 '));
expect(mainHeader.getText()).toEqual('ngClick');
});
+11 -9
View File
@@ -44,30 +44,31 @@ describe('docs.angularjs.org', function() {
var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
ngBindLink.click();
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('ngClick');
var mainHeader = element(by.css('.main-body h1 '));
expect(mainHeader.getText()).toEqual('ngClick');
});
it('should be resilient to trailing slashes', function() {
browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/');
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('angular.noop');
var mainHeader = element(by.css('.main-body h1 '));
expect(mainHeader.getText()).toEqual('angular.noop');
});
it('should be resilient to trailing "index"', function() {
browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index');
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('angular.noop');
var mainHeader = element(by.css('.main-body h1 '));
expect(mainHeader.getText()).toEqual('angular.noop');
});
it('should be resilient to trailing "index/"', function() {
browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index/');
var pageBody = element(by.css('h1'));
expect(pageBody.getText()).toEqual('angular.noop');
var mainHeader = element(by.css('.main-body h1 '));
expect(mainHeader.getText()).toEqual('angular.noop');
});
@@ -78,7 +79,8 @@ describe('docs.angularjs.org', function() {
it('should display an error if the page does not exist', function() {
browser.get('build/docs/index-production.html#!/api/does/not/exist');
expect(element(by.css('h1')).getText()).toBe('Oops!');
var mainHeader = element(by.css('.main-body h1 '));
expect(mainHeader.getText()).toEqual('Oops!');
});
});
+1 -1
View File
@@ -63,7 +63,7 @@ angular.module('DocsController', ['currentVersionData'])
$scope.loading = 0;
var INDEX_PATH = /^(\/|\/index[^\.]*.html)$/;
var INDEX_PATH = /^(\/|\/index[^.]*.html)$/;
if (!$location.path() || INDEX_PATH.test($location.path())) {
$location.path('/api').replace();
}
+1 -1
View File
@@ -3,7 +3,7 @@
angular.module('errors', ['ngSanitize'])
.filter('errorLink', ['$sanitize', function($sanitize) {
var LINKY_URL_REGEXP = /((ftp|https?):\/\/|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s\.;,\(\)\{\}<>]/g,
var LINKY_URL_REGEXP = /((ftp|https?):\/\/|(mailto:)?[A-Za-z0-9._%+-]+@)\S*[^\s.;,(){}<>]/g,
MAILTO_REGEXP = /^mailto:/,
STACK_TRACE_REGEXP = /:\d+:\d+$/;
+6 -5
View File
@@ -114,7 +114,7 @@ angular.module('examples', [])
ctrl.prepareExampleData = function() {
if (ctrl.example.manifest) {
return $q.when(ctrl.example);
return $q.resolve(ctrl.example);
}
return getExampleData(ctrl.examplePath).then(function(data) {
@@ -159,10 +159,11 @@ angular.module('examples', [])
};
// Initialize the example data, so it's ready when clicking the open button.
// Otherwise pop-up blockers will prevent a new window from opening
ctrl.prepareExampleData(ctrl.example.path);
ctrl.$onInit = function() {
// Initialize the example data, so it's ready when clicking the open button.
// Otherwise pop-up blockers will prevent a new window from opening
ctrl.prepareExampleData(ctrl.example.path);
};
}]
};
}])
+1 -1
View File
@@ -72,7 +72,7 @@ angular.module('search', [])
.controller('Error404SearchCtrl', ['$scope', '$location', 'docsSearch',
function($scope, $location, docsSearch) {
docsSearch($location.path().split(/[\/\.:]/).pop()).then(function(results) {
docsSearch($location.path().split(/[/.:]/).pop()).then(function(results) {
$scope.results = {};
angular.forEach(results, function(result) {
var area = $scope.results[result.area] || [];
-10
View File
@@ -1,10 +0,0 @@
{
"name": "AngularJS-docs-app",
"dependencies": {
"jquery": "2.2.3",
"lunr.js": "0.5.12",
"open-sans-fontface": "1.0.4",
"google-code-prettify": "1.0.1",
"bootstrap": "3.1.1"
}
}
+1 -1
View File
@@ -6,7 +6,7 @@ var packagePath = __dirname;
var Package = require('dgeni').Package;
// Create and export a new Dgeni package called angularjs. This package depends upon
// the ngdoc, nunjucks, and examples packages defined in the dgeni-packages npm module.
// the ngdoc, nunjucks, and examples packages defined in the dgeni-packages node module.
module.exports = new Package('angularjs', [
require('dgeni-packages/ngdoc'),
require('dgeni-packages/nunjucks'),
+23 -1
View File
@@ -5,18 +5,36 @@
* @description
* Process "error" docType docs and generate errorNamespace docs
*/
module.exports = function errorDocsProcessor(errorNamespaceMap, getMinerrInfo) {
module.exports = function errorDocsProcessor(log, errorNamespaceMap, getMinerrInfo) {
return {
$runAfter: ['tags-extracted'],
$runBefore: ['extra-docs-added'],
$process: function(docs) {
// Get the extracted min errors to compare with the error docs, and report any mismatch
var collectedErrors = require('../../../build/errors.json').errors;
var flatErrors = [];
for (var namespace in collectedErrors) {
for (var error in collectedErrors[namespace]) {
flatErrors.push(namespace + ':' + error);
}
}
// Create error namespace docs and attach error docs to each
docs.forEach(function(doc) {
var parts, namespaceDoc;
if (doc.docType === 'error') {
var matchingMinErr = flatErrors.indexOf(doc.name);
if (matchingMinErr === -1) {
log.warn('Error doc: ' + doc.name + ' has no matching min error');
} else {
flatErrors.splice(matchingMinErr, 1);
}
// Parse out the error info from the id
parts = doc.name.split(':');
doc.namespace = parts[0];
@@ -41,6 +59,10 @@ module.exports = function errorDocsProcessor(errorNamespaceMap, getMinerrInfo) {
}
});
flatErrors.forEach(function(value) {
log.warn('No error doc exists for min error: ' + value);
});
errorNamespaceMap.forEach(function(errorNamespace) {
docs.push(errorNamespace);
});
+2 -2
View File
@@ -34,7 +34,7 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
var areasToSearch;
// Keywords start with "ng:" or one of $, _ or a letter
var KEYWORD_REGEX = /^((ng:|[\$_a-z])[\w\-_]+)/;
var KEYWORD_REGEX = /^((ng:|[$_a-z])[\w\-_]+)/;
// Load up the keywords to ignore, if specified in the config
if (this.ignoreWordsFile) {
@@ -67,7 +67,7 @@ module.exports = function generateKeywordsProcessor(log, readFilesProcessor) {
function extractWords(text, words, keywordMap) {
var tokens = text.toLowerCase().split(/[\.\s,`'"#]+/mg);
var tokens = text.toLowerCase().split(/[.\s,`'"#]+/mg);
_.forEach(tokens, function(token) {
var match = token.match(KEYWORD_REGEX);
if (match) {
+3 -3
View File
@@ -13,14 +13,14 @@ module.exports = function generateVersionDocProcessor(gitData) {
return {
$runAfter: ['generatePagesDataProcessor'],
$runBefore: ['rendering-docs'],
// the blacklist is to remove rogue builds that are in npm but not on code.angularjs.org
// the blacklist is to remove rogue builds that are in the npm repository but not on code.angularjs.org
blacklist: ['1.3.4-build.3588'],
$process: function(docs) {
var blacklist = this.blacklist;
var currentVersion = require('../../../build/version.json');
var output = exec('npm info angular versions --json', { silent: true }).stdout;
var allVersions = processAllVersionsResponse(JSON.parse(output));
var output = exec('yarn info angular versions --json', { silent: true }).stdout.split('\n')[0];
var allVersions = processAllVersionsResponse(JSON.parse(output).data);
docs.push({
docType: 'current-version-data',
+3 -2
View File
@@ -17,9 +17,9 @@ module.exports = function debugDeployment(getVersion) {
'../angular-sanitize.js',
'../angular-touch.js',
'../angular-animate.js',
'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
'components/marked-' + getVersion('marked') + '/lib/marked.js',
'js/angular-bootstrap/dropdown-toggle.js',
'components/lunr.js-' + getVersion('lunr.js') + '/lunr.js',
'components/lunr-' + getVersion('lunr') + '/lunr.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
'js/current-version-data.js',
@@ -32,6 +32,7 @@ module.exports = function debugDeployment(getVersion) {
'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.css',
'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
'css/prettify-theme.css',
'css/angular-topnav.css',
'css/docs.css',
'css/animations.css'
]
+3 -2
View File
@@ -17,9 +17,9 @@ module.exports = function defaultDeployment(getVersion) {
'../angular-sanitize.min.js',
'../angular-touch.min.js',
'../angular-animate.min.js',
'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
'components/marked-' + getVersion('marked') + '/lib/marked.js',
'js/angular-bootstrap/dropdown-toggle.min.js',
'components/lunr.js-' + getVersion('lunr.js') + '/lunr.min.js',
'components/lunr-' + getVersion('lunr') + '/lunr.min.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
'js/current-version-data.js',
@@ -32,6 +32,7 @@ module.exports = function defaultDeployment(getVersion) {
'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
'css/prettify-theme.css',
'css/angular-topnav.css',
'css/docs.css',
'css/animations.css'
]
+3 -2
View File
@@ -21,9 +21,9 @@ module.exports = function jqueryDeployment(getVersion) {
'../angular-sanitize.min.js',
'../angular-touch.min.js',
'../angular-animate.min.js',
'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
'components/marked-' + getVersion('marked') + '/lib/marked.js',
'js/angular-bootstrap/dropdown-toggle.min.js',
'components/lunr.js-' + getVersion('lunr.js') + '/lunr.min.js',
'components/lunr-' + getVersion('lunr') + '/lunr.min.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
'js/current-version-data.js',
@@ -36,6 +36,7 @@ module.exports = function jqueryDeployment(getVersion) {
'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
'css/prettify-theme.css',
'css/angular-topnav.css',
'css/docs.css',
'css/animations.css'
]
@@ -13,9 +13,9 @@ var cdnUrl = googleCdnUrl + versionInfo.cdnVersion;
// The currentVersion may not be available on the cdn (e.g. if built locally, or hasn't been pushed
// yet). This will lead to a 404, but this is preferable to loading a version with which the example
// might not work (possibly in subtle ways).
var examplesCdnUrl = versionInfo.isSnapshot ?
var examplesCdnUrl = versionInfo.currentVersion.isSnapshot ?
(angularCodeUrl + 'snapshot') :
(googleCdnUrl + (versionInfo.version || versionInfo.currentVersion));
(googleCdnUrl + (versionInfo.currentVersion.version || versionInfo.currentVersion));
module.exports = function productionDeployment(getVersion) {
return {
@@ -34,9 +34,9 @@ module.exports = function productionDeployment(getVersion) {
cdnUrl + '/angular-sanitize.min.js',
cdnUrl + '/angular-touch.min.js',
cdnUrl + '/angular-animate.min.js',
'components/marked-' + getVersion('marked', 'node_modules', 'package.json') + '/lib/marked.js',
'components/marked-' + getVersion('marked') + '/lib/marked.js',
'js/angular-bootstrap/dropdown-toggle.min.js',
'components/lunr.js-' + getVersion('lunr.js') + '/lunr.min.js',
'components/lunr-' + getVersion('lunr') + '/lunr.min.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
'js/current-version-data.js',
@@ -49,6 +49,7 @@ module.exports = function productionDeployment(getVersion) {
'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
'css/prettify-theme.css',
'css/angular-topnav.css',
'css/docs.css',
'css/animations.css'
]
+3 -3
View File
@@ -4,14 +4,14 @@ var path = require('canonical-path');
/**
* dgService getVersion
* @description
* Find the current version of the bower component (or npm module)
* Find the current version of the bower component (or node module)
*/
module.exports = function getVersion(readFilesProcessor) {
var basePath = readFilesProcessor.basePath;
return function(component, sourceFolder, packageFile) {
sourceFolder = path.resolve(basePath, sourceFolder || 'docs/bower_components');
packageFile = packageFile || 'bower.json';
sourceFolder = path.resolve(basePath, sourceFolder || 'node_modules');
packageFile = packageFile || 'package.json';
return require(path.join(sourceFolder,component,packageFile)).version;
};
};
@@ -68,101 +68,95 @@
})();
</script>
</head>
<body>
<body class="homepage">
<div id="wrapper">
<header scroll-y-offset-element class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
<div class="container">
<div class="row">
<div class="col-md-9 header-branding">
<a class="brand navbar-brand" href="http://angularjs.org">
<img width="117" height="30" class="logo" alt="Link to Angular JS Homepage" ng-src="img/angularjs-for-header-only.svg">
</a>
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
<li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
<li><a href="tutorial">Tutorial</a></li>
<li><a href="https://www.madewithangular.com/">Case Studies</a></li>
<li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
<li><a href="misc/faq">FAQ</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="tutorial">Tutorial</a></li>
<li><a href="guide">Developer Guide</a></li>
<li><a href="api">API Reference</a></li>
<li><a href="error">Error Reference</a></li>
<li><a href="misc/contribute">Contribute</a></li>
<li><a href="http://code.angularjs.org/">Download</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://blog.angularjs.org">Blog</a></li>
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
<li class="divider"></li>
<li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
<li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
<li class="divider"></li>
<li><a href="https://github.com/angular/angular.js">GitHub</a></li>
<li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
</div>
<form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
<span class="glyphicon glyphicon-search search-icon"></span>
<input type="text"
name="as_q"
class="search-query"
placeholder="Click or press / to search"
ng-focus="focus=true"
ng-blur="focus=false"
ng-change="search(q)"
ng-model="q"
docs-search-input
autocomplete="off" />
</form>
</div>
</div>
<div class="search-results-container" ng-show="hasResults">
<header class="header" scroll-y-offset-element>
<nav id="navbar-main" class="navbar navbar-fixed-top">
<div class="navbar-inner" ng-controller="DocsSearchCtrl">
<div class="container">
<div class="search-results-frame">
<div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
<h4 class="search-results-group-heading">{{ key }}</h4>
<ul class="search-results">
<!-- Do not insert a line break between li and a. Chrome will insert an actual line-break, which breaks the list item view.
TODO: use a html minifier instead -->
<li ng-repeat="item in value" class="search-result"><a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a></li>
<h1 class="brand"><a href="http://angularjs.org"><img width="117" height="30" src="img/angularjs-for-header-only.svg" alt="AngularJS"></a></h1>
<form class="navbar-search" ng-submit="submit()">
<i class="glyphicon glyphicon-search search-icon"></i>
<input type="text" name="as_q" class="search-query" placeholder="SEARCH"
ng-focus="focus=true"
ng-blur="focus=false"
ng-change="search(q)"
ng-model="q"
ng-model-options="{debounce: 150}"
docs-search-input
autocomplete="off">
</form>
<ul class="nav navbar-nav">
<li class="dropdown" uib-dropdown>
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>Learn</a>
<ul class="dropdown-menu" uib-dropdown-menu>
<li><a href="tutorial">Tutorial</a></li>
<li><a href="misc/faq">FAQ</a></li>
<li><a href="https://www.youtube.com/user/angularjs">Videos</a></li>
<li><a href="http://angular.codeschool.com/">Free Course</a></li>
<li><a href="https://www.madewithangular.com/">Case Studies</a></li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>Develop</a>
<ul class="dropdown-menu" uib-dropdown-menu>
<li><a href="guide">Developer Guide</a></li>
<li><a href="api">API Reference</a></li>
<li><a href="error">Error Reference</a></li>
<li><a href="misc/contribute">Contribute</a></li>
<li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
<li><a href="https://github.com/angular/angular.js">GitHub</a></li>
<li><a href="http://code.angularjs.org/">Download</a></li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href="#" class="dropdown-toggle" uib-dropdown-toggle>Discuss</a>
<ul class="dropdown-menu" uib-dropdown-menu>
<li><a href="http://blog.angularjs.org">Blog</a></li>
<li><a href="https://twitter.com/angular">Twitter</a></li>
<li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
<li><a href="https://github.com/angular/angular.js/issues">Feature &amp; Bug Tracker</a></li>
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">IRC</a></li>
<li><a href="https://gitter.im/angular/angular.js">Gitter</a></li>
</ul>
</li>
</ul>
</div>
<div class="search-results-container" ng-show="hasResults">
<div class="container">
<div class="search-results-frame">
<div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
<h4 class="search-results-group-heading">{{ key }}</h4>
<ul class="search-results">
<li ng-repeat="item in value" class="search-result"><a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a></li>
</ul>
</div>
</div>
<a href="" ng-click="hideResults()" class="search-close">
<span class="glyphicon glyphicon-remove search-close-icon"></span> Close
</a>
</div>
<a href="" ng-click="hideResults()" class="search-close">
<span class="glyphicon glyphicon-remove search-close-icon"></span> Close
</a>
</div>
</div>
</section>
<section class="sup-header">
</nav>
<nav id="navbar-notice" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<p class="site-notice visible-phone">
This site refers to AngularJS (v1.x). <a href="https://angular.io/">Go to the latest Angular</a>.
</p>
<p class="site-notice visible-desktop">
This site and all of its contents are referring to AngularJS (version 1.x),
if you are looking for the latest Angular, please visit <a href="https://angular.io/">angular.io</a>.
</p>
</div>
</div>
</nav>
<nav id="navbar-sub" class="sup-header navbar navbar-fixed-top">
<div class="container main-grid main-header-grid">
<div class="grid-left">
<version-picker></version-picker>
@@ -176,7 +170,7 @@
</ul>
</div>
</div>
</section>
</nav>
</header>
<section role="main" class="container main-body">
@@ -214,10 +208,10 @@
<p class="pull-right"><a back-to-top>Back to top</a></p>
<p>
Super-powered by Google ©2010-2016
Super-powered by Google ©2010-2017
(<a id="version"
ng-href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
ng-bind-template="v{{version}}" title="Changelog of this version of Angular JS">
ng-bind-template="v{{version}}" title="Changelog of this version of AngularJS">
</a>)
</p>
<p>
@@ -51,7 +51,7 @@
{% block examples %}
{%- if doc.examples %}
<h2 id="example">Example</h2>
<h2 id="example">Examples</h2>
{%- for example in doc.examples -%}
{$ example | marked $}
{%- endfor -%}
@@ -61,12 +61,12 @@
</div>
{% endblock -%}
{% include "lib/params.template.html" %}
{% include "lib/events.template.html" %}
{%- if doc.animations %}
<h2 id="animations">Animations</h2>
{$ doc.animations | marked $}
{$ 'module:ngAnimate.$animate' | link('Click here', doc) $} to learn more about the steps involved in the animation.
{%- endif -%}
{% include "lib/params.template.html" %}
{% include "lib/events.template.html" %}
{% endblock %}
@@ -21,7 +21,9 @@
</li>
<li>
<a href="https://www.npmjs.com/">NPM</a> e.g.
{% code %}npm install {$ doc.packageName $}@X.Y.Z{% endcode %}
{% code %}npm install --save {$ doc.packageName $}@X.Y.Z{% endcode %}
or
{% code %}yarn add {$ doc.packageName $}@X.Y.Z{% endcode %}
</li>
<li>
<a href="http://bower.io">Bower</a> e.g.
@@ -26,6 +26,13 @@
{$ lib.typeInfo(method.returns) $}
{% endif %}
{%- if method.examples %}
<h4 id="{$ doc.name $}.{$ method.name $}-examples">Examples</h4>
{%- for example in method.examples -%}
{$ example | marked $}
{%- endfor -%}
{% endif -%}
</li>
{% endfor -%}
</ul>
+5 -5
View File
@@ -11,14 +11,14 @@ These components are {@link guide/directive directives}, {@link guide/services s
There is also a {@link guide/index guide} with articles on various topics, and a list of external resources.
<div class="alert alert-info">
**Angular Prefixes `$` and `$$`**:
**AngularJS Prefixes `$` and `$$`**:
To prevent accidental name collisions with your code,
Angular prefixes names of public objects with `$` and names of private objects with `$$`.
AngularJS prefixes names of public objects with `$` and names of private objects with `$$`.
Please do not use the `$` or `$$` prefix in your code.
</div>
## Angular Modules
## AngularJS Modules
## {@link ng ng (core module)}
@@ -83,7 +83,7 @@ This module is provided by default and contains the core components of AngularJS
</td>
<td>
<p>
The core global API functions are attached to the angular object. These core functions are useful for low level JavaScript operations within your application.
The core global API functions are attached to the `angular` object. These core functions are useful for low level JavaScript operations within your application.
</p>
<p>
Some examples include:
@@ -130,7 +130,7 @@ Use ngRoute to enable URL routing to your application. The ngRoute module suppor
## {@link ngAnimate ngAnimate}
Use ngAnimate to enable animation features within your application. Various core ng directives will provide
Use ngAnimate to enable animation features within your application. Various core AngularJS directives will provide
animation hooks into your application when ngAnimate is included. Animations are defined by using CSS transitions/animations
or JavaScript callbacks.
-12
View File
@@ -1,12 +0,0 @@
@ngdoc error
@name $animate:nocb
@fullName Do not pass a callback to animate methods
@description
Since Angular 1.3, the methods of {@link ng.$animate} do not accept a callback as the last parameter.
Instead, they return a promise to which you can attach `then` handlers to be run when the animation completes.
If you are getting this error then you need to update your code to use the promise-based API.
See https://github.com/angular/angular.js/commit/bf0f5502b1bbfddc5cdd2f138efd9188b8c652a9 for information about
the change to the animation API and the changes you need to make.
@@ -0,0 +1,8 @@
@ngdoc error
@name $animate:nongcls
@fullName `ng-animate` class not allowed
@description
This error occurs, when trying to set `$animateProvider.classNameFilter()` to a RegExp containing
the reserved `ng-animate` class. Since `.ng-animate` will be added/removed by `$animate` itself,
using it as part of the `classNameFilter` RegExp is not allowed.
+1 -1
View File
@@ -5,7 +5,7 @@
This error occurs when the application's model becomes unstable because some `$onChanges` hooks are causing updates which then trigger
further calls to `$onChanges` that can never complete.
Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
AngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
For example, the situation can occur by setting up a `$onChanges()` hook which triggers an event on the component, which subsequently
triggers the component's bound inputs to be updated:
+38
View File
@@ -0,0 +1,38 @@
@ngdoc error
@name $compile:noslot
@fullName No matching slot in parent directive
@description
This error occurs when declaring a specific slot in a {@link ng.ngTransclude `ngTransclude`}
which does not map to a specific slot defined in the transclude property of the directive.
In this example the template has declared a slot missing from the transclude definition.
This example will generate a noslot error.
```js
var componentConfig = {
template: '<div>' +
'<div ng-transclude="slotProvided"></div>' +
'<div ng-transclude="noSlotProvided"></div>' +
'</div>',
transclude: {
// The key value pairs here are considered "slots" that are provided for components to slot into.
slotProvided: 'slottedComponent', // mandatory transclusion
// There is no slot provided here for the transclude 'noSlotProvided' declared in the above template.
}
};
```
If we make the following change we will no longer get the noslot error.
```js
var componentConfig = {
template: '<div>' +
'<div ng-transclude="slotProvided"></div>' +
'<div ng-transclude="noSlotProvided"></div>' +
'</div>',
transclude: {
slotProvided: 'slottedComponent',
noSlotProvided: 'otherComponent' // now it is declared and the error should cease
}
};
```
+14
View File
@@ -0,0 +1,14 @@
@ngdoc error
@name $http:baddata
@fullName Bad JSON Data
@description
The default @{link ng.$http#default-transformations `transformResponse`} will try to parse the
response as JSON if the `Content-Type` header is `application/json` or the response looks like a
valid JSON-stringified object or array.
This error occurs when that data is not a valid JSON object.
The error message should provide additional context such as the actual response.
To resolve this error, make sure you pass valid JSON data to `transformResponse` or use an
appropriate `Content-Type` header for non-JSON data.
+1 -1
View File
@@ -11,7 +11,7 @@ value is `JSON_CALLBACK`.
parameter is specified in the configuration object (or in the defaults) via the `jsonpCallbackParam`
property. You must not provide your own parameter with this name in the configuratio of the request.
In previous versions of Angular, you specified where to add the callback parameter value via the
In previous versions of AngularJS, you specified where to add the callback parameter value via the
`JSON_CALLBACK` placeholder. This is no longer allowed.
To resolve this error, remove any parameters that have the same name as the `jsonpCallbackParam`;
+1 -1
View File
@@ -15,7 +15,7 @@ In AngularJS `1.2.0` and later, `ngRoute` has been moved to its own module.
If you are getting this error after upgrading to `1.2.x` or later, be sure that you've
installed {@link ngRoute `ngRoute`}.
### Monkey-patching Angular's `ng` module
### Monkey-patching AngularJS's `ng` module
This error can also occur if you have tried to add your own components to the `ng` module.
This has never been supported and from `1.3.0` it will actually trigger this error.
@@ -3,4 +3,4 @@
@fullName Expecting end operator
@description
The Angular expression is missing the corresponding closing operator.
The AngularJS expression is missing the corresponding closing operator.
@@ -8,4 +8,4 @@ extension in your interpolation expression. The different choices have to be un
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -9,4 +9,4 @@ bug mentioning the exact version of AngularJS used and we will fix it!
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -14,4 +14,4 @@ future commit and the github issue will help gauge urgency.
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
+2 -2
View File
@@ -4,9 +4,9 @@
@description
You must specify the MessageFormat function that you're using right after the
comma following the Angular expression. Currently, the supported functions are
comma following the AngularJS expression. Currently, the supported functions are
"plural" and "select" (for gender selections.)
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -8,4 +8,4 @@ extension keyword in the extended interpolation syntax.
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -8,4 +8,4 @@ brace to mark the end of the message.
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -9,4 +9,4 @@ braces.
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -10,4 +10,4 @@ extensions require that you provide a message for the selection "other".
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
@@ -9,4 +9,4 @@ unsupported or invalid.
For more information about the MessageFormat syntax in interpolation
expressions, please refer to MessageFormat extensions section at
{@link guide/i18n#MessageFormat Angular i18n MessageFormat}
{@link guide/i18n#MessageFormat AngularJS i18n MessageFormat}
+1 -1
View File
@@ -7,4 +7,4 @@ You have attempted to use a MessageFormat extension in your interpolation expres
Read more about secure contexts at {@link ng.$sce Strict Contextual Escaping
(SCE)} and about the MessageFormat extensions at {@link
guide/i18n#MessageFormat Angular i18n MessageFormat}.
guide/i18n#MessageFormat AngularJS i18n MessageFormat}.
@@ -3,4 +3,4 @@
@fullName Unterminated string literal
@description
The string literal was not terminated in your Angular expression.
The string literal was not terminated in your AngularJS expression.
+1 -1
View File
@@ -40,7 +40,7 @@ URL of the subcontext:
</head>
```
Before Angular 1.3 we didn't have this hard requirement and it was easy to write apps that worked
Before AngularJS 1.3 we didn't have this hard requirement and it was easy to write apps that worked
when deployed in the root context but were broken when moved to a sub-context because in the
sub-context all absolute urls would resolve to the root context of the app. To prevent this,
use relative URLs throughout your app:
+1 -1
View File
@@ -7,4 +7,4 @@ Occurs when an expression has a lexical error, for example a malformed number (0
The error message contains a more precise error.
To resolve, learn more about {@link guide/expression Angular expressions}, identify the error and fix the expression's syntax.
To resolve, learn more about {@link guide/expression AngularJS expressions}, identify the error and fix the expression's syntax.
+1 -1
View File
@@ -6,4 +6,4 @@
Occurs when there is a syntax error in an expression. These errors are thrown while compiling the expression.
The error message contains a more precise description of the error, including the location (column) in the expression where the error occurred.
To resolve, learn more about {@link guide/expression Angular expressions}, identify the error and fix the expression's syntax.
To resolve, learn more about {@link guide/expression AngularJS expressions}, identify the error and fix the expression's syntax.
+1 -1
View File
@@ -8,5 +8,5 @@ Occurs when an expression is missing tokens at the end of the expression.
For example, forgetting to close a bracket or failing to properly escape quotes in an expression
will trigger this error.
To resolve, learn more about {@link guide/expression Angular expressions}, identify the error and
To resolve, learn more about {@link guide/expression AngularJS expressions}, identify the error and
fix the expression's syntax.
+2 -2
View File
@@ -4,7 +4,7 @@
@description
This error occurs when the application's model becomes unstable and each `$digest` cycle triggers a state change and subsequent `$digest` cycle.
Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
AngularJS detects this situation and prevents an infinite loop from causing the browser to become unresponsive.
For example, the situation can occur by setting up a watch on a path and subsequently updating the same path when the value changes.
@@ -26,7 +26,7 @@ $scope.getUsers = function() {
};
```
Since `getUsers()` returns a new array, Angular determines that the model is different on each `$digest`
Since `getUsers()` returns a new array, AngularJS determines that the model is different on each `$digest`
cycle, resulting in the error. The solution is to return the same array object if the elements have
not changed:
+16 -16
View File
@@ -10,17 +10,17 @@ the error.
## Background
Angular uses a dirty-checking digest mechanism to monitor and update values of the scope during
AngularJS uses a dirty-checking digest mechanism to monitor and update values of the scope during
the processing of your application. The digest works by checking all the values that are being
watched against their previous value and running any watch handlers that have been defined for those
values that have changed.
This digest mechanism is triggered by calling `$digest` on a scope object. Normally you do not need
to trigger a digest manually, because every external action that can trigger changes in your
application, such as mouse events, timeouts or server responses, wrap the Angular application code
application, such as mouse events, timeouts or server responses, wrap the AngularJS application code
in a block of code that will run `$digest` when the code completes.
You wrap Angular code in a block that will be followed by a `$digest` by calling `$apply` on a scope
You wrap AngularJS code in a block that will be followed by a `$digest` by calling `$apply` on a scope
object. So, in pseudo-code, the process looks like this:
```
@@ -45,20 +45,20 @@ $apply = function(fn) {
## Digest Phases
Angular keeps track of what phase of processing we are in, the relevant ones being `$apply` and
AngularJS keeps track of what phase of processing we are in, the relevant ones being `$apply` and
`$digest`. Trying to reenter a `$digest` or `$apply` while one of them is already in progress is
typically a sign of programming error that needs to be fixed. So Angular will throw this error when
typically a sign of programming error that needs to be fixed. So AngularJS will throw this error when
that occurs.
In most situations it should be well defined whether a piece of code will be run inside an `$apply`,
in which case you should not be calling `$apply` or `$digest`, or it will be run outside, in which
case you should wrap any code that will be interacting with Angular scope or services, in a call to
case you should wrap any code that will be interacting with AngularJS scope or services, in a call to
`$apply`.
As an example, all Controller code should expect to be run within Angular, so it should have no need
As an example, all Controller code should expect to be run within AngularJS, so it should have no need
to call `$apply` or `$digest`. Conversely, code that is being trigger directly as a call back to
some external event, from the DOM or 3rd party library, should expect that it is never called from
within Angular, and so any Angular application code that it calls should first be wrapped in a call
within AngularJS, and so any AngularJS application code that it calls should first be wrapped in a call
to $apply.
## Common Causes
@@ -84,8 +84,8 @@ function MyController($scope, thirdPartyComponent) {
}
```
We expect that our callback will be called asynchronously, and so from outside Angular. Therefore, we
correctly wrap our application code that interacts with Angular in a call to `$apply`.
We expect that our callback will be called asynchronously, and so from outside AngularJS. Therefore, we
correctly wrap our application code that interacts with AngularJS in a call to `$apply`.
The problem comes if `getData()` decides to call the callback handler synchronously; perhaps it has
the data already cached in memory and so it immediately calls the callback to return the data,
@@ -116,7 +116,7 @@ that the code will be called in a single `$apply` block.
### Triggering Events Programmatically
The other situation that often leads to this error is when you trigger code (such as a DOM event)
programmatically (from within Angular), which is normally called by an external trigger.
programmatically (from within AngularJS), which is normally called by an external trigger.
For example, consider a directive that will set focus on an input control when a value in the scope
is true:
@@ -161,7 +161,7 @@ In this second scenario, we are already inside a `$digest` when the ngFocus dire
call to `$apply()`, causing this error to be thrown.
It is possible to workaround this problem by moving the call to set the focus outside of the digest,
by using `$timeout(fn, 0, false)`, where the `false` value tells Angular not to wrap this `fn` in an
by using `$timeout(fn, 0, false)`, where the `false` value tells AngularJS not to wrap this `fn` in an
`$apply` block:
```
@@ -203,7 +203,7 @@ Once you have identified this call you work your way up the stack to see what th
called from within an `$apply`/`$digest`. It may be a simple oversight or maybe it fits with the
sync/async scenario described earlier.
* If the second call was made inside an Angular directive then it is likely that it matches the second
* If the second call was made inside an AngularJS directive then it is likely that it matches the second
programmatic event trigger scenario described earlier. In this case you may need to look further up
the tree to what triggered the event in the first place.
@@ -259,11 +259,11 @@ $get.g.$apply angular.js:12742 <--- $apply
q angular.js:320
```
We can see (even though the Angular code is minified) that there were two calls to `$apply`, first
We can see (even though the AngularJS code is minified) that there were two calls to `$apply`, first
on line `19833`, then on line `12738` of `angular.js`.
It is this second call that caused the error. If we look at the angular.js code, we can see that
this call is made by an Angular directive.
this call is made by an AngularJS directive.
```
var ngEventDirectives = {};
@@ -308,5 +308,5 @@ We can now see that the second `$apply` was caused by us programmatically trigge
`$timeout` as described above.
## Further Reading
To learn more about Angular processing model please check out the
To learn more about AngularJS processing model please check out the
{@link guide/concepts concepts doc} as well as the {@link ng.$rootScope.Scope api} doc.
+11
View File
@@ -0,0 +1,11 @@
@ngdoc error
@name $sanitize:elclob
@fullName Failed to sanitize html because the element is clobbered
@description
This error occurs when `$sanitize` sanitizer is unable to traverse the HTML because one or more of the elements in the
HTML have been "clobbered". This could be a sign that the payload contains code attempting to cause a DoS attack on the
browser.
Typically clobbering breaks the `nextSibling` property on an element so that it points to one of its child nodes. This
makes it impossible to walk the HTML tree without getting stuck in an infinite loop, which causes the browser to freeze.
+1 -1
View File
@@ -7,4 +7,4 @@ This error occurs when `$sanitize` sanitizer determines that `document.implement
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.
The api is present in all supported browsers including IE 9.0, so the presence of this error usually indicates that AngularJS's `$sanitize` is being used on an unsupported platform.
+2 -2
View File
@@ -5,10 +5,10 @@
AngularJS' {@link ng.$sce Strict Contextual Escaping (SCE)} mode (enabled by default) has blocked loading a resource from an insecure URL.
Typically, this would occur if you're attempting to load an Angular template from an untrusted source.
Typically, this would occur if you're attempting to load an AngularJS template from an untrusted source.
It's also possible that a custom directive threw this error for a similar reason.
Angular only loads templates from trusted URLs (by calling {@link ng.$sce#getTrustedResourceUrl $sce.getTrustedResourceUrl} on the template URL).
AngularJS only loads templates from trusted URLs (by calling {@link ng.$sce#getTrustedResourceUrl $sce.getTrustedResourceUrl} on the template URL).
By default, only URLs that belong to the same origin are trusted. These are urls with the same domain, protocol and port as the application document.
+2 -2
View File
@@ -5,10 +5,10 @@
The value provided for use in a specific context was not found to be safe/trusted for use.
Angular's {@link ng.$sce Strict Contextual Escaping (SCE)} mode
AngularJS's {@link ng.$sce Strict Contextual Escaping (SCE)} mode
(enabled by default), requires bindings in certain
contexts to result in a value that is trusted as safe for use in such a context. (e.g. loading an
Angular template from a URL requires that the URL is one considered safe for loading resources.)
AngularJS template from a URL requires that the URL is one considered safe for loading resources.)
This helps prevent XSS and other security issues. Read more at
{@link ng.$sce Strict Contextual Escaping (SCE)}
+2 -2
View File
@@ -3,9 +3,9 @@
@fullName Unsupported Selector Lookup
@description
In order to keep Angular small, Angular implements only a subset of the selectors in {@link angular.element#angular-s-jqlite jqLite}.
In order to keep AngularJS small, AngularJS implements only a subset of the selectors in {@link angular.element#angularjs-s-jqlite jqLite}.
This error occurs when a jqLite instance is invoked with a selector other than this subset.
In order to resolve this error, rewrite your code to only use tag name selectors and manually traverse the DOM using the APIs provided by jqLite.
Alternatively, you can include a full version of jQuery, which Angular will automatically use and that will make all selectors available.
Alternatively, you can include a full version of jQuery, which AngularJS will automatically use and that will make all selectors available.
+7
View File
@@ -0,0 +1,7 @@
@ngdoc error
@name ng:aobj
@fullName Invalid Argument
@description
The argument passed should be an object. Check the value that was passed to the function where
this error was thrown.
+2 -2
View File
@@ -3,7 +3,7 @@
@fullName Testability Not Found
@description
Angular's testability helper, getTestability, requires a root element to be
passed in. This helps differentiate between different Angular apps on the same
AngularJS's testability helper, getTestability, requires a root element to be
passed in. This helps differentiate between different AngularJS apps on the same
page. This error is thrown when no injector is found for root element. It is
often because the root element is outside of the ng-app.
+1 -1
View File
@@ -5,7 +5,7 @@
All date-related inputs like `<input type="date">` require the model to be a `Date` object.
If the model is something else, this error will be thrown.
Angular does not set validation errors on the `<input>` in this case
AngularJS does not set validation errors on the `<input>` in this case
as those errors are shown to the user, but the erroneous state was
caused by incorrect application logic and not by the user.
+1 -1
View File
@@ -7,7 +7,7 @@ The `input[number]` and `input[range]` directives require the model to be a `num
If the model is something else, this error will be thrown.
Angular does not set validation errors on the `<input>` in this case
AngularJS does not set validation errors on the `<input>` in this case
as this error is caused by incorrect application logic and not by bad input from the user.
If your model does not contain actual numbers then it is up to the application developer
+49 -39
View File
@@ -48,7 +48,7 @@ changes to `$location` are reflected into the browser address bar.
</tr>
<tr>
<td class="head">integration with angular application life-cycle</td>
<td class="head">integration with AngularJS application life-cycle</td>
<td>none</td>
<td>knows about all internal life-cycle phases, integrates with {@link ng.$rootScope.Scope#$watch $watch}, ...</td>
</tr>
@@ -224,7 +224,7 @@ facilitate the browser URL change and history management.
## Hashbang mode (default mode)
In this mode, `$location` uses Hashbang URLs in all browsers.
Angular also does not intercept and rewrite links in this mode. I.e. links work
AngularJS also does not intercept and rewrite links in this mode. I.e. links work
as expected and also perform full page reloads when other parts of the url
than the hash fragment was changed.
@@ -232,27 +232,27 @@ than the hash fragment was changed.
### Example
```js
it('should show example', inject(
function($locationProvider) {
it('should show example', function() {
module(function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
},
function($location) {
});
inject(function($location) {
// open http://example.com/base/index.html#!/a
$location.absUrl() === 'http://example.com/base/index.html#!/a'
$location.path() === '/a'
expect($location.absUrl()).toBe('http://example.com/base/index.html#!/a');
expect($location.path()).toBe('/a');
$location.path('/foo')
$location.absUrl() === 'http://example.com/base/index.html#!/foo'
$location.path('/foo');
expect($location.absUrl()).toBe('http://example.com/base/index.html#!/foo');
$location.search() === {}
expect($location.search()).toEqual({});
$location.search({a: 'b', c: true});
$location.absUrl() === 'http://example.com/base/index.html#!/foo?a=b&c'
expect($location.absUrl()).toBe('http://example.com/base/index.html#!/foo?a=b&c');
$location.path('/new').search('x=y');
$location.absUrl() === 'http://example.com/base/index.html#!/new?x=y'
}
));
expect($location.absUrl()).toBe('http://example.com/base/index.html#!/new?x=y');
});
});
```
## HTML5 mode
@@ -267,47 +267,57 @@ having to worry about whether the browser displaying your app supports the histo
- Opening a regular URL in a legacy browser -> redirects to a hashbang URL
- Opening hashbang URL in a modern browser -> rewrites to a regular URL
Note that in this mode, Angular intercepts all links (subject to the "Html link rewriting" rules below)
Note that in this mode, AngularJS intercepts all links (subject to the "Html link rewriting" rules below)
and updates the url in a way that never performs a full page reload.
### Example
```js
it('should show example', inject(
function($locationProvider) {
it('should show example', function() {
module(function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
},
function($location) {
});
inject(function($location) {
// in browser with HTML5 history support:
// open http://example.com/#!/a -> rewrite to http://example.com/a
// (replacing the http://example.com/#!/a history record)
$location.path() === '/a'
expect($location.path()).toBe('/a');
$location.path('/foo');
$location.absUrl() === 'http://example.com/foo'
expect($location.absUrl()).toBe('http://example.com/foo');
$location.search() === {}
expect($location.search()).toEqual({});
$location.search({a: 'b', c: true});
$location.absUrl() === 'http://example.com/foo?a=b&c'
expect($location.absUrl()).toBe('http://example.com/foo?a=b&c');
$location.path('/new').search('x=y');
$location.url() === 'new?x=y'
$location.absUrl() === 'http://example.com/new?x=y'
expect($location.url()).toBe('/new?x=y');
expect($location.absUrl()).toBe('http://example.com/new?x=y');
});
});
it('should show example (when browser doesn\'t support HTML5 mode', function() {
module(function($provide, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$provide.value('$sniffer', {history: false});
});
inject(initBrowser({ url: 'http://example.com/new?x=y', basePath: '/' }),
function($location) {
// in browser without html5 history support:
// open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y
// (again replacing the http://example.com/new?x=y history item)
$location.path() === '/new'
$location.search() === {x: 'y'}
expect($location.path()).toBe('/new');
expect($location.search()).toEqual({x: 'y'});
$location.path('/foo/bar');
$location.path() === '/foo/bar'
$location.url() === '/foo/bar?x=y'
$location.absUrl() === 'http://example.com/#!/foo/bar?x=y'
}
));
expect($location.path()).toBe('/foo/bar');
expect($location.url()).toBe('/foo/bar?x=y');
expect($location.absUrl()).toBe('http://example.com/#!/foo/bar?x=y');
});
});
```
### Fallback for legacy browsers
@@ -353,7 +363,7 @@ Note that [attribute name normalization](guide/directive#normalization) does not
### Relative links
Be sure to check all relative links, images, scripts etc. Angular requires you to specify the url
Be sure to check all relative links, images, scripts etc. AngularJS requires you to specify the url
base in the head of your main html file (`<base href="/my-base/index.html">`) unless `html5Mode.requireBase`
is set to `false` in the html5Mode definition object passed to `$locationProvider.html5Mode()`. With
that, relative urls will always be resolved to this base url, even if the initial url of the
@@ -368,7 +378,7 @@ to anchors on the same page without needing to know on which page the user curre
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links
to entry point of your application (e.g. index.html). Requiring a `<base>` tag is also important for
this case, as it allows Angular to differentiate between the part of the url that is the application
this case, as it allows AngularJS to differentiate between the part of the url that is the application
base and the path that should be handled by the application.
### Base href constraints
@@ -555,7 +565,7 @@ In these examples we use `<base href="/base/index.html" />`. The inputs represen
</example>
####Browser in HTML5 Fallback mode (Hashbang mode)
#### Browser in HTML5 Fallback mode (Hashbang mode)
<example module="hashbang-mode" name="location-hashbang-mode">
<file name="index.html">
<div ng-controller="LocationController">
@@ -718,14 +728,14 @@ use a lower level API, {@link ng.$window $window.location.href}.
## Using $location outside of the scope life-cycle
`$location` knows about Angular's {@link ng.$rootScope.Scope scope} life-cycle. When a URL changes in
`$location` knows about AngularJS's {@link ng.$rootScope.Scope scope} life-cycle. When a URL changes in
the browser it updates the `$location` and calls `$apply` so that all
{@link ng.$rootScope.Scope#$watch $watchers} /
{@link ng.$compile.directive.Attributes#$observe $observers} are notified.
When you change the `$location` inside the `$digest` phase everything is ok; `$location` will
propagate this change into browser and will notify all the {@link ng.$rootScope.Scope#$watch $watchers} /
{@link ng.$compile.directive.Attributes#$observe $observers}.
When you want to change the `$location` from outside Angular (for example, through a DOM Event or
When you want to change the `$location` from outside AngularJS (for example, through a DOM Event or
during testing) - you must call `$apply` to propagate the changes.
## $location.path() and ! or / prefixes
@@ -777,7 +787,7 @@ describe('serviceUnderTest', function() {
# Migrating from earlier AngularJS releases
In earlier releases of Angular, `$location` used `hashPath` or `hashSearch` to process path and
In earlier releases of AngularJS, `$location` used `hashPath` or `hashSearch` to process path and
search methods. With this release, the `$location` service processes path and search methods and
then uses the information it obtains to compose hashbang URLs (such as
`http://server.com/#!/path?search=a`), when necessary.
+4 -4
View File
@@ -6,7 +6,7 @@
# Accessibility with ngAria
The goal of ngAria is to improve Angular's default accessibility by enabling common
The goal of ngAria is to improve AngularJS's default accessibility by enabling common
[ARIA](http://www.w3.org/TR/wai-aria/) attributes that convey state or semantic information for
assistive technologies used by persons with disabilities.
@@ -109,11 +109,11 @@ attributes (if they have not been explicitly specified by the developer):
function isEmpty(value) {
return !value;
}
function render() {
elem[ctrl.$viewValue ? 'addClass' : 'removeClass']('checked');
}
function toggleCheckbox() {
ctrl.$setViewValue(!ctrl.$viewValue);
ctrl.$render();
@@ -420,7 +420,7 @@ tell ngAria to ignore the attribute globally.
## Common Accessibility Patterns
Accessibility best practices that apply to web apps in general also apply to Angular.
Accessibility best practices that apply to web apps in general also apply to AngularJS.
* **Text alternatives**: Add alternate text content to make visual information accessible using
[these W3C guidelines](http://www.w3.org/TR/html-alt-techniques/). The appropriate technique
+7 -7
View File
@@ -122,7 +122,7 @@ The same approach to animation can be used using JavaScript code (**jQuery is us
```js
myModule.animation('.repeated-item', function() {
return {
enter : function(element, done) {
enter: function(element, done) {
element.css('opacity',0);
jQuery(element).animate({
opacity: 1
@@ -137,7 +137,7 @@ myModule.animation('.repeated-item', function() {
}
}
},
leave : function(element, done) {
leave: function(element, done) {
element.css('opacity', 1);
jQuery(element).animate({
opacity: 0
@@ -152,7 +152,7 @@ myModule.animation('.repeated-item', function() {
}
}
},
move : function(element, done) {
move: function(element, done) {
element.css('opacity', 0);
jQuery(element).animate({
opacity: 1
@@ -169,8 +169,8 @@ myModule.animation('.repeated-item', function() {
},
// you can also capture these animation events
addClass : function(element, className, done) {},
removeClass : function(element, className, done) {}
addClass: function(element, className, done) {},
removeClass: function(element, className, done) {}
}
});
```
@@ -255,7 +255,7 @@ myModule.directive('my-directive', ['$animate', function($animate) {
## Animations on app bootstrap / page load
By default, animations are disabled when the Angular app {@link guide/bootstrap bootstraps}. If you are using the {@link ngApp} directive,
By default, animations are disabled when the AngularJS 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.
@@ -421,7 +421,7 @@ 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}.
### Enable animations for elements outside of the Angular application DOM tree: {@link ng.$animate#pin $animate.pin()}
### Enable animations for elements outside of the AngularJS application DOM tree: {@link ng.$animate#pin $animate.pin()}
Before animating, `ngAnimate` checks to see if the element being animated is inside the application DOM tree,
and if it is not, no animation is run. Usually, this is not a problem as most apps use the `ngApp`
+10 -10
View File
@@ -5,13 +5,13 @@
# Bootstrap
This page explains the Angular initialization process and how you can manually initialize Angular
This page explains the AngularJS initialization process and how you can manually initialize AngularJS
if necessary.
## Angular `<script>` Tag
## AngularJS `<script>` Tag
This example shows the recommended path for integrating Angular with what we call automatic
This example shows the recommended path for integrating AngularJS with what we call automatic
initialization.
@@ -35,7 +35,7 @@ initialization.
* Choose: `angular-[version].min.js` for a compressed and obfuscated file, suitable for use in
production.
2. Place `ng-app` to the root of your application, typically on the `<html>` tag if you want
angular to auto-bootstrap your application.
AngularJS to auto-bootstrap your application.
<html ng-app>
@@ -51,16 +51,16 @@ initialization.
<img class="pull-right" style="padding-left: 3em;" src="img/guide/concepts-startup.png">
Angular initializes automatically upon `DOMContentLoaded` event or when the `angular.js` script is
evaluated if at that time `document.readyState` is set to `'complete'`. At this point Angular looks
AngularJS initializes automatically upon `DOMContentLoaded` event or when the `angular.js` script is
evaluated if at that time `document.readyState` is set to `'complete'`. At this point AngularJS looks
for the {@link ng.directive:ngApp `ngApp`} directive which designates your application root.
If the {@link ng.directive:ngApp `ngApp`} directive is found then Angular will:
If the {@link ng.directive:ngApp `ngApp`} directive is found then AngularJS will:
* load the {@link guide/module module} associated with the directive.
* create the application {@link auto.$injector injector}
* compile the DOM treating the {@link ng.directive:ngApp
`ngApp`} directive as the root of the compilation. This allows you to tell it to treat only a
portion of the DOM as an Angular application.
portion of the DOM as an AngularJS application.
```html
@@ -96,9 +96,9 @@ for more.
If you need to have more control over the initialization process, you can use a manual
bootstrapping method instead. Examples of when you'd need to do this include using script loaders
or the need to perform an operation before Angular compiles a page.
or the need to perform an operation before AngularJS compiles a page.
Here is an example of manually initializing Angular:
Here is an example of manually initializing AngularJS:
```html
<!doctype html>
+10 -10
View File
@@ -10,15 +10,15 @@
If you're just getting started, we recommend the {@link tutorial/ tutorial} first.
If you just want to create custom directives, we recommend the {@link guide/directive directives guide}.
If you want a deeper look into Angular's compilation process, you're in the right place.
If you want a deeper look into AngularJS's compilation process, you're in the right place.
</div>
## Overview
Angular's {@link ng.$compile HTML compiler} allows the developer to teach the
AngularJS's {@link ng.$compile HTML compiler} allows the developer to teach the
browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute
and even create new HTML elements or attributes with custom behavior. Angular calls these behavior
and even create new HTML elements or attributes with custom behavior. AngularJS calls these behavior
extensions {@link ng.$compileProvider#directive directives}.
HTML has a lot of constructs for formatting the HTML for static documents in a declarative fashion.
@@ -31,7 +31,7 @@ However, the declarative language is also limited, as it does not allow you to t
syntax. For example, there is no easy way to get the browser to align the text at 1/3 the position
instead of 1/2. What is needed is a way to teach the browser new HTML syntax.
Angular comes pre-bundled with common directives which are useful for building any app. We also
AngularJS comes pre-bundled with common directives which are useful for building any app. We also
expect that you will create directives that are specific to your app. These extensions become a
Domain Specific Language for building your application.
@@ -41,7 +41,7 @@ involved.
## Compiler
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation
Compiler is an AngularJS service which traverses the DOM looking for attributes. The compilation
process happens in two phases.
1. **Compile:** traverse the DOM and collect all of the directives. The result is a linking
@@ -142,16 +142,16 @@ This means that any changes to the data need to be re-merged with the template a
3. managing the whole update process
4. lack of behavior expressiveness
Angular is different. The Angular compiler consumes the DOM, not string templates.
AngularJS is different. The AngularJS compiler consumes the DOM, not string templates.
The result is a linking function, which when combined with a scope model results in a live view. The
view and scope model bindings are transparent. The developer does not need to make any special calls to update
the view. And because `innerHTML` is not used, you won't accidentally clobber user input.
Furthermore, Angular directives can contain not just text bindings, but behavioral constructs as
Furthermore, AngularJS directives can contain not just text bindings, but behavioral constructs as
well.
<img src="img/Two_Way_Data_Binding.png">
The Angular approach produces a stable DOM. The DOM element instance bound to a model
The AngularJS approach produces a stable DOM. The DOM element instance bound to a model
item instance does not change for the lifetime of the binding. This means that the code can get
hold of the elements and register event handlers and know that the reference will not be destroyed
by template data merge.
@@ -160,7 +160,7 @@ by template data merge.
## How directives are compiled
It's important to note that Angular operates on DOM nodes rather than strings. Usually, you don't
It's important to note that AngularJS operates on DOM nodes rather than strings. Usually, you don't
notice this restriction because when a page loads, the web browser parses HTML into the DOM automatically.
HTML compilation happens in three phases:
@@ -186,7 +186,7 @@ The result of this is a live binding between the scope and the DOM. So at this p
a model on the compiled scope will be reflected in the DOM.
Below is the corresponding code using the `$compile` service.
This should help give you an idea of what Angular does internally.
This should help give you an idea of what AngularJS does internally.
```js
var $compile = ...; // injected into your code
+23 -25
View File
@@ -5,19 +5,18 @@
# Component Router
<div class="alert alert-info">
**Deprecation Notice:** In an effort to keep synchronized with router changes in Angular 2, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.
We are investigating backporting the Angular 2 Router to Angular 1, but alternatively, use the {@link ngRoute} module or community developed projects (e.g. [ui-router](https://github.com/angular-ui/ui-router)).
<div class="alert alert-danger">
**Deprecation Notice:** In an effort to keep synchronized with router changes in the new Angular, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates.
We are investigating backporting the new Angular Router to AngularJS, but alternatively, use the {@link ngRoute} module or community developed projects (e.g. [ui-router](https://github.com/angular-ui/ui-router)).
</div>
This guide describes the new Component Router for AngularJS 1.5.
This guide describes the Component Router for AngularJS.
<div class="alert alert-info">
If you are looking for information about the old router for AngularJS 1.4 and
earlier have a look at the {@link ngRoute} module.
If you are looking for information about the default router for AngularJS have a look at the {@link ngRoute} module.
If you are looking for information about the Component Router for Angular 2 then
check out the [Angular 2 Router Guide](https://angular.io/docs/ts/latest/guide/router.html).
If you are looking for information about the Component Router for the new Angular then
check out the [Angular Router Guide](https://angular.io/docs/ts/latest/guide/router.html).
</div>
## Overview
@@ -29,7 +28,7 @@ Here is a table of the main concepts used in the Component Router.
| Router | Displays the Routing Components for the active Route. Manages navigation from one component to the next. |
| RootRouter | The top level Router that interacts with the current URL location |
| RouteConfig | Configures a Router with RouteDefinitions, each mapping a URL path to a component. |
| Routing Component | An Angular component with a RouteConfig and an associated Router. |
| Routing Component | An AngularJS component with a RouteConfig and an associated Router. |
| RouteDefinition | Defines how the router should navigate to a component based on a URL pattern. |
| ngOutlet | The directive (`<ng-outlet>`) that marks where the router should display a view. |
| ngLink | The directive (`ng-link="..."`) for binding a clickable HTML element to a route, via a Link Parameters Array. |
@@ -149,7 +148,7 @@ You can see the complete application running below.
<h1 class="title">Component Router</h1>
<app></app>
<!-- Load up the router library - normally you might use npm and host it locally -->
<!-- Load up the router library - normally you might use npm/yarn and host it locally -->
<script src="https://unpkg.com/@angular/router@0.2.0/angular1/angular_1_router.js"></script>
</file>
@@ -215,7 +214,7 @@ You can see the complete application running below.
function HeroService($q) {
var heroesPromise = $q.when([
var heroesPromise = $q.resolve([
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
@@ -308,7 +307,7 @@ You can see the complete application running below.
function CrisisService($q) {
var crisesPromise = $q.when([
var crisesPromise = $q.resolve([
{id: 1, name: 'Princess Held Captive'},
{id: 2, name: 'Dragon Burning Cities'},
{id: 3, name: 'Giant Asteroid Heading For Earth'},
@@ -415,7 +414,7 @@ You can see the complete application running below.
function DialogService($q) {
this.confirm = function(message) {
return $q.when(window.confirm(message || 'Is it OK?'));
return $q.resolve(window.confirm(message || 'Is it OK?'));
};
}
</file>
@@ -467,19 +466,18 @@ to display list and detail views of Heroes and Crises.
## Install the libraries
It is easier to use npm to install the **Component Router** module. For this guide we will also install
AngularJS itself via npm:
It is easier to use [Yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com) to install the
**Component Router** module. For this guide we will also install AngularJS itself via Yarn:
```bash
npm init
npm install angular@1.5.x --save
npm install @angular/router@0.2.0 --save
yarn init
yarn add angular@1.5.x @angular/router@0.2.0
```
## Load the scripts
Just like any Angular application, we load the JavaScript files into our `index.html`:
Just like any AngularJS application, we load the JavaScript files into our `index.html`:
```html
<script src="/node_modules/angular/angular.js"></script>
@@ -530,7 +528,7 @@ Configure the top level routed `App` Component.
Create a very simple App Component to test that the application is working.
We are using the Angular 1.5 {@link $compileProvider#component `.component()`} helper method to create
We are using the AngularJS {@link $compileProvider#component `.component()`} helper method to create
all the **Components** in our application. It is perfectly suited to this task.
```js
@@ -551,7 +549,7 @@ must have a base URL.
## Bootstrap AngularJS
Bootstrap the Angular application and add the top level App Component.
Bootstrap the AngularJS application and add the top level App Component.
```html
<body ng-app="app">
@@ -627,7 +625,7 @@ directive and a **Route Config** that defines a set of child **Routes** which de
## HeroesComponent
Create a new file `heroes.js`, which defines a new Angular module for the **Components** of this feature
Create a new file `heroes.js`, which defines a new AngularJS module for the **Components** of this feature
and registers the Heroes **Component**.
```js
@@ -714,7 +712,7 @@ making an actual server request, perhaps over HTTP.
```js
function HeroService($q) {
var heroesPromise = $q.when([
var heroesPromise = $q.resolve([
{ id: 11, name: 'Mr. Nice' },
...
]);
@@ -817,7 +815,7 @@ This hero is then attached to the **Component** so that it can be accessed in th
**How do I get hold of the current router for my component?**
Each component has its own Router. Unlike in Angular 2, we cannot use the dependency injector to get hold of a component's Router.
Each component has its own Router. Unlike in the new Angular, we cannot use the dependency injector to get hold of a component's Router.
We can only inject the `$rootRouter`. Instead we use the fact that the `ng-outlet` directive binds the current router to a `$router`
attribute on our component.
@@ -991,7 +989,7 @@ have made. The result of the prompt is a promise that can be used in a `$routerC
function DialogService($q) {
this.confirm = function(message) {
return $q.when(window.confirm(message || 'Is it OK?'));
return $q.resolve(window.confirm(message || 'Is it OK?'));
};
}
```
+11 -10
View File
@@ -5,17 +5,17 @@
# Understanding Components
In Angular, a Component is a special kind of {@link guide/directive directive} that uses a simpler
In AngularJS, 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.
This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular'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
- writing component directives will make it easier to upgrade to Angular
When not to use Components:
@@ -25,7 +25,7 @@ When not to use Components:
## 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:
Components can be registered using the `.component()` method of an AngularJS 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.)
@@ -78,6 +78,7 @@ It's also possible to add components via {@link $compileProvider#component} in a
| link functions | Yes | No |
| multiElement | Yes | No |
| priority | Yes | No |
| replace | Yes (deprecated) | No |
| require | Yes | Yes |
| restrict | Yes | No (restricted to elements only) |
| scope | Yes (default: false) | No (scope is always isolate) |
@@ -95,14 +96,14 @@ a component-based architecture. But what makes a component beyond the options th
the component helper has?
- **Components only control their own View and Data:**
Components should never modify any data or DOM that is out of their own scope. Normally, in Angular
Components should never modify any data or DOM that is out of their own scope. Normally, in AngularJS
it is possible to modify data anywhere in the application through scope inheritance and watches. This
is practical, but can also lead to problems when it is not clear which part of the application is
responsible for modifying the data. That is why component directives use an isolate scope, so a whole
class of scope manipulation is not possible.
- **Components have a well-defined public API - Inputs and Outputs:**
However, scope isolation only goes so far, because Angular uses two-way binding. So if you pass
However, scope isolation only goes so far, because AngularJS uses two-way binding. So if you pass
an object to a component like this - `bindings: {item: '='}`, and modify one of its properties, the
change will be reflected in the parent component. For components however, only the component that owns
the data should modify it, to make it easy to reason about what data is changed, and when. For that reason,
@@ -163,7 +164,7 @@ of the component. The following hook methods can be implemented:
changes. Any actions that you wish to take in response to the changes that you detect must be
invoked from this hook; implementing this has no effect on when `$onChanges` is called. For example, this hook
could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not
be detected by Angular's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;
be detected by AngularJS's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;
if detecting changes, you must store the previous value(s) for comparison to the current values.
* `$onDestroy()` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
@@ -172,8 +173,8 @@ of the component. The following hook methods can be implemented:
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.
This hook can be considered analogous to the `ngAfterViewInit` and `ngAfterContentInit` hooks in Angular 2.
Since the compilation process is rather different in Angular 1 there is no direct mapping and care should
This hook can be considered analogous to the `ngAfterViewInit` and `ngAfterContentInit` hooks in Angular.
Since the compilation process is rather different in AngularJS there is no direct mapping and care should
be taken when upgrading.
By implementing these methods, your component can hook into its lifecycle.
+22 -22
View File
@@ -54,20 +54,20 @@ Try out the Live Preview above, and then let's walk through the example and desc
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-databinding1.png">
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
This looks like normal HTML, with some new markup. In AngularJS, a file like this is called a
<a name="template">{@link templates template}</a>. When AngularJS 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"></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
{@link ng.directive:ngApp `ng-app`} attribute, which is linked to a directive that automatically
initializes our application. Angular also defines a directive for the {@link ng.directive:input `input`}
initializes our application. AngularJS also defines a directive for the {@link ng.directive:input `input`}
element that adds extra behavior to the element. The {@link ng.directive:ngModel `ng-model`} directive
stores/updates the value of the input field into/from a variable.
<div class="alert alert-info">
**Custom directives to access the DOM**: In Angular, the only place where an application should access the DOM is
**Custom directives to access the DOM**: In AngularJS, the only place where an application should access the DOM is
within directives. This is important because artifacts that access the DOM are hard to test.
If you need to access the DOM directly you should write a custom directive for this. The
{@link directive directives guide} explains how to do this.
@@ -76,12 +76,12 @@ 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
Angular to read and write variables. Note that those variables are not global variables.
AngularJS 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.
AngularJS 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"></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
Applied to the example above, the markup directs AngularJS to "take the data we got from the input widgets
and multiply them together".
The example above also contains a <a name="filter">{@link guide/filter filter}</a>.
@@ -89,7 +89,7 @@ A filter formats the value of an expression for display to the user.
In the example above, the filter {@link ng.filter:currency `currency`} formats a number
into an output that looks like money.
The important thing in the example is that Angular provides _live_ bindings:
The important thing in the example is that AngularJS provides _live_ bindings:
Whenever the input values change, the value of the expressions are automatically
recalculated and the DOM is updated with their values.
The concept behind this is <a name="databinding">{@link databinding two-way data binding}</a>.
@@ -157,9 +157,9 @@ expressions and directives.
Besides the new file that contains the controller code, we also added an
{@link ng.directive:ngController `ng-controller`} directive to the HTML.
This directive tells Angular that the new `InvoiceController` is responsible for the element with the directive
This directive tells AngularJS that the new `InvoiceController` is responsible for the element with the directive
and all of the element's children.
The syntax `InvoiceController as invoice` tells Angular to instantiate the controller
The syntax `InvoiceController as invoice` tells AngularJS to instantiate the controller
and save it in the variable `invoice` in the current scope.
We also changed all expressions in the page to read and write variables within that
@@ -260,22 +260,22 @@ get a hold of the now separated function?
This is where <a name="di">{@link di Dependency Injection}</a> comes into play.
Dependency Injection (DI) is a software design pattern that
deals with how objects and functions get created and how they get a hold of their dependencies.
Everything within Angular (directives, filters, controllers,
services, ...) is created and wired using dependency injection. Within Angular,
Everything within AngularJS (directives, filters, controllers,
services, ...) is created and wired using dependency injection. Within AngularJS,
the DI container is called the <a name="injector">{@link di injector}</a>.
To use DI, there needs to be a place where all the things that should work together are registered.
In Angular, this is the purpose of the <a name="module">{@link module modules}</a>.
When Angular starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
In AngularJS, this is the purpose of the <a name="module">{@link module modules}</a>.
When AngularJS starts, it will use the configuration of the module with the name defined by the `ng-app` directive,
including the configuration of all modules that this module depends on.
In the example above:
The template contains the directive `ng-app="invoice2"`. This tells Angular
The template contains the directive `ng-app="invoice2"`. This tells AngularJS
to use the `invoice2` module as the main module for the application.
The code snippet `angular.module('invoice2', ['finance2'])` specifies that the `invoice2` module depends on the
`finance2` module. By this, Angular uses the `InvoiceController` as well as the `currencyConverter` service.
`finance2` module. By this, AngularJS uses the `InvoiceController` as well as the `currencyConverter` service.
Now that Angular knows of all the parts of the application, it needs to create them.
Now that AngularJS knows of all the parts of the application, it needs to create them.
In the previous section we saw that controllers are created using a constructor function.
For services, there are multiple ways to specify how they are created
(see the {@link services service guide}).
@@ -284,24 +284,24 @@ In the example above, we are using an anonymous function as the factory function
This function should return the `currencyConverter` service instance.
Back to the initial question: How does the `InvoiceController` get a reference to the `currencyConverter` function?
In Angular, this is done by simply defining arguments on the constructor function. With this, the injector
In AngularJS, this is done by simply defining arguments on the constructor function. With this, the injector
is able to create the objects in the right order and pass the previously created objects into the
factories of the objects that depend on them.
In our example, the `InvoiceController` has an argument named `currencyConverter`. By this, Angular knows about the
In our example, the `InvoiceController` has an argument named `currencyConverter`. By this, AngularJS knows about the
dependency between the controller and the service and calls the controller with the service instance as argument.
The last thing that changed in the example between the previous section and this section is that we
now pass an array to the `module.controller` function, instead of a plain function. The array first
contains the names of the service dependencies that the controller needs. The last entry
in the array is the controller constructor function.
Angular uses this array syntax to define the dependencies so that the DI also works after minifying
AngularJS uses this array syntax to define the dependencies so that the DI also works after minifying
the code, which will most probably rename the argument name of the controller constructor function
to something shorter like `a`.
## Accessing the backend
Let's finish our example by fetching the exchange rates from the Yahoo Finance API.
The following example shows how this is done with Angular:
The following example shows how this is done with AngularJS:
<example name="guide-concepts-3" ng-app-included="true">
<file name="invoice3.js">
@@ -380,7 +380,7 @@ The following example shows how this is done with Angular:
What changed?
Our `currencyConverter` service of the `finance` module now uses the {@link ng.$http `$http`}, a
built-in service provided by Angular for accessing a server backend. `$http` is a wrapper around
built-in service provided by AngularJS for accessing a server backend. `$http` is a wrapper around
[`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
and [JSONP](http://en.wikipedia.org/wiki/JSONP) transports.
+14 -14
View File
@@ -5,11 +5,11 @@
# Understanding Controllers
In Angular, a Controller is defined by a JavaScript **constructor function** that is used to augment the
{@link scope Angular Scope}.
In AngularJS, a Controller is defined by a JavaScript **constructor function** that is used to augment the
{@link scope AngularJS Scope}.
When a Controller is attached to the DOM via the {@link ng.directive:ngController ng-controller}
directive, Angular will instantiate a new Controller object, using the specified Controller's
directive, AngularJS will instantiate a new Controller object, using the specified Controller's
**constructor function**. A new **child scope** will be created and made available as an injectable
parameter to the Controller's constructor function as `$scope`.
@@ -24,18 +24,18 @@ Use controllers to:
Do not use controllers to:
- Manipulate DOM — Controllers should contain only business logic.
Putting any presentation logic into Controllers significantly affects its testability. Angular
Putting any presentation logic into Controllers significantly affects its testability. AngularJS
has {@link databinding databinding} for most cases and {@link guide/directive directives} to
encapsulate manual DOM manipulation.
- Format input — Use {@link forms angular form controls} instead.
- Filter output — Use {@link guide/filter angular filters} instead.
- Share code or state across controllers — Use {@link services angular
- Format input — Use {@link forms AngularJS form controls} instead.
- Filter output — Use {@link guide/filter AngularJS filters} instead.
- Share code or state across controllers — Use {@link services AngularJS
services} instead.
- Manage the life-cycle of other components (for example, to create service instances).
## Setting up the initial state of a `$scope` object
Typically, when you create an application you need to set up the initial state for the Angular
Typically, when you create an application you need to set up the initial state for the AngularJS
`$scope`. You set up the initial state of a scope by attaching properties to the `$scope` object.
The properties contain the **view model** (the model that will be presented by the view). All the
`$scope` properties will be available to the {@link templates template} at the point in the DOM where the Controller
@@ -52,13 +52,13 @@ myApp.controller('GreetingController', ['$scope', function($scope) {
}]);
```
We create an {@link module Angular Module}, `myApp`, for our application. Then we add the controller's
We create an {@link module AngularJS Module}, `myApp`, for our application. Then we add the controller's
constructor function to the module using the `.controller()` method. This keeps the controller's
constructor function out of the global scope.
<div class="alert alert-info">
We have used an **inline injection annotation** to explicitly specify the dependency
of the Controller on the `$scope` service provided by Angular. See the guide on
of the Controller on the `$scope` service provided by AngularJS. See the guide on
{@link guide/di Dependency Injection} for more information.
</div>
@@ -88,7 +88,7 @@ myApp.controller('DoubleController', ['$scope', function($scope) {
}]);
```
Once the Controller has been attached to the DOM, the `double` method can be invoked in an Angular
Once the Controller has been attached to the DOM, the `double` method can be invoked in an AngularJS
expression in the template:
```js
@@ -99,7 +99,7 @@ expression in the template:
As discussed in the {@link concepts Concepts} section of this guide, any
objects (or primitives) assigned to the scope become model properties. Any methods assigned to
the scope are available in the template/view, and can be invoked via angular expressions
the scope are available in the template/view, and can be invoked via AngularJS expressions
and `ng` event handler directives (e.g. {@link ng.directive:ngClick ngClick}).
## Using Controllers Correctly
@@ -113,7 +113,7 @@ This is discussed in the {@link di Dependency Injection} and {@link services
Services} sections of this guide.
# Associating Controllers with Angular Scope Objects
# Associating Controllers with AngularJS Scope Objects
You can associate Controllers with scope objects implicitly via the {@link ng.directive:ngController ngController
directive} or {@link ngRoute.$route $route service}.
@@ -121,7 +121,7 @@ directive} or {@link ngRoute.$route $route service}.
## Simple Spicy Controller Example
To illustrate further how Controller components work in Angular, let's create a little app with the
To illustrate further how Controller components work in AngularJS, let's create a little app with the
following components:
- A {@link templates template} with two buttons and a simple message
+10 -10
View File
@@ -4,38 +4,38 @@
@description
Angular sets these CSS classes. It is up to your application to provide useful styling.
AngularJS sets these CSS classes. It is up to your application to provide useful styling.
# CSS classes used by angular
# CSS classes used by AngularJS
* `ng-scope`
- **Usage:** angular applies this class to any element for which a new {@link $rootScope scope}
- **Usage:** AngularJS applies this class to any element for which a new {@link $rootScope scope}
is defined. (see {@link guide/scope scope} guide for more information about scopes)
* `ng-isolate-scope`
- **Usage:** angular applies this class to any element for which a new
- **Usage:** AngularJS applies this class to any element for which a new
{@link guide/directive#isolating-the-scope-of-a-directive isolate scope} is defined.
* `ng-binding`
- **Usage:** angular applies this class to any element that is attached to a data binding, via `ng-bind` or
- **Usage:** AngularJS applies this class to any element that is attached to a data binding, via `ng-bind` or
`{{}}` curly braces, for example. (see {@link guide/databinding databinding} guide)
* `ng-invalid`, `ng-valid`
- **Usage:** angular applies this class to a form control widget element if that element's input does
- **Usage:** AngularJS applies this class to a form control widget element if that element's input does
not pass validation. (see {@link ng.directive:input input} directive)
* `ng-pristine`, `ng-dirty`
- **Usage:** angular {@link ng.directive:ngModel ngModel} directive applies `ng-pristine` class
- **Usage:** AngularJS {@link ng.directive:ngModel ngModel} directive applies `ng-pristine` class
to a new form control widget which did not have user interaction. Once the user interacts with
the form control, the class is changed to `ng-dirty`.
* `ng-touched`, `ng-untouched`
- **Usage:** angular {@link ng.directive:ngModel ngModel} directive applies `ng-untouched` class
- **Usage:** AngularJS {@link ng.directive:ngModel ngModel} directive applies `ng-untouched` class
to a new form control widget which has not been blurred. Once the user blurs the form control,
the class is changed to `ng-touched`.
## Related Topics
* {@link guide/templates Angular Templates}
* {@link guide/forms Angular Forms}
* {@link guide/templates AngularJS Templates}
* {@link guide/forms AngularJS Forms}
+6 -6
View File
@@ -5,8 +5,8 @@
# Data Binding
Data-binding in Angular apps is the automatic synchronization of data between the model and view
components. The way that Angular implements data-binding lets you treat the model as the
Data-binding in AngularJS apps is the automatic synchronization of data between the model and view
components. The way that AngularJS implements data-binding lets you treat the model as the
single-source-of-truth in your application. The view is a projection of the model at all times.
When the model changes, the view reflects the change, and vice versa.
@@ -19,10 +19,10 @@ or related sections of the view are NOT automatically reflected in the view. Wor
that the user makes to the view are not reflected in the model. This means that the developer has
to write code that constantly syncs the view with the model and the model with the view.
## Data Binding in Angular Templates
## Data Binding in AngularJS Templates
<img class="right" src="img/Two_Way_Data_Binding.png"/><br />
Angular templates work differently. First the template (which is the uncompiled HTML along with
AngularJS templates work differently. First the template (which is the uncompiled HTML along with
any additional markup or directives) is compiled on the browser. The compilation step produces a
live view. Any changes to the view are immediately reflected in the model, and any changes in
the model are propagated to the view. The model is the single-source-of-truth for the application
@@ -36,5 +36,5 @@ isolation without the view and the related DOM/browser dependency.
## Related Topics
* {@link scope Angular Scopes}
* {@link templates Angular Templates}
* {@link scope AngularJS Scopes}
* {@link templates AngularJS Templates}
+1 -1
View File
@@ -13,7 +13,7 @@
## What are decorators?
Decorators are a design pattern that is used to separate modification or *decoration* of a class without modifying the
original source code. In Angular, decorators are functions that allow a service, directive or filter to be modified
original source code. In AngularJS, decorators are functions that allow a service, directive or filter to be modified
prior to its usage.
## How to use decorators
+10 -10
View File
@@ -8,13 +8,13 @@
Dependency Injection (DI) is a software design pattern that deals with how components get hold of
their dependencies.
The Angular injector subsystem is in charge of creating components, resolving their dependencies,
The AngularJS injector subsystem is in charge of creating components, resolving their dependencies,
and providing them to other components as requested.
## Using Dependency Injection
DI is pervasive throughout Angular. You can use it when defining components or when providing `run`
DI is pervasive throughout AngularJS. You can use it when defining components or when providing `run`
and `config` blocks for a module.
- Components such as services, directives, filters, and animations are defined by an injectable
@@ -100,7 +100,7 @@ Moreover, additional dependencies are made available to Controllers:
## Dependency Annotation
Angular invokes certain functions (like service factories and controllers) via the injector.
AngularJS invokes certain functions (like service factories and controllers) via the injector.
You need to annotate these functions so that the injector knows what services to inject into
the function. There are three ways of annotating your code with service name information:
@@ -204,11 +204,11 @@ angular.module('myApp', [])
// $rootScope is implicitly injected
})
.run(['willBreak', function(willBreak) {
// Angular will throw when this runs
// AngularJS will throw when this runs
}]);
```
When the `willBreak` service is instantiated, Angular will throw an error because of strict mode.
When the `willBreak` service is instantiated, AngularJS will throw an error because of strict mode.
This is useful when using a tool like [ng-annotate](https://github.com/olov/ng-annotate) to
ensure that all of your application components have annotations.
@@ -225,7 +225,7 @@ angular.bootstrap(document, ['myApp'], {
## Why Dependency Injection?
This section motivates and explains Angular's use of DI. For how to use DI, see above.
This section motivates and explains AngularJS's use of DI. For how to use DI, see above.
For in-depth discussion about DI, see
[Dependency Injection](http://en.wikipedia.org/wiki/Dependency_injection) at Wikipedia,
@@ -264,7 +264,7 @@ code that constructs `SomeClass`.
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-module-injector.png">
To manage the responsibility of dependency creation, each Angular application has an {@link
To manage the responsibility of dependency creation, each AngularJS application has an {@link
angular.injector injector}. The injector is a
[service locator](http://en.wikipedia.org/wiki/Service_locator_pattern) that is responsible for
construction and lookup of dependencies.
@@ -290,7 +290,7 @@ myModule.factory('greeter', function($window) {
```
Create a new injector that can provide components defined in our `myModule` module and request our
`greeter` service from the injector. (This is usually done automatically by angular bootstrap).
`greeter` service from the injector. (This is usually done automatically by AngularJS bootstrap).
```js
var injector = angular.injector(['ng', 'myModule']);
@@ -317,7 +317,7 @@ function MyController($scope, greeter) {
}
```
When Angular compiles the HTML, it processes the `ng-controller` directive, which in turn
When AngularJS compiles the HTML, it processes the `ng-controller` directive, which in turn
asks the injector to create an instance of the controller and its dependencies.
```js
@@ -332,6 +332,6 @@ This is the best outcome. The application code simply declares the dependencies
having to deal with the injector. This setup does not break the Law of Demeter.
<div class="alert alert-info">
**Note:** Angular uses
**Note:** AngularJS uses
[**constructor injection**](http://misko.hevery.com/2009/02/19/constructor-injection-vs-setter-injection/).
</div>
+19 -13
View File
@@ -24,9 +24,9 @@ name, comment or CSS class) that tell AngularJS's **HTML compiler** ({@link ng.$
to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform
the DOM element and its children.
Angular comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngClass`.
Much like you create controllers and services, you can create your own directives for Angular to use.
When Angular {@link guide/bootstrap bootstraps} your application, the
AngularJS comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngClass`.
Much like you create controllers and services, you can create your own directives for AngularJS to use.
When AngularJS {@link guide/bootstrap bootstraps} your application, the
{@link guide/compiler HTML compiler} traverses the DOM matching directives against the DOM elements.
<div class="alert alert-info">
@@ -41,7 +41,7 @@ mirrors the process of compiling source code in
## Matching Directives
Before we can write a directive, we need to know how Angular's {@link guide/compiler HTML compiler}
Before we can write a directive, we need to know how AngularJS's {@link guide/compiler HTML compiler}
determines when to use a given 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
@@ -67,7 +67,7 @@ And the following `<person>` element **matches** the `person` directive:
### Normalization
Angular **normalizes** an element's tag and attribute name to determine which elements match which
AngularJS **normalizes** an element's tag and attribute name to determine which elements match which
directives. We typically refer to directives by their case-sensitive
[camelCase](http://en.wikipedia.org/wiki/CamelCase) **normalized** name (e.g. `ngModel`).
However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case
@@ -120,11 +120,13 @@ The other forms shown above are accepted for legacy reasons but we advise you to
### Directive types
`$compile` can match directives based on element names, attributes, class names, as well as comments.
`$compile` can match directives based on element names (E), attributes (A), class names (C),
and comments (M).
All of the Angular-provided directives match attribute name, tag name, comments, or class name.
The following demonstrates the various ways a directive (`myDir` in this case) can be referenced
from within a template:
The built-in the AngularJS directives show in their documentation page which type of matching they support.
The following demonstrates the various ways a directive (`myDir` in this case) that matches all
4 types can be referenced from within a template.
```html
<my-dir></my-dir>
@@ -133,6 +135,10 @@ from within a template:
<span class="my-dir: exp;"></span>
```
A directive can specify which of the 4 matching types it supports in the
{@link ng.$compile#-restrict- `restrict`} property of the directive definition object.
The default is `EA`.
<div class="alert alert-success">
**Best Practice:** Prefer using directives via tag name and attributes over comment and class names.
Doing so generally makes it easier to determine what directives a given element matches.
@@ -172,7 +178,7 @@ and compilation process.
directive names. For instance, if you created a `<carousel>` directive, it would be problematic if HTML7
introduced the same element. A two or three letter prefix (e.g. `btfCarousel`) works well. Similarly, do
not prefix your own directives with `ng` or they might conflict with directives included in a future
version of Angular.
version of AngularJS.
</div>
For the following examples, we'll use the prefix `my` (e.g. `myCustomer`).
@@ -251,7 +257,7 @@ using `templateUrl` instead:
</example>
`templateUrl` can also be a function which returns the URL of an HTML template to be loaded and
used for the directive. Angular will call the `templateUrl` function with two parameters: the
used for the directive. AngularJS will call the `templateUrl` function with two parameters: the
element that the directive was called on, and an `attr` object associated with that element.
<div class="alert alert-warning">
@@ -538,7 +544,7 @@ directive logic will be put.
`link` takes a function with the following signature,
`function link(scope, element, attrs, controller, transcludeFn) { ... }`, where:
* `scope` is an Angular scope object.
* `scope` is an AngularJS scope object.
* `element` is the jqLite-wrapped element that this directive matches.
* `attrs` is a hash object with key-value pairs of normalized attribute names and their
corresponding attribute values.
@@ -608,7 +614,7 @@ function.
We register an event `element.on('$destroy', ...)`. What fires this `$destroy` event?
There are a few special events that AngularJS emits. When a DOM node that has been compiled
with Angular's compiler is destroyed, it emits a `$destroy` event. Similarly, when an AngularJS
with AngularJS's compiler is destroyed, it emits a `$destroy` event. Similarly, when an AngularJS
scope is destroyed, it broadcasts a `$destroy` event to listening scopes.
By listening to this event, you can remove event listeners that might cause memory leaks.
+3 -3
View File
@@ -7,7 +7,7 @@
<div class="alert alert-danger">
**Note:** In the past, end-to-end testing could be done with a deprecated tool called
[Angular Scenario Runner](http://code.angularjs.org/1.2.16/docs/guide/e2e-testing). That tool
[AngularJS Scenario Runner](http://code.angularjs.org/1.2.16/docs/guide/e2e-testing). That tool
is now in maintenance mode.
</div>
@@ -19,7 +19,7 @@ these problems.
We have built [Protractor](https://github.com/angular/protractor), an end
to end test runner which simulates user interactions that will help you verify the health of your
Angular application.
AngularJS application.
## Using Protractor
@@ -76,7 +76,7 @@ filter the list of items.
## Example
See the [angular-seed](https://github.com/angular/angular-seed) project for more examples, or look
at the embedded examples in the Angular documentation (For example, {@link $http $http}
at the embedded examples in the AngularJS documentation (For example, {@link $http $http}
has an end-to-end test in the example under the `protractor.js` tag).
## Caveats
+23 -23
View File
@@ -3,13 +3,13 @@
@sortOrder 270
@description
# Angular Expressions
# AngularJS Expressions
Angular expressions are JavaScript-like code snippets that are mainly placed in
AngularJS expressions are JavaScript-like code snippets that are mainly placed in
interpolation bindings such as `<span title="{{ attrBinding }}">{{ textBinding }}</span>`,
but also used directly in directive attributes such as `ng-click="functionExpression()"`.
For example, these are valid expressions in Angular:
For example, these are valid expressions in AngularJS:
* `1+2`
* `a+b`
@@ -17,37 +17,37 @@ For example, these are valid expressions in Angular:
* `items[index]`
## Angular Expressions vs. JavaScript Expressions
## AngularJS Expressions vs. JavaScript Expressions
Angular expressions are like JavaScript expressions with the following differences:
AngularJS expressions are like JavaScript expressions with the following differences:
* **Context:** JavaScript expressions are evaluated against the global `window`.
In Angular, expressions are evaluated against a {@link ng.$rootScope.Scope `scope`} object.
In AngularJS, expressions are evaluated against a {@link ng.$rootScope.Scope `scope`} object.
* **Forgiving:** In JavaScript, trying to evaluate undefined properties generates `ReferenceError`
or `TypeError`. In Angular, expression evaluation is forgiving to `undefined` and `null`.
or `TypeError`. In AngularJS, expression evaluation is forgiving to `undefined` and `null`.
* **Filters:** You can use {@link guide/filter filters} within expressions to format data before
displaying it.
* **No Control Flow Statements:** You cannot use the following in an Angular expression:
* **No Control Flow Statements:** You cannot use the following in an AngularJS expression:
conditionals, loops, or exceptions.
* **No Function Declarations:** You cannot declare functions in an Angular expression,
* **No Function Declarations:** You cannot declare functions in an AngularJS expression,
even inside `ng-init` directive.
* **No RegExp Creation With Literal Notation:** You cannot create regular expressions
in an Angular expression.
in an AngularJS expression.
* **No Object Creation With New Operator:** You cannot use `new` operator in an Angular expression.
* **No Object Creation With New Operator:** You cannot use `new` operator in an AngularJS expression.
* **No Bitwise, Comma, And Void Operators:** You cannot use
[Bitwise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators),
`,` or `void` operators in an Angular expression.
`,` or `void` operators in an AngularJS expression.
If you want to run more complex JavaScript code, you should make it a controller method and call
the method from your view. If you want to `eval()` an Angular expression yourself, use the
the method from your view. If you want to `eval()` an AngularJS expression yourself, use the
{@link ng.$rootScope.Scope#$eval `$eval()`} method.
## Example
@@ -110,10 +110,10 @@ You can try evaluating different expressions here:
## Context
Angular does not use JavaScript's `eval()` to evaluate expressions. Instead Angular's
AngularJS does not use JavaScript's `eval()` to evaluate expressions. Instead AngularJS's
{@link ng.$parse $parse} service processes these expressions.
Angular expressions do not have direct access to global variables like `window`, `document` or `location`.
AngularJS expressions do not have direct access to global variables like `window`, `document` or `location`.
This restriction is intentional. It prevents accidental access to the global state a common source of subtle bugs.
Instead use services like `$window` and `$location` in functions on controllers, which are then called from expressions.
@@ -180,7 +180,7 @@ Similarly, invoking a function `a.b.c()` on `undefined` or `null` simply returns
## No Control Flow Statements
Apart from the ternary operator (`a ? b : c`), you cannot write a control flow statement in an
expression. The reason behind this is core to the Angular philosophy that application logic should
expression. The reason behind this is core to the AngularJS philosophy that application logic should
be in controllers, not the views. If you need a real conditional, loop, or to throw from a view
expression, delegate to a JavaScript method instead.
@@ -241,7 +241,7 @@ An expression that starts with `::` is considered a one-time expression. One-tim
will stop recalculating once they are stable, which happens after the first digest if the expression
result is a non-undefined value (see value stabilization algorithm below).
<example module="oneTimeBidingExampleApp" name="expression-one-time">
<example module="oneTimeBindingExampleApp" name="expression-one-time">
<file name="index.html">
<div ng-controller="EventController">
<button ng-click="clickMe($event)">Click Me</button>
@@ -250,7 +250,7 @@ result is a non-undefined value (see value stabilization algorithm below).
</div>
</file>
<file name="script.js">
angular.module('oneTimeBidingExampleApp', []).
angular.module('oneTimeBindingExampleApp', []).
controller('EventController', ['$scope', function($scope) {
var counter = 0;
var names = ['Igor', 'Misko', 'Chirayu', 'Lucas'];
@@ -265,24 +265,24 @@ result is a non-undefined value (see value stabilization algorithm below).
</file>
<file name="protractor.js" type="protractor">
it('should freeze binding after its value has stabilized', function() {
var oneTimeBiding = element(by.id('one-time-binding-example'));
var oneTimeBinding = element(by.id('one-time-binding-example'));
var normalBinding = element(by.id('normal-binding-example'));
expect(oneTimeBiding.getText()).toEqual('One time binding:');
expect(oneTimeBinding.getText()).toEqual('One time binding:');
expect(normalBinding.getText()).toEqual('Normal binding:');
element(by.buttonText('Click Me')).click();
expect(oneTimeBiding.getText()).toEqual('One time binding: Igor');
expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');
expect(normalBinding.getText()).toEqual('Normal binding: Igor');
element(by.buttonText('Click Me')).click();
expect(oneTimeBiding.getText()).toEqual('One time binding: Igor');
expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');
expect(normalBinding.getText()).toEqual('Normal binding: Misko');
element(by.buttonText('Click Me')).click();
element(by.buttonText('Click Me')).click();
expect(oneTimeBiding.getText()).toEqual('One time binding: Igor');
expect(oneTimeBinding.getText()).toEqual('One time binding: Igor');
expect(normalBinding.getText()).toEqual('Normal binding: Lucas');
});
</file>
+15 -14
View File
@@ -3,9 +3,9 @@
@sortOrder 150
@description
# External Angular 1 Resources
# External AngularJS Resources
This is a collection of external, 3rd party resources for learning and developing Angular.
This is a collection of external, 3rd party resources for learning and developing AngularJS.
## Articles, Videos, and Projects
@@ -21,7 +21,7 @@ This is a collection of external, 3rd party resources for learning and developin
#### Application Structure & Style Guides
* [Angular Styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
* [AngularJS Styleguide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
* [Architecture, file structure, components, one-way dataflow and best practices](https://github.com/toddmotto/angular-styleguide)
* [When to use directives, controllers or services](http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/)
* [Service vs Factory](http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html)
@@ -32,8 +32,8 @@ This is a collection of external, 3rd party resources for learning and developin
#### Mobile
* [Angular on Mobile Guide](http://www.ng-newsletter.com/posts/angular-on-mobile.html)
* [Angular and Cordova](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/)
* [AngularJS on Mobile Guide](http://www.ng-newsletter.com/posts/angular-on-mobile.html)
* [AngularJS and Cordova](http://devgirl.org/2013/06/10/quick-start-guide-phonegap-and-angularjs/)
* [Ionic Framework](http://ionicframework.com/)
#### Deployment
@@ -75,12 +75,12 @@ This is a collection of external, 3rd party resources for learning and developin
* **Getting Started:** [Comparison of the options for starting a new project](http://www.dancancro.com/comparison-of-angularjs-application-starters/)
* **Debugging:** [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en)
* **Editor support:** [Webstorm](http://plugins.jetbrains.com/plugin/6971) (and [video](http://www.youtube.com/watch?v=LJOyrSh1kDU)), [Sublime Text](https://github.com/angular-ui/AngularJS-sublime-package), [Visual Studio](http://madskristensen.net/post/angularjs-intellisense-in-visual-studio-2012), [Atom](https://github.com/angular-ui/AngularJS-Atom), [Vim](https://github.com/burnettk/vim-angular)
* **Workflow:** [Yeoman.io](https://github.com/yeoman/generator-angular) and [Angular Yeoman Tutorial](http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/)
* **Workflow:** [Yeoman.io](https://github.com/yeoman/generator-angular) and [AngularJS Yeoman Tutorial](http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/)
## Complementary Libraries
This is a list of libraries that enhance Angular, add common UI components or integrate with other libraries.
You can find a larger list of Angular external libraries at [ngmodules.org](http://ngmodules.org/).
This is a list of libraries that enhance AngularJS, add common UI components or integrate with other libraries.
You can find a larger list of AngularJS external libraries at [ngmodules.org](http://ngmodules.org/).
* **Advanced Routing:** [UI-Router](https://github.com/angular-ui/ui-router)
* **Authentication:** [Http Auth Interceptor](https://github.com/witoldsz/angular-http-auth)
@@ -98,28 +98,29 @@ You can find a larger list of Angular external libraries at [ngmodules.org](http
- Data Modeling [JS-Data-Angular](https://github.com/js-data/js-data-angular)
* **Fileupload:**
- [ng-file-upload](https://github.com/danialfarid/ng-file-upload)
- [blueimp-fileupload for Angular](https://blueimp.github.io/jQuery-File-Upload/angularjs.html)
- [blueimp-fileupload for AngularJS](https://blueimp.github.io/jQuery-File-Upload/angularjs.html)
* **General UI Libraries:**
- [Angular Material](https://material.angularjs.org/latest/)
- [Angular UI Bootstrap](http://angular-ui.github.io/)
- [AngularJS Material](https://material.angularjs.org/latest/)
- [AngularJS UI Bootstrap](http://angular-ui.github.io/)
- [AngularStrap for Bootstrap 3](http://mgcrea.github.io/angular-strap/)
- [KendoUI](http://kendo-labs.github.io/angular-kendo/#/)
- [Wijmo](http://wijmo.com/tag/angularjs-2/)
* **Specific UI Elements:**
- [ngInfiniteScroll](https://sroze.github.io/ngInfiniteScroll/)
- [ngTable](https://github.com/esvit/ng-table)
- [Angular UI Grid](http://angular-ui.github.io/grid)
- [AngularJS UI Grid](http://angular-ui.github.io/grid)
- [Toaster Notifications](https://github.com/jirikavi/AngularJS-Toaster)
- [textAngular Rich Text Editor / contenteditable](http://textangular.com/) (Rich Text Editor /
binding to contenteditable)
- [Angular UI Map (Google Maps)](https://github.com/angular-ui/ui-map)
- [AngularJS UI Map (Google Maps)](https://github.com/angular-ui/ui-map)
## General Learning Resources
### Books
* [AngularJS Directives](http://www.amazon.com/AngularJS-Directives-Alex-Vanston/dp/1783280336) by Alex Vanston
* [AngularJS Essentials (Free eBook)](https://www.packtpub.com/packt/free-ebook/angularjs-essentials) by Rodrigo Branas
* [AngularJS : Novice to Ninja](http://www.amazon.in/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453) by Sandeep Panda
* [AngularJS in Action](https://www.manning.com/books/angularjs-in-action) by Lukas Ruebbelke
* [AngularJS: Novice to Ninja](http://www.amazon.in/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453) by Sandeep Panda
* [AngularJS UI Development](http://www.amazon.com/AngularJS-UI-Development-Amit-Ghart-ebook/dp/B00OXVAK7A) by Amit Gharat and Matthias Nehlsen
* [AngularJS: Up and Running](http://www.amazon.com/AngularJS-Running-Enhanced-Productivity-Structured/dp/1491901942) by Brad Green and Shyam Seshadri
* [Developing an AngularJS Edge](http://www.amazon.com/Developing-AngularJS-Edge-Christopher-Hiller-ebook/dp/B00CJLFF8K) by Christopher Hiller
+5 -5
View File
@@ -6,7 +6,7 @@
# Filters
Filters format the value of an expression for display to the user. They can be used in view
templates, controllers or services. Angular comes with a collection of
templates, controllers or services. AngularJS comes with a collection of
[built-in filters](api/ng/filter), but it is easy to define your own as well.
The underlying API is the {@link ng.$filterProvider}.
@@ -44,7 +44,7 @@ as inputs. Filters that receive [Objects](https://developer.mozilla.org/en-US/do
as input are executed on each `$digest`, as it would be too costly to track if the inputs have changed.
2. Filters that are marked as `$stateful` are also executed on each $digest.
See {@link guide/filter#stateful-filters Stateful filters} for more information. Note that no Angular
See {@link guide/filter#stateful-filters Stateful filters} for more information. Note that no AngularJS
core filters are $stateful.
@@ -110,12 +110,12 @@ function.
The filter function should be a [pure function](http://en.wikipedia.org/wiki/Pure_function), which
means that it should always return the same result given the same input arguments and should not affect
external state, for example, other Angular services. Angular relies on this contract and will by default
external state, for example, other AngularJS services. AngularJS relies on this contract and will by default
execute a filter only when the inputs to the function change.
{@link guide/filter#stateful-filters Stateful filters} are possible, but less performant.
<div class="alert alert-warning">
**Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
**Note:** Filter names must be valid AngularJS {@link expression} identifiers, such as `uppercase` or `orderBy`.
Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace
your filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores
(`myapp_subsection_filterx`).
@@ -162,7 +162,7 @@ text upper-case.
### Stateful filters
It is strongly discouraged to write filters that are stateful, because the execution of those can't
be optimized by Angular, which often leads to performance issues. Many stateful filters can be
be optimized by AngularJS, which often leads to performance issues. Many stateful filters can be
converted into stateless filters just by exposing the hidden state as a model and turning it into an
argument for the filter.
+10 -10
View File
@@ -28,8 +28,8 @@ for other directives to augment its behavior.
<form novalidate class="simple-form">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<label>E-mail: <input type="email" ng-model="user.email" /></label><br />
Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label>
<label><input type="radio" ng-model="user.gender" value="female" />female</label><br />
Best Editor: <label><input type="radio" ng-model="user.preference" value="vi" />vi</label>
<label><input type="radio" ng-model="user.preference" value="emacs" />emacs</label><br />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
@@ -303,7 +303,7 @@ after last change.
## Custom Validation
Angular provides basic implementation for most common HTML5 {@link ng.directive:input input}
AngularJS provides basic implementation for most common HTML5 {@link ng.directive:input input}
types: ({@link input[text] text}, {@link input[number] number}, {@link input[url] url},
{@link input[email] email}, {@link input[date] date}, {@link input[radio] radio}, {@link input[checkbox] checkbox}),
as well as some directives for validation (`required`, `pattern`, `minlength`, `maxlength`,
@@ -314,7 +314,7 @@ the {@link ngModel.NgModelController `ngModelController`}. To get a hold of the
you require it in the directive as shown in the example below.
Each function in the `$validators` object receives the `modelValue` and the `viewValue`
as parameters. Angular will then call `$setValidity` internally with the function's return value
as parameters. AngularJS will then call `$setValidity` internally with the function's return value
(`true`: valid, `false`: invalid). The validation functions are executed every time an input
is changed (`$setViewValue` is called) or whenever the bound `model` changes.
Validation happens after successfully running `$parsers` and `$formatters`, respectively.
@@ -363,7 +363,7 @@ In the following example we create two directives:
<file name="script.js">
var app = angular.module('form-example1', []);
var INTEGER_REGEXP = /^\-?\d+$/;
var INTEGER_REGEXP = /^-?\d+$/;
app.directive('integer', function() {
return {
require: 'ngModel',
@@ -396,7 +396,7 @@ In the following example we create two directives:
if (ctrl.$isEmpty(modelValue)) {
// consider empty model valid
return $q.when();
return $q.resolve();
}
var def = $q.defer();
@@ -422,7 +422,7 @@ In the following example we create two directives:
## Modifying built-in validators
Since Angular itself uses `$validators`, you can easily replace or remove built-in validators,
Since AngularJS itself uses `$validators`, you can easily replace or remove built-in validators,
should you find it necessary. The following example shows you how to overwrite the email validator
in `input[email]` from a custom directive so that it requires a specific top-level domain,
`example.com` to be present.
@@ -451,10 +451,10 @@ Note that you can alternatively use `ng-pattern` to further restrict the validat
return {
require: '?ngModel',
link: function(scope, elm, attrs, ctrl) {
// only apply the validator if ngModel is present and Angular has added the email validator
// only apply the validator if ngModel is present and AngularJS has added the email validator
if (ctrl && ctrl.$validators.email) {
// this will overwrite the default Angular email validator
// this will overwrite the default AngularJS email validator
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
};
@@ -467,7 +467,7 @@ Note that you can alternatively use `ng-pattern` to further restrict the validat
## Implementing custom form controls (using `ngModel`)
Angular implements all of the basic HTML form controls ({@link ng.directive:input input},
AngularJS implements all of the basic HTML form controls ({@link ng.directive:input input},
{@link ng.directive:select select}, {@link ng.directive:textarea textarea}),
which should be sufficient for most cases. However, if you need more flexibility,
you can write your own form control as a directive.

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