Categories: JavascriptWeb

AngularJS – Two Ways to Initialize an Angular App

This article represents code samples along with related concepts for two different ways in which 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.
<!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-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>

 

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: angularjs

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago