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

Question

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.

Any javascript errors reported in the browser (e.g. the "console" tab of your browsers developer tools)? — Brendan Green
– Brendan Green, Commented Apr 26, 2016 at 3:29

Joy · Accepted Answer · 2016-04-26 03:29:59Z

4

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

answered Apr 26, 2016 at 3:29

Joy

9,60011 gold badges50 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Bao Over a year ago

I know the way you answered. But I am reading a book, in that it said that just based on what I post here, the app can run through.....

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related