How I can Initializing Angular "Hello World' App
Question
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.
2 answers
solution1
6 ACCPTED 2016-06-12 03:54:51
You should change order of including js files.
<script src='js/angular.min.js'></script>
<script src='js/app.js'></script>
solution2
0 2016-08-17 18:05:37
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
angular.js “Hello World” app not working
How can I output hello world in this simple React code?
Cannot start angular 2 hello world
Hello World in angular.js
h1 “hello world” text hiding behind of navigation bar how can i fix this
How can I run a “hello world” on webassembly with the latest Node.js?
How Can I Make Text Animation Effect, Hello World to HW in JavaScript or CSS?
how to show hello world in react?
Angular4 & Webpack - 300kb (after optimization) for a simple “hello world” app?
My “Hello World” Angular JS is not working
Related Tags