DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Angular JS: Two Ways to Initialize an Angular App

Angular JS: Two Ways to Initialize an Angular App

This article represents code samples along with related concepts for two different ways in which an Angular app can be defined.

Ajitesh Kumar user avatar by
Ajitesh Kumar
CORE ·
Nov. 21, 14 · Mobile Zone · Tutorial
Like (0)
Save
Tweet
32.79K Views

Join the DZone community and get the full member experience.

Join For Free

This article represents code samples along with related concepts for two different ways in which an Angular app can be defined. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • Automatic Initialization
  • Manual Initialization

Automatic Initialization

All that is needed for automatic initialization (as of current AngularJS version) is to define “ng-app” on an element and you should be all set. Take a look at following code sample. Pay attention to some of the following:

  • ng-app=”HelloApp” defined on div element
  • ng-controller=”HelloCtrl” defined on the same element. It could as well be defined within the inner elements.
<html>
<head>
<title>Hello Angular</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
  <div ng-app="HelloApp" ng-controller="HelloCtrl">
    <h1>Hello, {{name}}</h1>
  <form>
  <input type="text" ng-model="name" name="name">
  </form>  
  </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javascript">
angular.module('HelloApp', [])
.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = "Calvin";
}])
</script>
</body>
</html>


As per the description on this page, Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to ‘complete’. At this point, Angular looks for the ng-app directive which designates your application root. Read further on the given page.

Manual Initialization

One could also initialize the angular app manually. This seems to be suited more for existing/legacy web pages where you would want to initialize angular app for a particular set of “views” or, initialize the app conditionally. Following is the code sample. Pay attention to the following code snippet which is used to instantiate the angular app manually. angular.bootstrap(document, ['HelloApp']);. Read further on this page.

<!DOCTYPE html>
<html>
<head>
<title>Hello Angular</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
  <div ng-controller="HelloCtrl">
    <h1>Hello, {{name}}</h1>
  <form>
  <input type="text" ng-model="name" name="name">
  </form>  
  </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javascript">
angular.module('HelloApp', [])
.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = "Calvin";
}])
 angular.bootstrap(document, ['HelloApp']);
</script>
</body>
</html>
app AngularJS

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Create a Self-Service Customer Support Chatbot Without Code
  • Usage of Java Streams and Lambdas in Selenium WebDriver
  • API Testing for Open Banking Operations
  • A Complete Guide About Scaled Agile Framework (SAFe)?

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo