I am very very new to Angular and still very much a newbie to Javascript. I followed a tutorial, but the result is not working in my project.
Tutorial:
HTML
<!DOCTYPE html>
<html ng-app="soCLean">
<head></head>
<body ng-controller="soCleanLandingPage">
<div>
<p>{{locale}}</p>
<p>{{type}}</p>
<p>{{service}}</p>
<p>{{serviceSingle}}</p>
</div>
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
I have removed all extra stuff from the code sample above, but I should advise that I am also pulling two fonts and jQuery from Google CDN, and have a couple local jQuery plugins.
I am also using a few external CSS files. The page in its entirety can be found at here.
PLease help me understand what I am doing wrong and why this is not working. Thanks.
I am very very new to Angular and still very much a newbie to Javascript. I followed a tutorial, but the result is not working in my project.
Tutorial: http://toddmotto./ultimate-guide-to-learning-angular-js-in-one-day
HTML
<!DOCTYPE html>
<html ng-app="soCLean">
<head></head>
<body ng-controller="soCleanLandingPage">
<div>
<p>{{locale}}</p>
<p>{{type}}</p>
<p>{{service}}</p>
<p>{{serviceSingle}}</p>
</div>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
I have removed all extra stuff from the code sample above, but I should advise that I am also pulling two fonts and jQuery from Google CDN, and have a couple local jQuery plugins.
I am also using a few external CSS files. The page in its entirety can be found at here.
PLease help me understand what I am doing wrong and why this is not working. Thanks.
Share Improve this question edited Feb 18, 2014 at 20:48 AHCo asked Feb 18, 2014 at 20:41 AHCoAHCo 1091 gold badge3 silver badges11 bronze badges 3- 1 Don't wrap your Angular code in a jQuery DOM ready function! The script is already at the bottom of the page. – tymeJV Commented Feb 18, 2014 at 20:43
- Ok, I will remove that now. Thanks. However, it did not fix the issue. – AHCo Commented Feb 18, 2014 at 20:45
- not sure ,but it could be that your <script> tag is inside your ng-controller. I would try moving the script to below the </body> tag – GSto Commented Feb 18, 2014 at 20:52
1 Answer
Reset to default 6It's a casing problem. Fix your ng-app attr to "soClean" instead of "soCLean".
http://plnkr.co/edit/ASWTQK9M4LfEhlpsbG9y?p=preview
<!DOCTYPE html>
<html ng-app="soClean">
<head></head>
<body ng-controller="soCleanLandingPage">
<div>
<p>{{locale}}</p>
<p>{{type}}</p>
<p>{{service}}</p>
<p>{{serviceSingle}}</p>
</div>
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>