0

This whole app should consist of an h1 element that says 'Adrian' and a paragraph that says 'He lives in Orlando'. I can't figure out what's wrong with my code. BTW, I already know that this isn't the best design pattern for Angular, but I just wanted something quick to get my feet wet with the framework.

<!doctype html>
    <html lang="en" ng-app>
        <head>
            <meta charset="utf-8">
            <title>Angular Demo</title>
            <script src="angular.min.js"></script>
        </head>
        <body>
            <div ng-controller="MyController">
                <h1>{{person.firstName}}</h1>
                <p>He lives in {{person.city}}</p>
            </div>

            <script>
                function MyController($scope) {
                    $scope.person = {
                        'firstName': 'Adrian',
                        'city': 'Orlando'
                    }
                }
            </script>
        </body>

</html>
Adrian
  • 31
  • 6
  • 4
    http://www.w3schools.com/angular/angular_controllers.asp A controller has to be assigned to a module. – VSO Aug 17 '15 at 18:54

3 Answers3

2

You are not making Angular aware of your MyController function:

<!doctype html>
    <!-- tell Angular what module to use -->
    <html lang="en" ng-app="app">
        <head>
            <meta charset="utf-8">
            <title>Angular Demo</title>
            <script src="angular.min.js"></script>
        </head>
        <body>
            <div ng-controller="MyController">
                <h1>{{person.firstName}}</h1>
                <p>He lives in {{person.city}}</p>
            </div>

            <script>
                angular
                    // Define our module
                    .module('app', [])
                    // Define our controller
                    .controller('MyController', function MyController($scope) {
                        $scope.person = {
                            'firstName': 'Adrian',
                            'city': 'Orlando'
                        }
                    });
            </script>
        </body>
</html>
sdgluck
  • 24,894
  • 8
  • 75
  • 90
2

Get in the habit of assigning app names and controllers to the apps, here:

http://plnkr.co/edit/gfWh6fqWeni8s8M0iG1B?p=preview

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
                   $scope.person = {
                        'firstName': 'Adrian',
                        'city': 'Orlando'
                    }
});
</script>

I am not even trying to be a patronizing ass, but check the tutorial here. It will take you a couple of hours. Then head over to Jenkov's "complete" tutorial.

VSO
  • 11,546
  • 25
  • 99
  • 187
2

Your code works fine. I believe your angular source file is the issue try switching it to a CDN src or double check your path

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

http://jsfiddle.net/sfwtfp35/2/

thedevlpr
  • 1,101
  • 12
  • 28
  • Useful. I am so used to assigning it, I just automatically assumed it was the issue. Cool that you checked. – VSO Aug 17 '15 at 19:11
  • Yeah apart from the other suggestions given to improve your code, CDNs are a great way to maintain your code but more importantly it reduces latency which provides a faster loading of your website. – thedevlpr Aug 17 '15 at 19:16
  • This didn't work. Thanks for the reply though. Each reply I've read so far has either taught me something about Angular or reinforced a key concept. – Adrian Aug 17 '15 at 20:16