Angular controller directly in index.html

Question

I need to make a one page app without any additional files like app.js or controller.js

I created the example below, but I get the error: Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> JavaScript Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js">

        var myАpp = angular.module("myАpp", []);

        myАpp.controller("firstController", function($scope){
            $scope.test = "test-to-test";

        });

    </script>
</head>
<body ng-app = "myApp">
    <div ng-controller = "firstController">
        {{test}}
    </div>

</body>
</html>

So, is it possible to have only one file index.html with Angular and still have a controller inside?

A simple exampe: w3schools.com/angular/tryit.asp?filename=try_ng_controller — Muhammad Faizan Uddin
– Muhammad Faizan Uddin, Commented Nov 20, 2016 at 14:56
However, the real reason that your's didn't work is that you had a non ASCII character in your myApp variable. Correcting that, and adjusting the script tag as below worked for me. — Todd Palmer
– Todd Palmer, Commented Nov 20, 2016 at 15:16

Sajeetharan · Accepted Answer · 2016-11-20 14:58:36Z

4

You need to have the controller and module inside the <script> tag

<div ng-app="myАpp">
  <div ng-controller="firstController">
    <h1>{{test}}</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app = 
    angular.module('myАpp', []).controller('firstController', function($scope){
  $scope.test  =  "test-to-test";
});
</script>

edited Nov 20, 2016 at 14:58

answered Nov 20, 2016 at 14:55

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deep Over a year ago

I guess you meant firstController should be testController

Collectives™ on Stack Overflow

Angular controller directly in index.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related