Getting Started With AngularJS Plunk Issue

Question

I am new to Angular JS. I am trying to start with the basic Hello World Program. Here is my plunk http://plnkr.co/edit/uW1fHB7a17gpvn341sn3?p=preview.

var MainController = function($scope){
  $scope.message = "Hello, Angular!";
}

<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="MainController">
    <h1>{{message}}</h1>
  </div>
</body>

</html>

I created a simple controller and has a single model binding in that. It is not working for me. I am not able to get what the problem is. Can anybody please help me in getting started.

You changed the plunk since the answers appeared - the plunk no longer reflects the question when you asked it :( — samjewell, Oct 04 '15 at 20:23

score 1 · Accepted Answer · answered Oct 04 '15 at 19:29

1

You need to boostrap your app properly and define your controller correctly. Observe the following changes...

<html ng-app="app">

angular.module('app', []).controller('MainController', MainController)

Plunker - updated demo

The AngularJS Getting Started resources should be packed with everything you'd like to know to get up and running

answered Oct 04 '15 at 19:29

scniro

16,844
8
62
106

Thanks for the quick solution. It was working fine with AngularJS 1.2.1, however it was not working with 1.4.5. So is this updated way to get started? – Manoj Sethi Oct 04 '15 at 19:34
The plunker works fine with 1.4.5, did you check it out? What is the error you are getting? – scniro Oct 04 '15 at 19:38
No, the code you had written is working fine for me. I am just asking the code that was written by me was working fine for AngularJS 1.2.1 but not for version 1.4.5 – Manoj Sethi Oct 04 '15 at 19:40
Ah yes, I see what you are saying now. It was working because AngularJS suported global controller use in earlier versions, which has now been removed. See SO [Why doesn't the latest version of angular support global controller functions?](http://stackoverflow.com/questions/25112978/why-doesnt-the-latest-version-of-angular-support-global-controller-functions) for some more details on that topic. So yes, this is considered the "updated" way to get started – scniro Oct 04 '15 at 19:42
Thanks a lot @scniro. Your answer helped me a lot. – Manoj Sethi Oct 04 '15 at 19:43

score 0 · Answer 2 · answered Oct 04 '15 at 19:30

0

A couple things.

You need to create an angular module:

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

The second argument is an array of dependency modules. You don't need one here.

Then change ng-app to ng-app="myApp" referencing whatever you named your module.

Then you need to create a controller the angular way.

app.controller('MainController',MainController);

Here's the full script. Plunkr

function MainController($scope) {
  $scope.message = 'Hello World';
}

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);

answered Oct 04 '15 at 19:30

bluetoft

5,373
2
23
26

1

it is similar, though definitely not copied from yours :) And written at the same time. – bluetoft Oct 04 '15 at 19:32
@bluetoft Thanks for the quick solution. It was working fine with AngularJS 1.2.1, however it was not working with 1.4.5. So is this updated way to get started? – Manoj Sethi Oct 04 '15 at 19:36

score 0 · Answer 3 · answered Oct 04 '15 at 20:35

Your original code works fine with Angular 1.0, just not with 1.4 Just thought it was worth mentioning, in case you were following a tutorial, and wondering why it wasn't working or something.

See this plunkr working fine in 1.0 with equivalent code to yours... http://plnkr.co/edit/zbWvwxVDvhhVKgc5lGrr?p=preview

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="MainController">
      {{message}}
    </div>
  </body>
</html>

and

var MainController = function($scope) {
  $scope.message = "Hello, Angular!";
}

Getting Started With AngularJS Plunk Issue

3 Answers3