angularJS basics struggling - controllers

Question

im new to AngularJS and im having trouble creating a controller for my page

its a simple page that load app.js file that has $scope.name = "james"; and i use the expression {{ $scope.name }} to display that value which isnt coming up.. but when i run {{ 2 + 4 }} it shows 6 so angular is working..
another thing is when i open the page in safari the expressions are being displayed raw (meaning : '{{ 2 + 4 }}') but chrome would run it and will show the results..

here is my code.. thanks for helping

HTML
        <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
        <script src="app.js"></script>

        <meta charset="utf-8">

        <title></title>
    </head>

    <body>

    <div data-ng-app="myApp" data-ng-controller="myCtrl">
        {{  $scope.name }}
        {{  2 + 4 }}


        </div>


    </body>
    </html>

app.js

   var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope){

   $scope.name = "James"
})

Bryan Dellinger · Accepted Answer · 2017-10-29 23:18:16Z

1

seems to be working ok for me here is a plunkr. https://plnkr.co/edit/uXqvoIrgNjEZq8cHRE3Z?p=preview

I am using the angular style guide. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="./script.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl as vm">
       {{  vm.name }}
        {{  2 + 4 }}
    </div> 
</div>

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

   function myCtrl(){
       /* jshint validthis: true */
       var vm=this;
       vm.name = "James";
   } 

})();

answered Oct 29, 2017 at 23:18

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

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

1 Comment

Steve Rogers Over a year ago

This is the correct answer as it's recommended to use controllerAs w/ AngularJS controllers.

Claies · Accepted Answer · 2017-10-30 00:04:27Z

1

your issue here is that you are misunderstanding how $scope works.

$scope is a special object provided by AngularJs which allows you to add properties to it, which AngularJs will attach Watchers to, for Two Way Binding. In your HTML expressions ({{ }}), you don't refer to the $scope, you refer to the property of $scope that you are interested in.

In other words, instead of {{ $scope.name }}, you should use simply {{ name }}.

Note that there are many style guides which will suggest alternatives to using $scope, but the most important aspect of $scope in more advanced situations is to always use a dot in your bindings, if possible.

answered Oct 30, 2017 at 0:04

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Collectives™ on Stack Overflow

angularJS basics struggling - controllers

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related