Trouble with executing simple code in a new project (binding, input, ng model) across different browsers

Question

Trouble with executing simple code in a new project (binding, input, ng model) across different browsers

I am encountering an issue with this code snippet. It's a simple one - I want to display the input text in my view, but nothing is showing up. The code runs fine in an online simulator, but when I try it in my browser, it doesn't work at all. I've tested it in Firefox, Explorer, and Chrome, but still no luck. My project is completely empty except for this piece of code. There are no errors showing up in the browser console. I'm using Angular CLI. Can anyone point out what I might be doing wrong? Any help would be greatly appreciated.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

SOURCE

angularjs typescript

Answer 1

Answer №1

When comparing the example you mentioned and the code you provided, there are some differences:

$scope.firstname = "John";
$scope.lastname = "Doe";

However, in the screenshot of your script.js, it shows:

$scope.data = {
    firstname : "John";
    lastname: "Doe";
};

These two sets of code are not the same. The correct HTML attribute for each scenario would be:

Method One: Compatible with the initial code sample

Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>

Method Two: Corresponds to the script.js from your screenshot

Name: <input ng-model="data.firstname">
<h1>{{data.firstname}}</h1>

You should choose one method based on your JavaScript code.

Answer 2

When comparing the example you mentioned and the code you provided, there are some differences:

$scope.firstname = "John";
$scope.lastname = "Doe";

However, in the screenshot of your script.js, it shows:

$scope.data = {
    firstname : "John";
    lastname: "Doe";
};

These two sets of code are not the same. The correct HTML attribute for each scenario would be:

Method One: Compatible with the initial code sample

Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>

Method Two: Corresponds to the script.js from your screenshot

Name: <input ng-model="data.firstname">
<h1>{{data.firstname}}</h1>

You should choose one method based on your JavaScript code.

Answer 3

Answer №2

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script >
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "Sarah";
    $scope.lastname = "Smith";    
});
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script >
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "Sarah";
    $scope.lastname = "Smith";    
});
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

Answer 5

Answer №3

It appears that this is the second time you have posted the same question. If your code is not working inside the browser, one potential reason could be that you are not correctly adding the path to your script.js. Make sure to check your browser console for any errors and try debugging the issue. Your code looks fine.

To test it out, simply copy and paste the code into an .html file and open it in your browser. It should work as expected.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
  var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";    
});

</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

Answer 6

It appears that this is the second time you have posted the same question. If your code is not working inside the browser, one potential reason could be that you are not correctly adding the path to your script.js. Make sure to check your browser console for any errors and try debugging the issue. Your code looks fine.

To test it out, simply copy and paste the code into an .html file and open it in your browser. It should work as expected.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
  var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";    
});

</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

Trouble with executing simple code in a new project (binding, input, ng model) across different browsers

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to choose checkboxes from data that is passed dynamically?

What is the best way to swap out one component for another in a design?

Element not producing output via Autocomplete from mui/material package

Tips for securely accessing a parameterized property of an object in Typescript

The absence of a defined camera function in Cordova is causing the issue

To run multiple environments with react-native-dotenv in a React Native project using Typescript, only the local environment is activated

Using Snap SVG in a React application with Next.js and TypeScript

Module 'bcryptjs' could not be located

updating the HTML DOM elements using JavaScript is not yielding any response

When using AngularJS services to pass data, the data may be lost when the page is refreshed

Ways to make a $resource in Angular return example data?

Is it possible to determine when a component has completed its rendering process in Angular?

Collective picture in the exhibit

Command to exclude the processing of an element during compilation

Currently in the process of developing a Figma plugin that requires retrieving cookies from a website. However, encountered an error while attempting to do so. Seeking solutions to

Transforming the output of a PHP script from an HTML table into an ion-list format tailored for the Ionic framework

URLRouterProvider's otherwise state reloads due to empty state parameters of the parent

How to eliminate certain elements from the DOM in Angular 5

Ways to transmit information from a modal to a function

Angular Typescript filter function returning an empty arrayIn an Angular project, a