locked
A simple AngularJS page is not working RRS feed

  • Question

  • User1769015664 posted

    The following code displays a textbox control and the line below; it should display what I type in the textbox.

    Hello, {{ yourName}}!

    <!doctype html>
    <html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="js/main.js"></script></head>
    <body>
        <div>
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <h1>Hello, {{ yourName }}!</h1>
        </div>
    </body>
    </html>

    Tuesday, August 23, 2016 4:34 PM

Answers

  • User2103319870 posted

    NJ2

    <html ng-app="myApp">

    You have provided an modulename 'myApp' to ng-app directive and not declared a directive in your code

    You can resolve the issues in two ways

    Remove the module name from ng-app

    <!doctype html>
    <html ng-app="">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     
       </head>
    <body>
        <div >
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <h1>Hello, {{yourName}}!</h1>
        </div>
    </body>
    </html>

    Create a MOdule Name

    <!doctype html>
    <html ng-app="myApp">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script>
        var app = angular.module("myApp", []);
      </script>
       </head>
    <body>
        <div >
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <h1>Hello, {{yourName}}!</h1>
        </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 4:56 PM

All replies

  • User2103319870 posted

    NJ2

    <html ng-app="myApp">

    You have provided an modulename 'myApp' to ng-app directive and not declared a directive in your code

    You can resolve the issues in two ways

    Remove the module name from ng-app

    <!doctype html>
    <html ng-app="">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     
       </head>
    <body>
        <div >
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <h1>Hello, {{yourName}}!</h1>
        </div>
    </body>
    </html>

    Create a MOdule Name

    <!doctype html>
    <html ng-app="myApp">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script>
        var app = angular.module("myApp", []);
      </script>
       </head>
    <body>
        <div >
            <input type="text" ng-model="yourName" placeholder="Enter a name here">
            <h1>Hello, {{yourName}}!</h1>
        </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 4:56 PM
  • User1769015664 posted

    Thanks!

    Tuesday, August 23, 2016 5:13 PM