AngularJS

dashboard all topics

Getting started with AngularJS Introduction Topic

Title

Improvements requested by Liron Ilayev, Ram Singh:

This topic would benefit from examples that don't currently exist. - Oct 15 at 5:13
Each code snippet should have fiddle so that person can check the things working

add a comment
This topic would benefit from additional syntax notation, explanation of parameters, or remarks. - Oct 18 at 8:47
Usually a fiddle isn't such a good idea, but for a "getting started" doc., especially with angular where you import the scripts in the index.html, a fiddle can actually help. So, the request is code snippets linked to a working online editor.
1. Shouldn't this be "Getting started with AngularJS 1.x" since it would confuse newbies with 1.x and 2.0 as they might mix it up?
  
  – tanmay Nov 4 at 2:42
add a comment

Edit Topic

This draft deletes the entire topic.

expand all collapse all

Examples

83
Getting Started
edit move example delete share
83
Create a new HTML file and paste the following content:

<!DOCTYPE html> <html ng-app> <head> <title>Hello, Angular</title> <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script> </head> <body ng-init="name='World'"> <label>Name</label> <input ng-model="name" /> <span>Hello, {{ name }}!</span> <p ng-bind="name"></p> </body> </html>

Live demo

When you open the file with a browser, you will see an input field followed by the text Hello, World!. Editing the value in the input will update the text in real-time, without the need to refresh the whole page.

Explanation:

Load the Angular framework from a Content Delivery Network.

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

Define the HTML document as an Angular application with the ng-app directive

<html ng-app>

Initialize the name variable using ng-init

<body ng-init=" name = 'World' ">

Note that ng-init should be used for demonstrative and testing purposes only. When building an actual application, controllers should initialize the data.

Bind data from the model to the view on HTML controls. Bind an <input> to the name property with ng-model

<input ng-model="name" />

Display content from the model using double braces {{ }}

<span>Hello, {{ name }}</span>

Another way of binding the name property is using ng-bind instead of handlebars"{{ }}"

<span ng-bind="name"></span>

The last three steps establish the two way data-binding. Changes made to the input update the model, which is reflected in the view.

There is a difference between using handlebars and ng-bind. If you use handlebars, you might see the actual Hello, {{name}} as the page loads before the expression is resolved (before the data is loaded) whereas if you use ng-bind, it will only show the data when the name is resolved. As an alternative the directive ng-cloak can be used to prevent handlebars to display before it is compiled.
edited Oct 29 at 17:57

+17
16
Showcasing all common Angular constructs
edit move example delete share
16
The following example shows common AngularJS constructs in one file:

<!DOCTYPE html> <html ng-app="myDemoApp"> <head> <style>.started { background: gold; }</style> <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script> <script> function MyDataService() { return { getWorlds: function getWorlds() { return ["this world", "another world"]; } }; } function DemoController(worldsService) { var vm = this; vm.messages = worldsService.getWorlds().map(function(w) { return "Hello, " + w + "!"; }); } function startup($rootScope, $window) { $window.alert("Hello, user! Loading worlds..."); $rootScope.hasStarted = true; } angular.module("myDemoApp", [/* module dependencies go here */]) .service("worldsService", [MyDataService]) .controller("demoController", ["worldsService", DemoController]) .config(function() { console.log('configuring application'); }) .run(["$rootScope", "$window", startup]); </script> </head> <body ng-class="{ 'started': hasStarted }" ng-cloak> <div ng-controller="demoController as vm"> <ul> <li ng-repeat="msg in vm.messages">{{ msg }}</li> </ul> </div> </body> </html>

Each example from the file is explained below:

Live Demo

ng-app="myDemoApp", the ngApp directive that bootstraps the application and tells angular that a DOM element is controlled by a specific angular.module named "myDemoApp";

<script src="angular.min.js"> is the first step in bootstrapping the AngularJS library;

Three functions (MyDataService, DemoController, and startup) are declared, which are used (and explained) below.

angular.module(...) used with an array as the second argument creates a new module. This array is used to supply a list of module dependencies. In this example we chain calls on the result of the module(...) function;

.service(...) creates an Angular Service and returns the module for chaining;

