user1829136 user1829136 - 1 month ago 9
Javascript Question

Angular - Angular.js not being recognized

I'm new to Angular, and trying to do a simple Hello World. Please find my source files below:

<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",[]);


File Structure currently in place (created using npm)

└───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'm currently facing two issues:


  1. If I set ng-app to ng-app="ngClassifieds" in the index.html file, Angular stops working (see output below)

  2. If I use the \ngClassifieds\node_modules\angular\angular.js file, instead of https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js, it stops working (see output below)



Error:
enter image description here

Whereas if I remove the ng-app parameter and use https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js instead, it works as expected:

enter image description here

This is the working 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>

Answer

While you defined a module, you acually don't include it in your file and that's why it gives an error. Since it wasn't include the module that's it's trying to look for (ngClassifieds) doesn't exist. Just include your app.js file in your header after angular and it will run:

<html>
  <head>
    <script src="./node_modules/angular/angular.js"></script>
    <script src="/ngClassifieds/scripts/app.js"></script> <!-- Include it here-->
    <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>
Comments