Proper use of Controllers with Angular.js

Question

Learning angular.js and have this simple code but don't understand how to change the value of the "name" variable in the controller.

HTML:

<!DOCTYPE html>
<html lang="en" ng-app ng-controller="AppCtrl">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="../js/controller.js"></script>
</head>
<body>
  <h1>Hello, {{name}}</h1>
  <input type="text" ng-model="name">
</body>
</html>

Controller.js code is as followed:

function AppCtrl($scope){
  $scope.name = "World";

}

Before I added the controller the <h1> tag dynamically changed depending on what was typed in the input field. But when the controller was added the value of the H1 tag is always:

" Hello, {{name}}" (this is what is shown in the browser character by character)

Can anyone explain why and also how to change the value of the 'H1` tag using a controller method?

You have to define your: `var myApp = angular.module('myApp', []);` in your controller and then `` I using `myApp` as an example... also you have to register your controller: `myApp.controller('AppCtrl', AppCtrl);` — JoMendez, Nov 24 '15 at 05:09
I don't understand the variable declaration you are referring to. Can you please explain what it means? Also if I had multiple controllers would I have to have that declaration in each controller method? — web-dev, Nov 24 '15 at 05:18
Possible duplicate of [Controller not a function, got undefined, while defining controllers globally](http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally) — Phil, Nov 24 '15 at 05:19
... next time, use the error in your console to help you search for a solution — Phil, Nov 24 '15 at 05:20

score 0 · Answer 1 · answered Nov 24 '15 at 05:19

0

Take a look at this example you need to declare ng-app="myApp" in the html tag as well as revising the controller declaration. The code below solves your issues and you can run the code snippet.

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

myApp.controller('AppCtrl', ['$scope',
  function($scope) {
    $scope.name = "World";
  }
]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="AppCtrl">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
  <h1>Hello, {{name}}</h1>
  <input type="text" ng-model="name">
</body>
</html>

answered Nov 24 '15 at 05:19

Enkode

4,515
4
35
50

what if I had multiple methods I wanted to define inside a single controller, how would I define it? From what I see in your answer you placed the function definition inside a function parameter so I'm a bit confused if I have to include multiple function definitions inside the function paramater – web-dev Nov 24 '15 at 05:34
This is the way to write a controller. You can not create same name multiple controller. – Partha Sarathi Ghosh Nov 24 '15 at 06:06
This function is actually the controller AppCtrl. – Partha Sarathi Ghosh Nov 24 '15 at 06:07
@web-dev if you need multiple methods inside the controller you can easily create $scope functions inside the controller. Take a look at this one : http://stackoverflow.com/questions/33662034/adding-lines-to-a-form-using-angularjs/33662070#33662070 – Enkode Nov 24 '15 at 07:17

score -1 · Answer 2 · answered Nov 24 '15 at 05:34

As per your comment. " Hello, {{name}}" (this is what is shown in the browser character by character)

This happens for the following reasons.

Either angular js is not properly loaded.
1. There is an java script error on your some of the files.

As per your code it seems there is no error in your code. So may be your angular js file which you are referring from cdn is not properly loaded. So download that file manually and try to point that locally.

It may solve your problem. You can use chrome developer tool to easily identify the problems.

Proper use of Controllers with Angular.js

2 Answers2