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.
Back to Angular 4 Tutorial Main Page 