.controller(...) creates an Angular Controller and returns the module for chaining;

.config(...) Use this method to register work which needs to be performed on module loading.

.run(...) makes sure code is run at startup time and takes an array of items as a parameter. Use this method to register work which should be performed when the injector is done loading all modules.

the first item is letting Angular know that the startup function requires the built-in $rootScope service to be injected as an argument;

the second item is letting Angular know that the startup function requires the built-in $window service to be injected as an argument;

the last item in the array, startup, is the actual function to run on startup;

ng-class is the ngClass directive to set a dynamic class, and in this example utilizes hasStarted on the $rootScope dynamically

ng-cloak is a directive to prevent the unrendered Angular html template (e.g. "{{ msg }}") to be briefly shown before Angular has fully loaded the application.

ng-controller is the directive that asks Angular to instantiate a new controller of specific name to orchestrate that part of the DOM;

ng-repeat is the directive to make Angular iterate over a collection and clone a DOM template for each item;

{{ msg }} showcases interpolation: on-the-spot rendering of a part of the scope or controller;
edited Oct 26 at 19:36

+5
7
The importance of scope
edit move example delete share
7
As Angular uses HTML to extend a web page and plain Javascript to add logic, it makes it easy to create a web page using ng-app, ng-controller and some built-in directives such as ng-if, ng-repeat, etc. With the new controllerAs syntax, newcomers to Angular users can attach functions and data to their controller instead of using $scope.

However, sooner or later, it is important to understand what exactly this $scope thing is. It will keep showing up in examples so it is important to have some understanding.

The good news is that it is a simple yet powerful concept.

When you create the following:

<div ng-app="myApp"> <h1>Hello {{ name }}</h1> </div>

Where does name live?

The answer is that Angular creates a $rootScope object. This is simply a regular Javascript object and so name is a property on the $rootScope object:

angular.module("myApp", []) .run(function($rootScope) { $rootScope.name = "World!"; });

And just as with global scope in Javascript, it's usually not such a good idea to add items to the global scope or $rootScope.

Of course, most of the time, we create a controller and put our required functionality into that controller. But when we create a controller, Angular does it's magic and creates a $scope object for that controller. This is sometimes referred to as the local scope.

So, creating the following controller:

<div ng-app="myApp"> <div ng-controller="MyController"> <h1>Hello {{ name }}</h1> </div> </div>

would allow the local scope to be accessible via the $scope parameter.

angular.module("myApp", []) .controller("MyController", function($scope) { $scope.name = "Mr Local!"; });

A controller without a $scope parameter may simply not need it for some reason. But it is important to realize that, even with controllerAs syntax, the local scope exists.

As $scope is a JavaScript object, Angular magically sets it up to prototypically inherit from $rootScope. And as you can imagine, there can be a chain of scopes. For example, you could create a model in a parent controller and attach to it to the parent controller's scope as $scope.model.

Then via the prototype chain, a child controller could access that same model locally with $scope.model.

