angular / angular.js

AngularJS - HTML enhanced for web apps!

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.

It also helps with server-side communication, taming async callbacks with promises and deferred objects, and it makes client-side navigation and deep linking with hashbang urls or HTML5 pushState a piece of cake. Best of all? It makes development fun!

---

AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement.

Visit angular.io for the actively supported Angular.

---

• Web site: https://angularjs.org
• Tutorial: https://docs.angularjs.org/tutorial
• API Docs: https://docs.angularjs.org/api
• Developer Guide: https://docs.angularjs.org/guide
• Contribution guidelines: CONTRIBUTING.md
• Core Development: DEVELOPERS.md
• Dashboard: https://dashboard.angularjs.org

Documentation

Go to https://docs.angularjs.org

Contribute

We've set up a separate document for our contribution guidelines.

Develop

We've set up a separate document for developers.

What to use AngularJS for and when to use it

AngularJS is the next generation framework where each component is designed to work with every other component in an interconnected way like a well-oiled machine. AngularJS is JavaScript MVC made easy and done right. (Well it is not really MVC, read on, to understand what this means.)

MVC, no, MV* done the right way!

MVC, short for Model-View-Controller, is a design pattern, i.e. how the code should be organized and how the different parts of an application separated for proper readability and debugging. Model is the data and the database. View is the user interface and what the user sees. Controller is the main link between Model and View. These are the three pillars of major programming frameworks present on the market today. On the other hand AngularJS works on MV*, short for Model-View-Whatever. The Whatever is AngularJS's way of telling that you may create any kind of linking between the Model and the View here.

Unlike other frameworks in any programming language, where MVC, the three separate components, each one has to be written and then connected by the programmer, AngularJS helps the programmer by asking him/her to just create these and everything else will be taken care of by AngularJS.

Interconnection with HTML at the root level

AngularJS uses HTML to define the user's interface. AngularJS also enables the programmer to write new HTML tags (AngularJS Directives) and increase the readability and understandability of the HTML code. Directives are AngularJS’s way of bringing additional functionality to HTML. Directives achieve this by enabling us to invent our own HTML elements. This also helps in making the code DRY (Don't Repeat Yourself), which means once created, a new directive can be used anywhere within the application.

HTML is also used to determine the wiring of the app. Special attributes in the HTML determine where 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 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 directly on it and loop over objects and arrays at will.

Two-way Data Binding

One of AngularJS's strongest features. Two-way Data Binding means that if something changes in the Model, the change gets reflected in the View instantaneously, and the same happens the other way around. This is also referred to as Reactive Programming, i.e. suppose a = b + c is being programmed and after this, if the value of b and/or c is changed then the value of a will be automatically updated to reflect the change. AngularJS uses its "scopes" as a glue between the Model and View and makes these updates in one available for the other.

Less Written Code and Easily Maintainable Code

Everything in AngularJS is created to enable the programmer to end up writing less code that is easily maintainable and readable by any other new person on the team. Believe it or not, one can write a complete working two-way data binded application in less than 10 lines of code. Try and see for yourself!

Testing Ready

AngularJS has Dependency Injection, i.e. it takes care of providing all the necessary dependencies to its controllers and services whenever required. This helps in making the AngularJS code ready for unit testing by making use of mock dependencies created and injected. This makes AngularJS more modular and easily testable thus in turn helping a team create more robust applications.

angular.js's Issues

Add DSL to retrieve current URL

Currently, there is no way to find out the current URL on an end-to-end test.

Elliot's draft on this feature:
angular.scenario.dsl('applicationUrl', function() {
return function() {
this.addFutureAction('get application url', function($window, $document, done) {
done(null, $window.location.href);
});
};
});

expect(applicationUrl()).toEqual('...')

inline CSS and images into the JS

How to inline images in IE6/7?
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

prevent infinite recursion in compiler

the ng:comipled flag is a common paradigm which should not be needed, as it is a common problem when delay compiling code.

http://github.com/angular/angular.js/blob/master/src/widgets.js#L247

Use LABjs for bootstrap script loading

http://labjs.com/documentation.php

support ng:dbl-click

Allow functions in $orderBy method

Allow nesting of controllers to be defined in $route

Requirements

• Have controller define associated template, decide what child controllers to create
• More control over creation of child controllers
• Better testability

Debug "dump" filter

We should create dump filter for displaying variables.
This filter should be able to dump even window or document object...

