AngularJS Directives AngularJS MVC Architecture

AngularJS First Application

to create an actualHello WorldBefore!An application using AngularJS, let's take a look at the various parts of an AngularJS application. An AngularJS application includes the following three important parts-

ng-app − This directive defines the AngularJS application and links it to HTML.
ng-model − This pseudo-instruction binds the value of AngularJS application data to HTML input controls.
ng-bind − This directive binds AngularJS application data to HTML tags.

Create AngularJS application

Step1: Load the framework

As a pure JavaScript framework, it can be added using the <script> tag.

<script　
　　　src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js</script>/script>

Step2: Using ng-Application defined by the app directive

<div　ng-app　=　"">
　　　...</div>

Step3: Using ng-Model name defined by the model directive

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

Step4: Bound using ng-Values defined by the bind directive of the above model

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

Execute AngularJS application

Use the above three steps in an HTML page.

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>AngularJS　First　Application</title>/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://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test to see‹/›

How AngularJS Integrates with HTML

ng-The app directive indicates the start of the AngularJS application.
ng-The model directive creates a model variable named name, which can be used together with the HTML page and can be used in elements with ng-is used in the div of the app directive.
Then, every time the user types content in the text box, ng-bind will display the name model in the HTML <span> tag.
Closing </ The div> tag indicates the end of the AngularJS application.