--- title: "Angularjs First Application" description: "Hi everyone in this blog I’m explaining about how to use of angular with html.Details:In this sample we have creating actual Helloworld application us" author: "Anonymous User" published: 2015-03-19 updated: 2018-02-19 canonical: https://www.mindstick.com/blog/10846/angularjs-first-application category: "angular js" tags: ["javascript", "angularjs controller", "javascript library"] reading_time: 2 minutes --- # Angularjs First Application Hi everyone in this blog I’m explaining about how to use of angular with html. ##### Details: ## In this sample we have creating actual Helloworld [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) using [angularjs](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project), let us see what are the actual part of a angularjs application. An angularjs application consist of following three important parts. 1. Ng-app: This directive defines and links an angularjs application to HTML. 2. Ng-model: This directive binds the [values](https://www.mindstick.com/forum/327/sum-textbox-values) of Angularjs application data to [html input](https://www.mindstick.com/forum/157343/how-to-prevent-a-user-from-adding-same-character-over-and-over-in-html-input-box-using-javascript) control. 3. Ng-bind: This directive binds the angularjs application data to [HTML tag](https://www.mindstick.com/forum/78/how-avoid-the-html-tag-and-remove-the-formating-of-copy-in-ajax-editor). ##### Create AngularJs Application: ## Step 1: Load [Framework](https://www.mindstick.com/forum/34615/software-framework-vs-library) Being a pure [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) framework, It can be added using <[Script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line)> tag. ``` ``` Step 2: [Define](https://yourviews.mindstick.com/audio/1110/lifestyles-choices-that-define-our-lives) angularjs application using ng-app directive. #####
\ ...\
Step 3: Define a model name using ng-model directive ```

Enter your Name:

``` Step 4: Bind the value of above model defined using ng-bind directive ```

Welcome !

``` Steps to run AngularJS Application Use above mentioned three steps in an HTML page. ##### testAngularJS.htm ``` AngularJS First Application   

Sample Application

   
       

Enter your Name:           

       

Welcome !

   
    ``` ##### Output: Open textAngularJS.htm in a [web browser](https://www.mindstick.com/blog/301688/best-web-browsers-for-2023). Enter your name and see the result. ![Angularjs First Application](https://www.mindstick.com/blogs/89a84fe2-013c-46f7-959d-97df3e305279/images/9aad5839-ff8b-4535-ae95-b874f873c002.png) ##### How AngularJS integrates with HTML: ## 1. ng-app directive indicates the start of AngularJS application. 2. ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive. 3. ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box. 4. Closing tag indicates the end of AngularJS application. --- Original Source: https://www.mindstick.com/blog/10846/angularjs-first-application Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.