Following are the key points described later in this article:
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:
<!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.
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>
Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…
As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…
In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…
In this blog, you would get to know the essential mathematical topics you need to…
This blog represents a list of questions you can ask when thinking like a product…
AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…