As a beginner in Angular, I am attempting to create a simple Hello World application. Below are my source files:
<html >
<head>
<script src="./node_modules/angular/angular.js"></script>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds">
<div>
<label>Name:</label>
<input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
..\ngClassifieds\scripts\app.js
angular.module("ngClassifieds",[]);
The current file structure (generated using npm) is as follows:
└───ngClassifieds
│ index.html
│ package.json
│
├───css
├───node_modules
│ ├───angular
│ │ angular-csp.css
│ │ angular.js
│ │ angular.min.js
│ │ angular.min.js.gzip
│ │ angular.min.js.map
│ │ bower.json
│ │ index.js
│ │ LICENSE.md
│ │ package.json
│ │ README.md
I am encountering the following issues:
- If I specify ng-app as ng-app="ngClassifieds" in the index.html file, Angular ceases to function correctly (see output below)
- Using \ngClassifieds\node_modules\angular\angular.js instead of https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js results in failure (see output below)
Error: https://i.sstatic.net/RKx4f.png
However, when I remove the ng-app attribute and utilize https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js, the application functions as expected:
https://i.sstatic.net/E9oZ7.png
This is the revised index.html:
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<title>ngClassifieds</title>
</head>
<body ng-app>
<div>
<label>Name:</label>
<input type="text" ng-init="yourName = 'oie'" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>