All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Angularjs Sample Application With Source Code

Last Updated : Mar 11, 2024

Angularjs Sample Application With Source Code

In this tutorial we will show you the solution of angularjs sample application with source code, as we know angularjs also same as javascript but here we need to use directives and expressions so we can achieve any process too easily.

Each angularjs application made up of directives the mostly using directives of ng-app, ng-model and ng-bind we used to created sample application.

Step By Step Guide On Angularjs Sample Application With Source Code :-

Here we used directives of ng-app, ng-model and ng-bind in sample application.

Ng-model which is binds input, select and textarea then stores the required used value in a variable and we can use that variable whenever we require that value.

Ng-app used to define the root element of an angularJS application. This directive will automatically initialize the angularjs application on page load.

Ng-bind tells angularjs to replace the content of an HTML element with a value of a given variable, or expression.

<html>
    <head>
        <title> AngularJS</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
    <body>
        <h1>Sample</h1>
        <div ng-app="">
            <input type="text" ng-model="name">
            <p> Hello <span ng-bind="name"></span></p>
        </div>
     </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. <h1> tag used to describes something related to our topic as we know this is header tag.
  8. The ng-app defined in <div> tag of html element this is a block level element. The ng-app directive defines an angularjs application.
  9. We defined <input> tag with type attribute value to ‘text’ so we can enter any string value on this with ng-model directive. As we know by using this we can access value of input.
  10. The <p> tag used to display ‘Hello’ with that we defined another html element of <span> tag for display result as inline style text. In <span> we defined ng-bind directive with input ng-model so we can append any value user entered will display with ‘hello’ string.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to create simple angularjs application.

In angularjs we achieve this too easily but in other languages will take’s time, space and complexity.

So here we used basic directives of ng-app, ng-model and ng-bind those are widely used by developers and we can create any type of simple application using directive available in angularjs.

I hope this tutorial on angularjs sample application with source code helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