Sample Angular Application

Sample Angular Application

The AngularJS application is defined by ng-app=”myApp”. The application runs inside the <div>. The ng-controller=”myCtrl” attribute is an AngularJS directive. … In AngularJS, $scope is the application object (the owner of application variables and functions).

An Angular Application consists of following three important parts −

ng-app − This directive defines and links an AngularJS application to HTML.
ng-model − This directive binds the values of AngularJS application data to HTML input controls.
ng-bind − This directive binds the AngularJS Application data to HTML tags.

Step 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.

<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”>
</script>

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = “”>

</div>

Step 3 − Define a model name using ng-model directive

<p>Enter your Name: <input type = “text” ng-model = “name”></p>

Step 4 − Bind the value of above model defined using ng-bind directive.

<p>Hello <span ng-bind = “name”></span>!</p>

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.

testAngularJS.htm

<html>

<head>
<title>AngularJS First Application</title>
</head>

<body>
<h1>Sample Application</h1>

<div ng-app = “”>
<p>Enter your Name: <input type = “text” ng-model = “name”></p>
<p>Hello <span ng-bind = “name”></span>!</p>
</div>

<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>

</body>
</html>

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.

Angular 4 Tutorial IndexBack to Angular 4 Tutorial Main Page

Angular Installation
Angular Application Structure

Get industry recognized certification – Contact us

keyboard_arrow_up
Open chat
Need help?
Hello 👋
Can we help you?