DZone
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
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Migrate, Modernize and Build Java Web Apps on Azure: This live workshop will cover methods to enhance Java application development workflow.

Modern Digital Website Security: Prepare to face any form of malicious web activity and enable your sites to optimally serve your customers.

Kubernetes in the Enterprise: The latest expert insights on scaling, serverless, Kubernetes-powered AI, cluster security, FinOps, and more.

A Guide to Continuous Integration and Deployment: Learn the fundamentals and understand the use of CI/CD in your apps.

Related

  • Angular vs. Flutter for Web App Development: Know Which One Is Best?
  • Difference Between Bootstrap and AngularJS in 2022
  • A Brief Guide to Using Sass/SCSS in an Angular App
  • The Best Javascript Frameworks for 2022

Trending

  • Python “Magic” Methods (Part 2)
  • Ensuring API Resilience in Spring Microservices Using Retry and Fallback Mechanisms
  • Demystifying Databases, Data Warehouses, Data Lakes, and Data Lake Houses
  • Converting ActiveMQ to Jakarta (Part 1)
  1. DZone
  2. Coding
  3. Frameworks
  4. 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
·
Nov. 21, 14 · Tutorial
Like (0)
Save
Tweet
Share
33.8K 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.

Related

  • Angular vs. Flutter for Web App Development: Know Which One Is Best?
  • Difference Between Bootstrap and AngularJS in 2022
  • A Brief Guide to Using Sass/SCSS in an Angular App
  • The Best Javascript Frameworks for 2022

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

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

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: