Developer Guide: Initializing Angular

Initializing angular consists of loading the angular.js script in your page, and specifying how angular should process and manage the page. To initialize angular you do the following:

The simplest way to initialize angular is to load the angular script and tell angular to compile and manage the whole page. You do this as follows:

<!doctype html>
<html ng-app>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="angular.js">
  </body>

Specifying the Angular Namespace

    <html xmlns:ng="http://angularjs.org">

You need to add the angular namespace declaration if you use ng:something style of declaring angular directives and you write your templates as XHTML. Or when you are targeting Internet Explorer older than version 9 (because older versions of IE do not render namespace properly for either HTML or XHTML). For more info please read Internet Explorer Compatibility doc.

Creating Your Own Namespaces

When you are ready to define your own directive, you may chose to create your own namespace in addition to specifying the angular namespace. You use your own namespace to form the fully qualified name for directives that you create.

For example, you could map the alias my to your domain, and create a directive called my:directive. To create your own namespace, simply add another xmlns tag to your page, create an alias, and set it to your unique domain:

    <html xmlns:ng="http://angularjs.org" xmlns:my="http://mydomain.com">

Loading the Angular Bootstrap Script

The angular bootstrap script comes in two flavors; a debug script, and a production script:

Related Topics