None of this is initially evident, as it's just Angular doing its magic in the background. But understanding $scope is an important step in getting to know how Angular works.
edited Sep 13 at 7:26
0
Minification in Angular
edit move example delete share
0
var myApp = angular.module('myApp', ['ngResource']); myApp.controller('mainController', ['$scope','$log','$resource' , function($scope,$log,$resource) { //code here }]);

now you see when initializing a controller the parameters are -controller name -an array

this array has all the service names, in this case '$scope','$log','$resource' as parameter and the last parameter is the same old function which takes as parameter $scope,$log,$resource (IN THE SAME ORDER)

Now when you use minification the parameters name remain the same hence the code still works
created Sep 12 at 9:25
0
The Simplest Possible Angular Hello World.
edit move example delete share
0
Angular 1 is at heart a DOM compiler. We can pass it HTML, either as a template or just as a regular web page, and then have it compile an app.

We can tell Angular to treat a region of the page as an expression using the {{ }} handlebars style syntax. Anything between the curly braces will be compiled, like so:

{{ 'Hello' + 'World' }}

This will output:

HelloWorld

ng-app

We tell Angular which portion of our DOM to treat as the master template using the ng-app directive. A directive is a custom attribute or element that the Angular template compiler knows how to deal with. Let's add an ng-app directive now:

<html> <head> <script src="/angular.js"></script> </head> <body ng-app> {{ 'Hello' + 'World' }} </body> </html>

I've now told the body element to be the root template. Anything in it will be compiled.

Directives

Directives are compiler directives. They extend the capabilities of the Angular DOM compiler. This is why Misko, the creator of Angular, describes Angular as:

"What a web browser would have been had it been built for web applications.

We literally create new HTML attributes and elements, and have Angular compile them into an app. ng-app is a directive that simply turns on the compiler. Other directives include:

ng-click, which adds a click handler,

ng-hide, which conditionally hides an element, and

<form>, which adds additional behaviour to a standard HTML form element.

Angular comes with around 100 built-in directives which allow you to accomplish most common tasks. We can also write our own, and these will be treated in the same way as the built in directives.

We build an Angular app out of a series of directives, wired together with HTML.
created Sep 12 at 7:56

+ Add Example

Please consider making a request to improve this example.

Request Improvement

Remarks

AngularJS is a web application framework designed to simplify rich client-side application development. This documentation is for Angular 1.x, the predecessor of the more modern Angular 2.

Versions

Version	Release Date
1.5.8	2016-07-22
1.2.30	2016-07-21
1.5.7	2016-06-15
1.4.12	2016-06-15
1.5.6	2016-05-27
1.4.11	2016-05-27
1.5.5	2016-04-18
1.5.4	2016-04-14
1.5.3	2016-03-25
1.5.2	2016-03-19
1.4.10	2016-03-16
1.5.1	2016-03-16
1.5.0	2016-02-05
1.5.0-rc.2	2016-01-28
1.4.9	2016-01-21
1.5.0-rc.1	2016-01-16
1.5.0-rc.0	2015-12-09
1.4.8	2015-11-20
1.5.0-beta.2	2015-11-18
1.4.7	2015-09-30
1.3.20	2015-09-30
1.2.29	2015-09-30
1.5.0-beta.1	2015-09-30
1.5.0-beta.0	2015-09-17
1.4.6	2015-09-17
1.3.19	2015-09-17
1.4.5	2015-08-28
1.3.18	2015-08-19
1.4.4	2015-08-13
1.4.3	2015-07-15
1.3.17	2015-07-07
1.4.2	2015-07-07
1.4.1	2015-06-16
1.3.16	2015-06-06
1.4.0	2015-05-27
1.4.0-rc.2	2015-05-12
1.4.0-rc.1	2015-04-24
1.4.0-rc.0	2015-04-10
1.3.15	2015-03-17
1.4.0-beta.6	2015-03-17
1.4.0-beta.5	2015-02-24
1.3.14	2015-02-24
1.4.0-beta.4	2015-02-09
1.3.13	2015-02-09
1.3.12	2015-02-03
1.4.0-beta.3	2015-02-03
1.3.11	2015-01-27
1.4.0-beta.2	2015-01-27
1.4.0-beta.1	2015-01-20
1.3.10	2015-01-20
1.3.9	2015-01-15
1.4.0-beta.0	2015-01-14
1.3.8	2014-12-19
1.2.28	2014-12-16
1.3.7	2014-12-15
1.3.6	2014-12-09
1.3.5	2014-12-02
1.3.4	2014-11-25
1.2.27	2014-11-21
1.3.3	2014-11-18
1.3.2	2014-11-07
1.3.1	2014-10-31
1.3.0	2014-10-14
1.3.0-rc.5	2014-10-09
1.2.26	2014-10-03
1.3.0-rc.4	2014-10-02
1.3.0-rc.3	2014-09-24
1.2.25	2014-09-17
1.3.0-rc.2	2014-09-17
1.2.24	2014-09-10
1.3.0-rc.1	2014-09-10
1.3.0-rc.0	2014-08-30
1.2.23	2014-08-23
1.3.0-beta.19	2014-08-23
1.2.22	2014-08-12
1.3.0-beta.18	2014-08-12
1.2.21	2014-07-25
1.3.0-beta.17	2014-07-25
1.3.0-beta.16	2014-07-18
1.2.20	2014-07-11
1.3.0-beta.15	2014-07-11
1.2.19	2014-07-01
1.3.0-beta.14	2014-07-01
1.3.0-beta.13	2014-06-16
1.3.0-beta.12	2014-06-14
1.2.18	2014-06-14
1.3.0-beta.11	2014-06-06
1.2.17	2014-06-06
1.3.0-beta.10	2014-05-24
1.3.0-beta.9	2014-05-17
1.3.0-beta.8	2014-05-09
1.3.0-beta.7	2014-04-26
1.3.0-beta.6	2014-04-22
1.2.16	2014-04-04
1.3.0-beta.5	2014-04-04
1.3.0-beta.4	2014-03-28
1.2.15	2014-03-22
1.3.0-beta.3	2014-03-21
1.3.0-beta.2	2014-03-15
1.3.0-beta.1	2014-03-08
1.2.14	2014-03-01
1.2.13	2014-02-15
1.2.12	2014-02-08
1.2.11	2014-02-03
1.2.10	2014-01-25
1.2.9	2014-01-15
1.2.8	2014-01-10
1.2.7	2014-01-03
1.2.6	2013-12-20
1.2.5	2013-12-13
1.2.4	2013-12-06
1.2.3	2013-11-27
1.2.2	2013-11-22
1.2.1	2013-11-15
1.2.0	2013-11-08
1.2.0-rc.3	2013-10-14
1.2.0-rc.2	2013-09-04
1.0.8	2013-08-22
1.2.0rc1	2013-08-13
1.0.7	2013-05-22
1.1.5	2013-05-22
1.0.6	2013-04-04
1.1.4	2013-04-04
1.0.5	2013-02-20
1.1.3	2013-02-20
1.0.4	2013-01-23
1.1.2	2013-01-23
1.1.1	2012-11-27
1.0.3	2012-11-27
1.1.0	2012-09-04
1.0.2	2012-09-04
1.0.1	2012-06-25
1.0.0	2012-06-14
v1.0.0rc12	2012-06-12
v1.0.0rc11	2012-06-11
v1.0.0rc10	2012-05-24
v1.0.0rc9	2012-05-15
v1.0.0rc8	2012-05-07
v1.0.0rc7	2012-05-01
v1.0.0rc6	2012-04-21
v1.0.0rc5	2012-04-12
v1.0.0rc4	2012-04-05
v1.0.0rc3	2012-03-30
v1.0.0rc2	2012-03-21
g3-v1.0.0rc1	2012-03-14
g3-v1.0.0-rc2	2012-03-16
1.0.0rc1	2012-03-14
0.10.6	2012-01-17
0.10.5	2011-11-08
0.10.4	2011-10-23
0.10.3	2011-10-14
0.10.2	2011-10-08
0.10.1	2011-09-09
0.10.0	2011-09-02
0.9.19	2011-08-21
0.9.18	2011-07-30
0.9.17	2011-06-30
0.9.16	2011-06-08
0.9.15	2011-04-12
0.9.14	2011-04-01
0.9.13	2011-03-14
0.9.12	2011-03-04
0.9.11	2011-02-09
0.9.10	2011-01-27
0.9.9	2011-01-14
0.9.7	2010-12-11
0.9.6	2010-12-07
0.9.5	2010-11-25
0.9.4	2010-11-19
0.9.3	2010-11-11
0.9.2	2010-11-03
0.9.1	2010-10-27
0.9.0	2010-10-21

in italic - are versions, that are not final (RC, Beta, etc.)

Still have a question about Getting started with AngularJS? Ask Question

Topic Outline

Save Draft Discard

We recognize you from another Stack Exchange Network site!

Join and Save Draft

Discard Draft

current community

your communities

more stack exchange communities

AngularJS

Popular

Getting started with AngularJS Introduction Topic

Examples

ng-app

Directives

Remarks

Versions

Topic Outline

Remarks

Versions

Topic Outline

current community

your communities

more stack exchange communities

AngularJS

Popular

You must sign up or log in to make a topic request.

Getting started with AngularJS Introduction Topic

Examples

ng-app

Directives

Remarks

Versions

Topic Outline

Remarks

Versions

Topic Outline

Sign up or log in

Save edit as a guest

Join Stack Overflow