2015-02-11 4 views
1

Я новичок в мире AngularJS. У меня есть этот пример, чтобы определить контроллер для страницы AngularJS. В результате я обнаружил необработанный текст в браузере при попытке открыть страницу.Угловой JS - Контроллер Неопределенный

Я пытаюсь загрузить файл angular.js (lib/angular.js) в локальную файловую систему.

Страница, как указано ниже:

<!doctype html> 
<html ng-app> 
    <head> 
     <script src="lib/angular.js"></script> 
     <script type="text/javascript"> 
      function MyController($scope) { 
       $scope.clock = new Date(); 
       var updateClock = function() { 
        $scope.clock = new Date(); 
       }; 
       setInterval(function() { 
        $scope.$apply(updateClock); 
       }, 1000); 
       updateClock(); 
      }; 
     </script> 
    </head> 
    <body> 
     <div ng-controller="MyController"> 
      <h1>Hello {{clock}}!</h1> 
     </div> 
    </body> 
</html> 

Я в конечном итоге получить результат, как показано ниже:

Здравствуйте, {{часы}}!

В консоли браузера, я получаю журнал ошибок следующим образом:

Error: [ng:areq] Argument 'MyController' is not a function, got undefined 

Что мне не хватает?

С наилучшими пожеланиями, Chandra.

+1

Контроллеры должны быть явно зарегистрированы с помощью 'angular.module (" myApp ", []). Controlle r («MyController», MyController) 'начиная с Angular 1.3, я думаю. Кроме того, вы должны использовать '$ interval', чтобы избежать' $ scope. $ Apply', и вы должны отменить интервал, иначе он будет продолжаться даже после закрытия сайта. –

+0

. Пример, который я использовал, был написан в нижней версии (1.2), но я использовал более высокую версию AngularJS (1.3). Я исправил его и внедрил код, указанный в принятом ответе. Сейчас все работает отлично. – Mouli

ответ

1

Вам необходимо инициировать угловой модуль и создать контроллер, используя тот же самый.

Для примера:

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

app.controller('MyController', function($scope) { 
     $scope.clock = new Date(); 
     var updateClock = function() { 
       $scope.clock = new Date(); 
     }; 
     setInterval(function() { 
      $scope.$apply(updateClock); 
     }, 1000); 
     updateClock(); 
}); 

И тогда вам нужно указать приложение в HTML разметке с нг-приложение = "MYAPP"

Так что ваш HTML будет:

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div ng-controller="MyController"> 
      <h1>Hello {{clock}}!</h1> 
     </div> 
    </body> 

</html> 

Working Plunkr

+0

Спасибо @ V31, это исправило проблему. И я использую загрузить angular.js в файловую систему вместо использования CDN. Еще раз спасибо. – Mouli

Смежные вопросы