Common error in angular JS

Question

0.00/5 (No votes)

See more:

Hi I am coming across one common error in rendering simple angular code

HTML

<pre><!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script data-require="angular.js@*" data-semver="4.0.0" src="script.ts"></script>
    <script data-require="angular.js@*" data-semver="4.0.0" src="system.config.js">  </script>
    <script data-require="angular.js@*" data-semver="4.0.0" src="tsconfig.json"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='mainctrl'>
    <h1>Hello Plunker!</h1>
    <p>{{ message }}</p>
  </body>

</html>

My Javascript code is:

JavaScript

let mainctrl = function($scope) {
  $scope.message='Hello Angular!';
}

When I render this code I get a line of errors

[$controller:ctrlreg] http://errors.angularjs.org/1.6.10/$controller/ctrlreg?p0=mainctrl

I am a beginner to Angular, What could be the possible problem?

What I have tried:

I tried rendering the code, but could not find any thing which could create error. I also tried removing line

JavaScript

<pre><script data-require="angular.js@*" data-semver="4.0.0" src="system.config.js">  </script>

since it showed error in this line

Posted 6-Jun-18 8:12am

Member 13121956

Updated 7-Jun-18 2:54am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2018-06-07T02:56:00

So, for Angular 1 apps you need to explicitly define the application and controllers, and they are different form one another. This may read differently from examples that you've seen for NG2+.

JavaScript

var myApp = angular.module('myApp');

myApp.controller('mainctrl',['$scope', function($scope){
   $scope.message='Hello Angular!';
}]);

The controller definition includes the dependency injection array used by NG1, and you'll notice that the name to use for the controller in the HTML is a string, not a variable.

Then amend the html declaration tag:

HTML

<html ng-app="myApp">