CODEWITHSUNDEEP
angularjsng-controller
Chris Bao
Chris Bao

Reputation: 2888

ng-controller: basic usage of controller of angularjs fail to work

I just start working on Angularjs, and when I came to ng-controller, there is one confusing point as following:
The HTML codes:

<html lang="en" ng-app="App" ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Chapter1 <small>Hello,World</small></h2>
</div>

</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name}}</h1>
<label for="name">Enter Your Name</label>
<input type="text" ng-model="name" class="form-control input-lg" id="name">
</div>
</div>
</body>
</html>

The angularjs codes:

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

the result is that the {{name}} model part can not get the correct data. No default data "World" can be shown, and no matter what I type inside the input text box, the output view is always Hello, {{name}}

EDIT: I refer to a book about angularjs. And the demo case shows that the usage I post here. But I found workaround now.

Upvotes: 0

Views: 66

Answers (1)

Joy
Joy

Reputation: 9560

Your Angular is not bootstrapped. Use:

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

I suggest you to read through some basic tutorials first.

Check this working demo: JSFiddle

Upvotes: 4

Related Questions