Update jasmine

We should consider updating jasmine, as there are some new methods for mocking (spying)...
http://pivotal.github.com/jasmine/release-notes.html
(we are still using 0.10.3)

HTMLSanitize filter

HTML like filter which is script injection safe. See if we can reuse the implementation from here: http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer

fromJson fails if string contains quotes

there are two issues:

1/ failure to parse string with escaped double quote ("), e.g. "

20:46:29:659: Lexer Error: Unexpected next character ["asdfasdf""}]] in expression '[{"at":1287891981735,"msg":"what?"},{"at":1287891984055,"msg":"lala"},{"at":1287891988278,"msg":"haha"asdfasdf""}]' at column '102.00000000000003'.

2/ failure to parse string with single quote ('), e.g. {"at":1287875160522,"msg":"what's up?"}

20:45:00:634: Lexer Error: Unterminated quote ['s up?"}]] starting at column '72.00000000000003' in expression '[{"at":1287875144138,"msg":"ate lunch"},{"at":1287875160522,"msg":"what's up?"}]'.

HTML filter should be safe and we should have unsafeHTML filter

URL_MATCHER should match url with missing f-slash at the end

Current behavior:
http://www.angularjs.org/ -> host=www.angularjs.org

!!! http://www.angularjs.org -> host=www.angularjs.or

!!! http://www.angularjs.org#xx -> host=www.angularjs.or

We should add tests for URL_MATCHER, it's bad idea to test it through $location service (with scope, etc...)

ng:bind going to undefined does not reset the doom to blank

linky has security issue as it uses unsafeHTML filter

1. The linky filter (http://angularjs.org/Filter:linky) is vulnerable to XSS, http://www.google.com/<script>location=name</script>/

angular.fromJson not safe

As mentioned before, the use of the Parser to serialize JSON is not safe. The following code will execute:

angular.fromJson("{'res':([1,2,3]['constructor']'constructor'())}").res

If the JSON string happened to be user-supplied it would execute code. An approach similar to json.org should be used.

<ng:include scope="this"/> causes infinity recursion

Date validator allows 41/1/2009

41/1/2009 is not a valid date, but the validator let it pass.

See
http://angularjs.org/Validator:date

to reproduce the bug.

Update $xhr service

Based on in-line discussion from http://github.com/angular/angular.js/pull/75

• parse response to json if content-type is json
• browser must provide more information (at least content type)
• parse response to json if uri path extension is .json ?
• allow handling other statuses than 200 ?

use new Function instead of eval

in the getterFn method I see the following line:
fn = eval('fn = ' + code);
I think it would be better if it was
fn = new Function(code,'key');

Filter.date - two tests fail (probably because of different timezone)

Total 496 tests (Passed: 494; Fails: 2; Errors: 0) (1313.00 ms)
Firefox 3.6.11 Mac OS: Run 496 tests (Passed: 494; Fails: 2; Errors 0) (1313.00 ms)
filter date.test that it should accept format failed (3.00 ms): Expected '2010-9-4 12=0:5:8am0700' to equal '2010-9-3 12=0:5:8am0700'.
([object Object])@http://localhost:9876/test/lib/jasmine-jstd-adapter/JasmineAdapter.js:102
([object Object])@http://localhost:9876/test/lib/jasmine-1.0.1/jasmine.js:1909
("2010-9-3 12=0:5:8am0700")@http://localhost:9876/test/lib/jasmine-1.0.1/jasmine.js:1145
()@http://localhost:9876/test/test/FiltersSpec.js:115
()@http://localhost:9876/test/lib/jasmine-jstd-adapter/JasmineAdapter.js:70

filter date.test that it should accept miliseconds as date failed (3.00 ms): Expected '1970' to equal '1969'.
  ([object Object])@http://localhost:9876/test/lib/jasmine-jstd-adapter/JasmineAdapter.js:102
  ([object Object])@http://localhost:9876/test/lib/jasmine-1.0.1/jasmine.js:1909
  ("1969")@http://localhost:9876/test/lib/jasmine-1.0.1/jasmine.js:1145
  ()@http://localhost:9876/test/test/FiltersSpec.js:126
  ()@http://localhost:9876/test/lib/jasmine-jstd-adapter/JasmineAdapter.js:70

element() DSL should have methods text() and html()

expect(element('ul li').text()).toEqual('some text')
expect(element('ul li').html()).toEqual('<b>some text</b>)

ng:click and friends don't propagate errors that occur in angular expressions

example:

<a href ng:click="doesntexist()">click here</a>

will just happily ignore the error in the expressions and not do anything, this is really bad when developer makes a typo on the expression.

infinite loop when location hash is set to empty

in any angular app open the main html and append # to it in the address bar and open the page. e.g. file://..../example/temp.html#

the browser will keep on reloading the page like crazy.

No routes definition or onChange handlers are needed for this to be reproducible. Affects all browsers.

Add element().text() to e2e DSL

The only way to retrieve the text of an element at the moment is by using .query(), which is overly complex for such a simple operation.

.text() should return the trimmed text of the element.

input fields need to let evals run before the run so that they can be data bound

Example of the problem:

Example: http://gist.github.com/587658
Example: http://gist.github.com/550405

Repeater inside select should notify when content changes.

http://gist.github.com/648351

Have a date format filter

use new Function instead of eval

in the getterFn method I see the following line:
fn = eval('fn = ' + code);
I think it would be better if it was
fn = new Function(code,'key');

readString consumes invalid escapes

readString consumes invalid escapes:

     string += String.fromCharCode(parseInt(hex, 16));

hex is not verified to be a valid string, the parser should throw an error the following string ({"x":["\u1","Secret"]})

JQLite - bug

There is a gist with error code: http://gist.github.com/622956
this[0].parentNode is null [jgLite.js, line 155]
http://github.com/angular/angular.js/blob/master/src/jqLite.js#L155

With jQuery, it works fine.

use new Function instead of eval

in the getterFn method I see the following line:
fn = eval('fn = ' + code);
I think it would be better if it was
fn = new Function(code,'key');

angular.service should preserve $ properties on override

ex.

angular.service('my', function() { return old; }, {$creation: 'eager-published'});
angular.service('my', function() { return new; }); // should still have $creation of eager-published

rewrite $sessionStore for better compression

allow ng:controller nesting

create a new scope for each ng:controller instance so that we can nest controllers on the same page.

Create a build target that will create the complete distribution of files

the target should create an archive (zip?) that will contain:

• concatinated source
• minified source
• mocks file
• scenario runner file
• all css and other resources

Change the $location.parse to take an object which copies values to $location and then runs parse()

Upgrade the whitelist in sanitizer to html 5

http://simon.html5.org/html5-elements

Scenario runner should print line# for steps

instead of:

585ms navigate to ../personalLog.html
15ms input 'newMsg' enter 'my first message'
51ms element form input[type="submit"] click
4ms repeater ul li count
4ms expect repeater ul li count toEqual 1


I'd like to see line numbers from my spec file next to each (or at least next to each failing) step like this:

585ms #20 navigate to ../personalLog.html 15ms #34 input 'newMsg' enter 'my first message' 51ms #35 element form input[type="submit"] click 4ms #37 repeater ul li count 4ms #38 expect repeater ul li count toEqual 1

This would allow me to locate failing steps a lot faster than now when I have to compare strings in the runner with code in the spec.

angular.copy of Date fails

XHR cache doesn't release callbacks for inflight requests if response !== 200

$location needs method you call on updates, properties should be treated as read only

• $location.update('/Hash/25/Path/26'); // just the path
• $location.update({param1: 'A', param2: 'B'}); // just the query string
• $location.update('/Hash/25/Path/26', {param1: 'A', param2: 'B'}); // both

Per discussion parse() could be updated to do that, but "parse" is not a very clear name for what a developer is attempting to do.

"update" or "navigate" would both be much more clear.

$init and $deinit for controller life cycle

Requirements

• Async callbacks
• $deinit needs some way to veto a navigate (hard problem) to prevent losing form values

handle proper namespaces

key of http://angularjs.org rather then 'ng:'

remove $init after linking phase

An iit() inside a ddescribe() should run only the iit() inside it not all it's

ddescribe(..., function() {
iit() // only this one
it() // not this one
});

use new Function instead of eval

in the getterFn method I see the following line:
fn = eval('fn = ' + code);
I think it would be better if it was
fn = new Function(code,'key');

toJson should not hide non-angular properties starting with $

See http://groups.google.com/group/angular/browse_thread/thread/9d56d78705274f76?hl=en

refactor $browser to have a poll method

angular.foreach should be angular.forEach

given that most of the other methods (all the other methods?) are camelcased, having foreach lowercased is really annoying.