Pedro Martins
Pedro Martins

Reputation: 3

Can't put to work angularjs 1.3.1

I'm starting with angularjs and I'm having problems to put to work a really basic example with version 1.3.1. I followed a tutorial with the following code:

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
<title>Angular Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
</head>
<body>

<div ng-controller="MyController">
    <h1>{{author.name}}</h1>
    <p>{{author.company}}</p>
</div>

<script>

    function MyController($scope) {
        $scope.author = {
            'name': 'Some Name',
            'company': 'Some Company'
        }
    }
</script>
</body>
</html>

And I'm getting the following result:

{{author.name}}

{{author.company}}

It seems that angular is not properly initialized.

Upvotes: 0

Views: 200

Answers (1)

Blazemonger
Blazemonger

Reputation: 92953

Give a name to your app:

<html lang="en" ng-app="app">

And then initialize it and your controller properly:

var app = angular.module('app', []);
app.controller('MyController',MyController); 

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

You can/should move your script to the <head> section as well, so that {author.name} doesn't flash on the screen before the controller is initialized.

Upvotes: 1

Related Questions