Wording has been changed in two of the examples to read naturally.
For example:
From: 'Do not use controllers for to run stateless or stateful code
shared across controllers'
To: 'Do not use controllers for sharing stateless or stateful code
across controllers'
Closes#3454
When using $resource you must setup your actions carefully based on what the server returns.
If the server responds to a request with an array then you must configure the action with
`isArray:true` and vice versa. The built-in `get` action defaults to `isArray:false` and the
`query` action defaults to `isArray:true`, which is must be changed if the server does not do this.
Before the error message was an exception inside angular.copy, which didn't explain what the
real problem was. Rather than changing the way that angular.copy works, this change ensures that
a better error message is provided to the programmer if they do not set up their resource actions
correctly.
Closes#2255, #1044
The current logo looks awful on high-density displays. SVG is a
better choice because it can scale to any resolution without
increasing file size.
Amending #2775 to add support for IE 8 by falling back to existing PNG
with img.onerror
Using relative URLs as directed by @btford and @petebacondarwin.
(commit by Brenton Simpson - @appsforartists)
Closes#2874
Support controller: 'MyController as my' syntax for directives which publishes
the controller instance to the directive scope.
Support controllerAs syntax to define an alias to the controller within the
directive scope.
Changes:
- Fix our old code to use bower_components/ as the install dir
- Fix the Bootstrap asset to use github.com/twbs/bootstrap (it moved)
- Fail the build on Bower failure. Bower should not fail silently.
BREAKING CHANGE: previously ngInclude only updated its content, after this change
ngInclude will recreate itself every time a new content is included. This ensures
that a single rootElement for all the included contents always exists, which makes
definition of css styles for animations much easier.
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
- $animate.enter(element, parent, after, done);
- $animate.leave(element, done);
- $animate.move(element, parent, after, done);
- $animate.addClass(element, className, done);
- $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Strict Contextual Escaping
--------------------------
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as safe
to use for that context One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html-unsafe. We
refer to these contexts as privileged or SCE contexts.
As of version 1.2, Angular ships with SCE enabled by default.
Note: When enabled (the default), IE8 in quirks mode is not supported.
In this mode, IE8 allows one to execute arbitrary javascript by the use
of the expression() syntax. Refer
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx
to learn more about them. You can ensure your document is in standards
mode and not quirks mode by adding <!doctype html> to the top of your
HTML document.
SCE assists in writing code in way that (a) is secure by default and (b)
makes auditing for security vulnerabilities such as XSS, clickjacking,
etc. a lot easier.
Here's an example of a binding in a privileged context:
<input ng-model="userHtml">
<div ng-bind-html-unsafe="{{userHtml}}">
Notice that ng-bind-html-unsafe is bound to {{userHtml}} controlled by
the user. With SCE disabled, this application allows the user to render
arbitrary HTML into the DIV. In a more realistic example, one may be
rendering user comments, blog articles, etc. via bindings. (HTML is
just one example of a context where rendering user controlled input
creates security vulnerabilities.)
For the case of HTML, you might use a library, either on the client side, or on the server side,
to sanitize unsafe HTML before binding to the value and rendering it in the document.
How would you ensure that every place that used these types of bindings was bound to a value that
was sanitized by your library (or returned as safe for rendering by your server?) How can you
ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
properties/fields and forgot to update the binding to the sanitized value?
To be secure by default, you want to ensure that any such bindings are disallowed unless you can
determine that something explicitly says it's safe to use a value for binding in that
context. You can then audit your code (a simple grep would do) to ensure that this is only done
for those values that you can easily tell are safe - because they were received from your server,
sanitized by your library, etc. You can organize your codebase to help with this - perhaps
allowing only the files in a specific directory to do this. Ensuring that the internal API
exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.
In the case of AngularJS' SCE service, one uses $sce.trustAs (and
shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that
will be accepted by SCE / privileged contexts.
In privileged contexts, directives and code will bind to the result of
$sce.getTrusted(context, value) rather than to the value directly.
Directives use $sce.parseAs rather than $parse to watch attribute
bindings, which performs the $sce.getTrusted behind the scenes on
non-constant literals.
As an example, ngBindHtmlUnsafe uses $sce.parseAsHtml(binding
expression). Here's the actual code (slightly simplified):
var ngBindHtmlUnsafeDirective = ['$sce', function($sce) {
return function(scope, element, attr) {
scope.$watch($sce.parseAsHtml(attr.ngBindHtmlUnsafe), function(value) {
element.html(value || '');
});
};
}];
Impact on loading templates
---------------------------
This applies both to the ng-include directive as well as templateUrl's
specified by directives.
By default, Angular only loads templates from the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on the template URL. To load templates from
other domains and/or protocols, you may either either whitelist them or
wrap it into a trusted value.
*Please note*:
The browser's Same Origin Policy and Cross-Origin Resource Sharing
(CORS) policy apply in addition to this and may further restrict whether
the template is successfully loaded. This means that without the right
CORS policy, loading templates from a different domain won't work on all
browsers. Also, loading templates from file:// URL does not work on
some browsers.
This feels like too much overhead for the developer?
----------------------------------------------------
It's important to remember that SCE only applies to interpolation expressions.
If your expressions are constant literals, they're automatically trusted
and you don't need to call $sce.trustAs on them.
e.g. <div ng-html-bind-unsafe="'<b>implicitly trusted</b>'"></div> just works.
Additionally, a[href] and img[src] automatically sanitize their URLs and
do not pass them through $sce.getTrusted. SCE doesn't play a role here.
The included $sceDelegate comes with sane defaults to allow you to load
templates in ng-include from your application's domain without having to
even know about SCE. It blocks loading templates from other domains or
loading templates over http from an https served document. You can
change these by setting your own custom whitelists and blacklists for
matching such URLs.
This significantly reduces the overhead. It is far easier to pay the
small overhead and have an application that's secure and can be audited
to verify that with much more ease than bolting security onto an
application later.
- corrected terminology about how directives use `require`
- added more variations to the DirectiveDefinitionObject
- removed some slightly superfluous text
docs(directive): Minor correction to example to avoid bad practice
Anchor tags should use `ng-href` instead of `href` for interpolation.
docs(directive): Supplementing DDO description
DDO = Directive Definition Object
Tweak recommended here:
https://github.com/angular/angular.js/pull/2888/files#r4664565
ngScenario expects an ngApp directive to be used, and doesn't work for
manually bootstrapped apps. The failure mode is to hang on navigation.
Trying to make this wont-fix bug less obscure by documenting it.
Eventually Protractor will replace ngScenario and fix this.
Removed repeated "the" in the sentence: The input invalidates itself by turning red when you enter invalid data or leave "the" the input fields blank (Line 137).
The description of the input selector made it seem that you were selecting
an input element based upon it's name attribute. In reality, you are
selecting an element by the string in the ng-model attribute.
jQuery switched to a completely new event binding implementation as of
1.7.0, centering around on/off methods instead of previous bind/unbind.
This patch makes jqLite match this implementation while still supporting
previous bind/unbind methods.
NodeJS on Windows uses back slashes for path separators. This
difference can be mitigated by use of the nodeJS path library.
In particular the `sep` property and the `dirname()`, `normalize()`
and `join()` methods of this library. All path based arguments on
exported functions need to be normalized and `join` and `sep` must
be used instead of string manipulation to work with paths.
$route, $routeParams and ngView have been pulled from core angular.js
to angular-route.js/ngRoute module.
This is was done to in order keep the core focused on most commonly
used functionality and allow community routers to be freely used
instead of $route service.
There is no need to panic, angular-route will keep on being supported
by the angular team.
Note: I'm intentionally not fixing tutorial links. Tutorial will need
bigger changes and those should be done when we update tutorial to
1.2.
BREAKING CHANGE: applications that use $route will now need to load
angular-route.js file and define dependency on ngRoute module.
Before:
```
...
<script src="angular.js"></script>
...
var myApp = angular.module('myApp', ['someOtherModule']);
...
```
After:
```
...
<script src="angular.js"></script>
<script src="angular-route.js"></script>
...
var myApp = angular.module('myApp', ['ngRoute', 'someOtherModule']);
...
```
Closes#2804
Before the Develop drop down menu items were hard coded with an absolute url,
which meant that they did not work correctly on local or ci server builds.
element(selector, label).query(fn) is a very useful function, yet barely
explained. The developer guide should show how this function can be used
to conditionally execute behavior and assertions.
When you are watching the $location.path(), it has to be wrapped in a
function since it is not attached to the scope and if you pass a string
to $scope.$watch it is evaluated against the $scope.
BREAKING CHANGE: css classes foo-setup/foo-start become foo/foo-active
The CSS transition classes have changed suffixes. To migrate rename
.foo-setup {...} to .foo {...}
.foo-start {...} to .foo-active {...}
or for type: enter, leave, move, show, hide
.foo-type-setup {...} to .foo-type {...}
.foo-type-start {...} to .foo-type-active {...}
In the example with draggable, the mouseDown handler needs to start with an event.preventDefault(). Otherwise the following bug occurs:
1) Select the text of the draggable span by clicking outside the span and dragging the mouse to the left or right through the span. Release the mouse button.
2) Now click on the span's inner text, and start to Drag it. The browser's default functionality that drags highlighted text so that it can be pasted into something else (say a document in a text editor) is invoked.
3) Release the mouse button. Now suddenly, you'll be dragging the span. But you won't be able to place it down on the page. It'll just follow the mouse around until the page is refreshed.
Closes: #2465
Note that without this fix, if you add a second draggable element, the
two instances clobber each other since there is only one set of
startx/starty/x/y variables.
Here is an example: http://plnkr.co/edit/aGrLXcIo2SuaePuAdfmQ?p=preview.
On the surface it looks like it would be fine because you only have one
mouse but in practice the start position jumps when you start dragging.
Here it is fixed: http://plnkr.co/edit/VuvPasuumtCeiVRisYKQ?p=preview
The documentation says that the input should be red if you enter
invalid values or leave it blank. Because the type="integer" is not
supported this does not happen in practice. This fix changes the
input type to number and adds an ng-pattern to ensure that the number
is an integer.
Replaced instances of 'Testacular' with 'Karma' to reflect name change of test runner.
Replaced instances of 'http://vojtajina.github.com/testacular' with 'http://karma-runner.github.io/' to reflect dedicated page for Karma Test Runner.
Added location of config file needed to start the Karma server. This is still labeled 'testacular.conf.js' and needs file name to be updated in the phone example repo.
Migrates the Angular project from Rake to Grunt.
Benefits:
- Drops Ruby dependency
- Lowers barrier to entry for contributions from JavaScript ninjas
- Simplifies the Angular project setup and build process
- Adopts industry-standard tools specific to JavaScript projects
- Support building angular.js on Windows platform (really?!? why?!?)
BREAKING CHANGE: Rake is completely replaced by Grunt. Below are the deprecated Rake tasks and their Grunt equivalents:
rake --> grunt
rake package --> grunt package
rake init --> N/A
rake clean --> grunt clean
rake concat_scenario --> grunt build:scenario
rake concat --> grunt build
rake concat_scenario --> grunt build:scenario
rake minify --> grunt minify
rake version --> grunt write:version
rake docs --> grunt docs
rake webserver --> grunt webserver
rake test --> grunt test
rake test:unit --> grunt test:unit
rake test:<jqlite|jquery|modules|e2e> --> grunt test:<jqlite|jquery|modules|end2end|e2e>
rake test[Firefox+Safari] --> grunt test --browsers Firefox,Safari
rake test[Safari] --> grunt test --browsers Safari
rake autotest --> grunt autotest
NOTES:
* For convenience grunt test:e2e starts a webserver for you, while grunt test:end2end doesn't.
Use grunt test:end2end if you already have the webserver running.
* Removes duplicate entry for Describe.js in the angularScenario section of angularFiles.js
* Updates docs/src/gen-docs.js to use #done intead of the deprecated #end
* Uses grunt-contrib-connect instead of lib/nodeserver (removed)
* Removes nodeserver.sh, travis now uses grunt webserver
* Built and minified files are identical to Rake's output, with the exception of one less
character for git revisions (using --short) and a couple minor whitespace differences
Closes#199
Sometimes is not desirable to use interpolation on attributes because
the user agent parses them before the interpolation takes place. I.e:
<svg>
<circle cx="{{cx}}" cy="{{cy}}" r="{{r}}"></circle>
</svg>
The snippet throws three browser errors, one for each attribute.
For some attributes, AngularJS fixes that behaviour introducing special
directives like ng-href or ng-src.
This commit is a more general solution that allows prefixing any
attribute with "ng-attr-", "ng:attr:" or "ng_attr_" so it will
be set only when the binding is done. The prefix is then removed.
Example usage:
<svg>
<circle ng-attr-cx="{{cx}}" ng-attr-cy="{{cy}}" ng:attr-r="{{r}}"></circle>
</svg>
Closes#1050Closes#1925
JQLite.ready() used for automatic bootstrapping (when jQuery is not present)
now checks if document already is ready when first called. This simplifies
bootstrapping when the angular script is loaded asynchronously.
However if other scripts with angular app code are being loaded as well
it is developers responsibility to ensure that these scripts are loaded
after angular-loader.js is evaluated and before angular.js script is
evaluated.
If you bind using '=' to a non-existant parent property, the compiler
will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception, which is right
because the model doesn't exist.
This enhancement allow to specify that a binding is optional so it
won't complain if the parent property is not defined. In order to mantain
backward compability, the new behaviour must be specified using '=?' instead
of '='. The local property will be undefined is these cases.
Closes#909Closes#1435
previously we barfed on function type definition with optional arguments
like {function(number=)}
this fixes it
I also added a bunch of code that helps to debug incorrectly parsed docs.
As explained in 'Understanding the Controller Component', Controllers
written for new (post 1.0 RC) versions of Angular need to add methods to
the scope directly, not the function's prototype. Correcting this
example should remove any ambiguity, especially for beginners.
As explained in 'Understanding the Controller Component', Controllers
written for new (post 1.0 RC) versions of Angular need to add methods to
the scope directly, not the function's prototype. Correcting this
example should remove any ambiguity, especially for beginners.
This is a minor edit to allow Plunks created by way of the docs.angularjs.org site to be appropriately tagged as `angularjs`.
Also, make these generated Plunks private by default.
previously examples like $http where broken because we would strip part of the
filename (http-hello.html -> http)
we really want to strip only the id suffix that we append to disambiguate
common filenames (like index.html) which appear in many examples.
So that when running the docs locally, eg. during e2e testing, we use the latest build version of angular, rather than the stable one from CDN.
This fixes e2e tests running with Testacular.
so that we can just edit source files without rebuilding docs.
this works for all docs files, except for those that are generated
or rewritten during build.
Short summary: if you use local node server everything should work as before,
if you use GAE, everything should work now as well, but we pull assets from CDN.
- GAE doesn't support ':' in filenames, so I had to replace it with '_'
but only in the filename, all servers were reconfigured to rewrite the
urls from : to _ when doing file lookup
- We now pull angular assets from google CDN when deployed on GAE (locally
or in production). When running on a non GAE server we pull assets from
../ directory as before
- Since only certain versions of Angular are available on CDN and we want
to be able to autodeploy docs, I had to pin down the Angular files
to a "stable" version when running on GAE
we now have two types of namespaces:
- true namespace: angular.* - used for all global apis
- virtual namespace: ng.*, ngMock.*, ... - used for all DI modules
the virual namespaces have services under the second namespace level (e.g. ng.)
and filters and directives prefixed with filter: and directive: respectively
(e.g. ng.filter:orderBy, ng.directive:ngRepeat)
this simplifies urls and makes them a lot shorter while still avoiding name collisions
Changed the isolate scope binding options to:
- @attr - attribute binding (including interpolation)
- =model - by-directional model binding
- &expr - expression execution binding
This change simplifies the terminology as well as
number of choices available to the developer. It
also supports local name aliasing from the parent.
BREAKING CHANGE: isolate scope bindings definition has changed and
the inject option for the directive controller injection was removed.
To migrate the code follow the example below:
Before:
scope: {
myAttr: 'attribute',
myBind: 'bind',
myExpression: 'expression',
myEval: 'evaluate',
myAccessor: 'accessor'
}
After:
scope: {
myAttr: '@',
myBind: '@',
myExpression: '&',
// myEval - usually not useful, but in cases where the expression is assignable, you can use '='
myAccessor: '=' // in directive's template change myAccessor() to myAccessor
}
The removed `inject` wasn't generaly useful for directives so there should be no code using it.
previously we were doing all kinds of checks to see if we should rewrite the url or not and we
were missing many scenarios. not any more.
with this change, we rewrite the url unless:
- the href is not set
- link has target attribute
- the absolute url of the link doesn't match the absolute prefix for all urls in our app
This also means that ng-ext-link attribute which we previously used to distinguish external
links from app links is not necessary any more. apps can just set target=_self to prevent
rewriting.
BREAKING CHANGE: ng-ext-link directive was removed because it's unnecessary
apps that relied on ng-ext-link should simply replace it with target=_self
Create build for other modules as well (ngResource, ngCookies):
- wrap into a function
- add license
- add version
Breaks `$sanitize` service, `ngBindHtml` directive and `linky` filter were moved to the `ngSanitize` module. Apps that depend on any of these will need to load `angular-sanitize.js` and include `ngSanitize` in their dependency list: `var myApp = angular.module('myApp', ['ngSanitize']);`
It turns out that listening only on "blur" event is not sufficient in many scenarios,
especially when you use form validation you always had to use ngModelnstant
e.g. if you want to disable a button based on valid/invalid form.
The feedback we got from our apps as well as external apps is that the
ngModelInstant should be the default.
In the future we might provide alternative ways of suppressing updates
on each key stroke, but it's not going to be the default behavior.
Apps already using the ngModelInstant can safely remove it from their
templates. Input fields without ngModelInstant directive will start propagating
the input changes into the model on each key stroke.
So that we can have non string values, e.g. ng-value="true" for radio inputs
Breaks boolean attrs are evaluated rather than interpolated
To migrate your code, change: <input ng-disabled="{{someBooleanVariable}}">
to: <input ng-disabled="someBooleanVariabla">
Affected directives:
* ng-multiple
* ng-selected
* ng-checked
* ng-disabled
* ng-readonly
* ng-required
this is to enable nicer tests:
describe('fooSvc', function() {
var fooSvc;
beforeEach(inject(function(_fooSvc_) {
fooSvc = _fooSvc_;
}));
it('should do this thing', function() {
//test fooSvc
});
});
- $locationProvider.html5Mode
- $locationProvider.hashPrefix
Docs example is basically a different application on the same page, but we don't want to instantiate multiple instances of $browser or $location service, so we are overriding these providers to return the instances from parent app.
Overriding the service with $provide.value caused a provider to be auto-generated without the necessary hashPrefix and html5Mode apis.
- remove $formFactory completely
- remove parallel scope hierarchy (forms, widgets)
- use new compiler features (widgets, forms are controllers)
- any directive can add formatter/parser (validators, convertors)
Breaks no custom input types
Breaks removed integer input type
Breaks remove list input type (ng-list directive instead)
Breaks inputs bind only blur event by default (added ng:bind-change directive)
