ng-controller (beginner question)

30 views
Skip to first unread message

Mosno Al-Moseeki

unread,
Nov 2, 2015, 4:04:05 PM11/2/15
to AngularJS
Hello fellow AngularJS coders,
 I'm very new to this language and I'm taking a video course online, and I'm running into a little problem with the "ng-controller" command. I have heard that this command will not be used in the 2.0 version, but since these teaching videos are using it, I need a help.

So far the simple webpage being created was working just fine, until I added "ng-controller" into the <body>, I tried looking online, but I couldn't find anything helpful as of yet.
Hopefully someone here can show me what I'm doing wrong. Thank you.
Here is the source code.



<html ng-app>
<head> 
<!-- from Google Hosted Libraries -->
<!-- /////////////////////  -->

<script>
function CostCtrl($scope){
 $scope.cost = 1000.1; 
} <!-- end of CostCtrl function-->
</script> <!-- end of CostCtrl function script -->
<!-- /////////////////////  -->
</head>

<body>
<!-- DIV using ng-controller to connect to the CostCtrl function -->
<div ng-controller="CostCtrl">
Cost: <input type="text" ng-model="cost" placeholder="cost" />
<p>
<!-- the 'ng-model="cost" is what's being called here -->
<!-- the "| currency" is the format -->
This is your cost: {{cost | currency}}
</p> 
</div> 
<!-- End of CostCtrl DIV -->
<!-- /////////////////////  -->


</body>
</html>

fasfsfgs

unread,
Nov 2, 2015, 4:44:11 PM11/2/15
to ang...@googlegroups.com
You need to put your controller in your module.

Name your module in your ng-app tag (e.g. ng-app="myApp").
In the javascript code, you have to declare your module and put your controller in it.

Like this:

<html ng-app='myApp'>
<head> 
<!-- from Google Hosted Libraries -->
<!-- /////////////////////  -->

<script>
angular.module('myApp', []).controller('CostCtrl', CostCtrl);
function CostCtrl($scope){
 $scope.cost = 1000.1; 
} <!-- end of CostCtrl function-->
</script> <!-- end of CostCtrl function script -->
<!-- /////////////////////  -->
</head>

<body>
<!-- DIV using ng-controller to connect to the CostCtrl function -->
<div ng-controller="CostCtrl">
Cost: <input type="text" ng-model="cost" placeholder="cost" />
<p>
<!-- the 'ng-model="cost" is what's being called here -->
<!-- the "| currency" is the format -->
This is your cost: {{cost | currency}}
</p> 
</div> 
<!-- End of CostCtrl DIV -->
<!-- /////////////////////  -->


</body>
</html>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Mosno Al-Moseeki

unread,
Nov 4, 2015, 6:49:39 PM11/4/15
to ang...@googlegroups.com
Thank you so much for the information,
 I apologize for the delay in response, I will make sure to try this out and let you know the results :)

have a lovely rest of the week.
-Mosno

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/pLjMM2oLZwY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.



--
With Love & Gratitude,
Mosno Al-Moseeki

WATCH: "Shukran My Totem" (Official Music Video)
Join: The Mosnonauts (for Early & Exclusive releases)
Website: www.mosno.net

 -/-/-

Social Media
Facebook /// Instagram /// Twitter /// YouTube ///

 -/-/-

Managed by Adam Alexander
email: ad...@tarvomusic.com 

 -/-/-

Available now! Exclusively for The Mosnonauts
miniAlbum 2: LunaVerse [acoustic demos] + Lyrics

 


Reply all
Reply to author
Forward
0 new messages