CODEWITHSUNDEEP
javascriptangularjs
MoSheikh
MoSheikh

Reputation: 789

How I can Initializing Angular "Hello World' App

really basic question: a "hello world" app to start out practicing Angular works until I try to add the controller, at which point the expression doesn't work on the page.

<!doctype html>
<html ng-app='app'>

<head>
    <link rel='stylesheet' href='css/styles.css'>
    <link rel='stylesheet' href='css/bootstrap.min.css'>
    <script src='js/app.js'></script>
    <script src='js/angular.min.js'></script>
</head>

<body>
    <div class='container col-md-6 col-md-offset-6 panel' ng-controller='FormController'>
        <input type='text' ng-model='name' placeholder='Enter your name'>
        <h1>Hello {{name}}</h1>
    </div>

</body>

</html>

JS:

angular.module('app', []).controller('FormController', function($scope){
    $scope.name = 'Test';
});

The page just ends up displaying {{name}} but if I take out the controller and the 'app' module, it works just fine. Help would be great, thank you.

Upvotes: 4

Views: 149

Answers (2)

Umar Farooque Khan
Umar Farooque Khan

Reputation: 508

Working Code here 

<!doctype html>
<html ng-app='app'>

<head>
    <script src="http://www.ptutorial.com/angularjs/
angular.min.js"></script>
    <link rel="stylesheet" href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css">
</head>

<body>
    <div class='container col-md-6 col-md-offset-6 panel' ng-controller='FormController'>
        <input type='text' ng-model='name' placeholder='Enter your name'>
        <h1>Hello {{name}}</h1>
    </div>
    <script>
        angular.module('app', []).controller('FormController', function ($scope) {
            $scope.name = 'Test';
        });
    </script>
</body>

</html>

Upvotes: 0

Hadi
Hadi

Reputation: 17289

You should change order of including js files.

<script src='js/angular.min.js'></script>
<script src='js/app.js'></script>

Upvotes: 6

Related Questions