{"id":59622,"date":"2018-05-02T16:01:44","date_gmt":"2018-05-02T10:31:44","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59622"},"modified":"2024-04-12T14:13:20","modified_gmt":"2024-04-12T08:43:20","slug":"sample-angular-application","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/sample-angular-application\/","title":{"rendered":"Sample Angular Application"},"content":{"rendered":"

Sample Angular Application<\/h1>\n

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).<\/p>\n

An Angular Application consists of following three important parts \u2212<\/p>\n

ng-app \u2212 This directive defines and links an AngularJS application to HTML.
\nng-model \u2212 This directive binds the values of AngularJS application data to HTML input controls.
\nng-bind \u2212 This directive binds the AngularJS Application data to HTML tags.<\/p>\n

Step 1 \u2212 Load framework<\/strong><\/p>\n

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

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

Step 2 \u2212 Define AngularJS Application using ng-app directive<\/strong><\/p>\n

<div ng-app = “”>
\n…
\n<\/div><\/p>\n

Step 3 \u2212 Define a model name using ng-model directive<\/strong><\/p>\n

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

Step 4 \u2212 Bind the value of above model defined using ng-bind directive.<\/p>\n

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

Steps to run AngularJS Application<\/p>\n

Use above mentioned three steps in an HTML page.<\/p>\n

testAngularJS.htm<\/p>\n

<html><\/p>\n

<head>
\n<title>AngularJS First Application<\/title>
\n<\/head><\/p>\n

<body>
\n<h1>Sample Application<\/h1><\/p>\n

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

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

<\/body>
\n<\/html><\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n