Questions tagged [angularjs]

Use for questions about AngularJS (1.x), the open-source JavaScript framework. Do NOT use this tag for Angular 2 or later versions; instead, use the [angular] tag.

AngularJS is an open-source JavaScript framework for building CRUD-centric Ajax-style web applications. Its goal is to shim the browser to augment the HTML vocabulary with directives useful for building dynamic web applications.

AngularJS ships with directives which add two-way data binding, DOM control and unrolling, code-behind DOM, form validation, and deep linking.

Initially released in 2009, AngularJS was developed and maintained by Google, and is used internally by Google in 1600+ applications.

Note: AngularJS refers to all 1.x versions of the framework, while Version 2 and higher are referred to now as "Angular" (see It's just Angular). The [tag: angular] tag should only be used for questions pertaining to versions 2 and higher.

AngularJS's Philosophy

  • Encourages developers to create their own directives, turning the HTML into a DSL suited to building their kind of application. The result significantly reduces the amount and complexity of JavaScript needed to build web applications.
  • UI is best described in the declarative form (HTML), and that behavior is best described in an imperative form (JavaScript) and that the two should never meet.
  • Encourages developers to design their client architecture using advanced software principles like dependency injection (DI), separation of concerns (SoC), testability, and a file structure.

Notable features

  • Teach your browser new tricks by adding behavior to HTML tags/attributes
  • Controllers provide code-behind DOM with clear separation from the view
  • Two-way data binding without the need to extend or wrap the model objects
  • Dependency injection assembles the application without 'main' method
  • Promises/futures remove many callbacks from code when communicating with the server
  • Directives
  • Views and routes
  • Filters
  • Form validation
  • Strong focus on testability
  • Extend HTML with your own behavior
  • Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them

Versions

Notable AngularJS versions, code names, and release dates include:

Version Code Name Release Date
AngularJS 1.0.0 temporal-domination June 6, 2012
AngularJS 1.1.0 increase-gravatas August 31, 2012
AngularJS 1.2.0 timely-delivery November 8, 2013
AngularJS 1.3.0 superluminal-nudge October 13, 2014
AngularJS 1.4.0 jaracimrman-existence May 26, 2015
AngularJS 1.5.0 ennoblement-facilitation February 5, 2016
AngularJS 1.6.0 rainbow-tsunami December 8, 2016
AngularJS 1.7.0 nonexistent-physiology May 11, 2018
AngularJS 1.8.0 nested-vaccination June 01, 2020

Latest Stable Version:

Version Code Name Release Date
AngularJS 1.8.2 meteoric-mining October 21, 2020

Actively developed Version:

AngularJS v1.8.x  

For code names, release dates and notes visit the GitHub changelog. To see the latest announcements and AngularJS discussions, visit the official Angular Blog or AngularJS on Gitter

Bits

Community

Asking a question

  • Mention which version of AngularJS you're using
  • Reduce your issue to a small example
  • Explain the behavior you experienced and its difference from your expectations
  • Post a reduced working code on plnkr.co or jsfiddle.net
  • Don't know how? Clone one of these existing jsFiddles

Getting Started

Style Guides

AngularJS UI Libraries

Debugging

Testing

Recent

2014

2013

2012

2011

2010

Video Tutorials

Who is using

Developed by Google

262787 questions
536
votes
6 answers

Link vs compile vs controller

When you create a directive, you can put code into the compiler, the link function or the controller. In the docs, they explain that: compile and link function are used in different phases of the angular cycle controllers are shared between…
schacki
  • 9,401
  • 5
  • 29
  • 32
536
votes
21 answers

How can I post data as form data instead of a request payload?

In the code below, the AngularJS $http method calls the URL, and submits the xsrf object as a "Request Payload" (as described in the Chrome debugger network tab). The jQuery $.ajax method does the same call, but submits xsrf as "Form Data". How can…
mjibson
  • 16,852
  • 8
  • 31
  • 42
528
votes
10 answers

What is the difference between Polymer elements and AngularJS directives?

On the Polymer Getting Started page, we see an example of Polymer in action:
Dan Kanze
  • 18,485
  • 28
  • 81
  • 134
505
votes
6 answers

Complex nesting of partials and templates

My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application. The best way to describe my situation is with an image I created: As you can see this has the potential to be a…
PhillipKregg
  • 9,358
  • 8
  • 49
  • 63
498
votes
12 answers

ng-repeat :filter by single field

I have an array of products that I'm repeating over using ng-repeat and am using
to filter these products by colour. The filter is working but if the product name / description etc contains…
Tim Webster
  • 9,158
  • 8
  • 27
  • 30
496
votes
11 answers

Redirecting to a certain route based on condition

I'm writing a small AngularJS app that has a login view and a main view, configured like so: $routeProvider .when('/main' , {templateUrl: 'partials/main.html', controller: MainController}) .when('/login', {templateUrl: 'partials/login.html',…
st.never
  • 11,723
  • 4
  • 20
  • 21
488
votes
10 answers

Angular ng-repeat Error "Duplicates in a repeater are not allowed."

I am defining a custom filter like so:
....
As you can see the…
Dine
  • 7,223
  • 8
  • 25
  • 35
486
votes
10 answers

AngularJS : Initialize service with asynchronous data

I have an AngularJS service that I want to initialize with some asynchronous data. Something like this: myModule.service('MyService', function($http) { var myData = null; $http.get('data.json').success(function (data) { myData =…
testing123
  • 11,367
  • 10
  • 47
  • 61
475
votes
19 answers

What's the correct way to communicate between controllers in AngularJS?

What's the correct way to communicate between controllers? I'm currently using a horrible fudge involving window: function StockSubgroupCtrl($scope, $http) { $scope.subgroups = []; $scope.handleSubgroupsLoaded = function(data, status) { …
fadedbee
  • 42,671
  • 44
  • 178
  • 308
457
votes
11 answers

Watch multiple $scope attributes

Is there a way to subscribe to events on multiple objects using $watch E.g. $scope.$watch('item1, item2', function () { });
Greg
  • 31,180
  • 18
  • 65
  • 85
455
votes
7 answers

Working with select using AngularJS's ng-options

I have read about it in other posts, but I couldn't figure it out. I have an array, $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York'}, {ID: '000003', Title: 'Washington'}, ]; I want to render it…
Andrej Kaurin
  • 11,592
  • 13
  • 46
  • 54
454
votes
8 answers

Angular directives - when and how to use compile, controller, pre-link and post-link

When writing an Angular directive, one can use any of the following functions to manipulate the DOM behaviour, contents and look of the element on which the directive is declared: compile controller pre-link post-link There seem to be some…
Izhaki
  • 23,372
  • 9
  • 69
  • 107
452
votes
8 answers

How to display length of filtered ng-repeat data

I have a data array which contains many objects (JSON format). The following can be assumed as the contents of this array: var data = [ { "name": "Jim", "age" : 25 }, { "name": "Jerry", "age": 27 } ]; Now, I display these…
user109187
  • 5,265
  • 7
  • 22
  • 25
451
votes
5 answers

AngularJS ng-click stopPropagation

I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired. Here is my code.
michael_knight
  • 4,921
  • 3
  • 17
  • 10
450
votes
18 answers

AngularJS 1.2 $injector:modulerr

When using angular 1.2 instead of 1.07 the following piece of code is not valid anymore, why? 'use strict'; var app = angular.module('myapp', []); app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)…
shoen
  • 11,845
  • 4
  • 22
  • 27