Setting Up AngularJs


#1

Hi there everyone,

The tutorials here are great, but I am having trouble putting them to use. Specifically, I’m having trouble setting up my Angular js… I setup the ng-app on the body and ng-controller on the div section. The app.js code looks like this;

var myApp = angular.module("myApp", [""]);

myApp.controller("mainController", [$scope, function($scope){
    $scope.title = "Test Title";
}]);

But when I write <h1>{{ title }}</h1> on the body section and run the code on the browser, it doesn’t give me “Test Title” as the heading… and gives me the following error message on the inspect section on checking the code: uncaught typeerror cannot read property ‘angular’ of undefined

Here is my html code:

<!DOCTYPE html>
<html>
<head>
    
    <meta charset="utf-8">

    <title>Angular Test</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
</head>
<body ng-app="myApp" ng-controller="mainController">
    
    <h1>{{ title }}</h1>
    
</body>
    <script src="/scripts/myApp.js"></script>
    <script src="/scripts/MainController.js"></script>
    
    <script src="https://code.angularjs.org/1.7.3/angular.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
</html>

Please anyone advise on where I could be going wrong… Thank you.


#2

That is the only line that should be in app.js. The other line should be in mainController.js.

Please post a URL to the exercise page. Thanks.


#3

I have made that change but it still doesn’t work:

app.js

var myApp = angular.module("myApp", []);

mainController.js

myApp.controller("mainController", [$scope, function($scope){
    $scope.title = 'Test Title';
}]);

It’s a project I am doing on my computer for a client; not an exercise on codeacademy.
Please advise


#5

I haven’t changed much in the html

<!DOCTYPE html>
<html>
<head>
    
    <!-- I have added comments to explain what I was doing on this html document -->

    <meta charset="utf-8">
    <title>Angular Test</title>
    
    <!-- I called angularjs 1.7.2 here -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
</head>

<!-- I attached myApp and mainController here -->
<body ng-app="myApp" ng-controller="mainController">
    
    <!-- This is where I need the Test Title heading to appear -->
    <h1>{{ title }}</h1>
    
</body>
    <!-- Then I linked the js files here -->
    <script src="/scripts/myApp.js"></script>
    <script src="/scripts/mainController.js"></script>
    
    <!-- This is just angular ui bootstrap, nothing really important for angular to function (should function even without it) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
    
    <!-- bootstrap js, also not that important for angularjs to function -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
</html>

#6

Perhaps try wrapping the content in a DIV and give it the controller?


#7

I tried that too earlier, it did not work either