AngulaJS, trying to learn but there something happening. BEGGINER

Question

Im trying to learn the old angularjs, because of my job. For some reason it doenst inject the module, and i dont understand why. Its exacly as a example that i have here that it works, but for some reason my code doenst. Im a Begginer on programming.

here's my code: Index.html

`<!DOCTYPE html>
    <html ng-app="App">
    <head>
        <title>Hello World</title>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
         <script src="Control\Controller.js"></script>
    </head>
    <body>
         <h1>Bem Vindo!</h1>
         <ul>
         <li><strong><a href="#/view">View</a></strong></li>
         </ul>
        <div ng-view="">
        </div>
    </body>
    </html> `

Controller

`var App = angular.module("helloWorld",["ngRoute"]);
App.config(function($routeProvider){

$routeProvider.when("/view",{
    templateUrl : "Views/view.html",
    controller : "helloWorldCtrl"
});
$routeProvider.otherwise({ redirecTo : "/index"});
}); 

App.controller("helloWorldCtrl", function($scope){
    $scope.message = "helloWorld";
});`

view

 `<div ng-controller="helloWorldCtrl">
        {{message}}
        {{messagee}}
    </div>`

The error:

  `angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=App&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fnomod%3Fp0%3DApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A21%3A296%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)%0A%20%20%20%20at%20uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A18%3A179)
        at angular.js:38
        at angular.js:4138
        at r (angular.js:323)
        at g (angular.js:4099)
        at ab (angular.js:4025)
        at d (angular.js:1452)
        at uc (angular.js:1473)
        at Jd (angular.js:1367)
        at angular.js:26304
        at HTMLDocument.a (angular.js:2762) `

Logs

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.15%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A6%253A417%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A21%253A412%250A%2520%2520%2520%2520at%2520a%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A21%253A53)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A21%253A296%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A35%253A46%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A34%253A399)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A35%253A63%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.3.15%252Fangular.min.js%253A34%253A399)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A35%3A320%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A35%3A63%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)%0A%20%20%20%20at%20uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A18%3A179)
    at angular.js:38
    at angular.js:4138
    at r (angular.js:323)
    at g (angular.js:4099)
    at ab (angular.js:4025)
    at d (angular.js:1452)
    at uc (angular.js:1473)
    at Jd (angular.js:1367)
    at angular.js:26304
    at HTMLDocument.a (angular.js:2762)

Answer 1

CodeSandbox: https://codesandbox.io/s/sparkling-bash-d7l6j

HTML:

 <!DOCTYPE html>
<html ng-app="App">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Bem Vindo!</h1>

    <ul>
      <li>
        <strong><a href="#!view">View</a></strong>
        <strong><a href="#!home">Home</a></strong>
      </li>
    </ul>
    <div ng-view></div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <!-- below script is needed for angular js routing to work -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script type="text/javascript" src="Control\Controller.js"></script>
  </body>
</html>

Controller.js

var app = angular.module("App", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/view", {
      templateUrl: "Views/view.html",
      controller: "helloWorldCtrl"
    })
    .when("/home", {
      template: "<h4>{{message}}</h4>",
      controller: "homecontroller"
    })
    .otherwise({ redirectTo: "/home" });
});
app.controller("helloWorldCtrl", function($scope) {
  $scope.message = "HelloWorld";
});
app.controller("homecontroller", function($scope) {
  $scope.message = "Im home";
});

View.html

 <div ng-controller="helloWorldCtrl">
        {{message}}
    </div>

AngulaJS, trying to learn but there something happening. BEGGINER

Question

1 answers

solution1
0 ACCPTED 2020-03-23 15:24:05

AngulaJS, trying to learn but there something happening. BEGGINER

Question

1 answers

solution1 0 ACCPTED 2020-03-23 15:24:05

solution1
0 ACCPTED 2020-03-23 15:24:05