AngularJS ng-контроллер не работает

Я только что начал изучать AngularJS в w3schools. Я пытаюсь практиковать примеры того, что они когда-либо упоминали в учебниках. Все работает нормально, но когда я пришел к «Контроллерам AngularJS», он не работает должным образом, как хорошо работает в w3schools Попробуйте сами ». Я разветвил свой код на этот пример скрипки. Мой скрипт выглядит так:

function personController($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
}

Попробуйте помочь мне и предложите мне хороший учебник (или любой бесплатный файл PDF).


javascript html angularjs angularjs-controller
person UiUx    schedule 28.10.2014    source источник
comment
человек, ваш код работает нормально, просто измените параметр в скрипте с onload на no wrap - в ‹head› вот измененный параметр jsfiddle.net/dq8r196v/2   -  person Mohammad Shahrouri    schedule 28.10.2014
comment
да, это нормально в скрипке, но не на моей локальной машине. Я получаю следующую ошибку: Ошибка: [ng:areq] Аргумент 'personController' не является функцией, он не определен   -  person UiUx    schedule 28.10.2014
comment
Спасибо за этот вопрос, у меня такая же проблема, когда я следую другому учебнику. Мне интересно, была ли это новая версия AngularJS, для которой требовался другой синтаксис?   -  person Yevgeniy Afanasyev    schedule 21.12.2015

Ответы (8)


arrow_upward
22
arrow_downward

Это ваша исправленная скрипка.

Для angular рекомендуется, чтобы определение контроллера выглядело примерно так:

angular.module("app", []).controller("personController", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

И, без сомнения, лучший учебник для изучения основ Angular — это CodeSchool один!

Надеюсь это поможет.

person Kutyel    schedule 30.10.2014
comment
да, он отлично работает, когда я меняю свою функцию на ваш код angular.module. но в чем разница между этими двумя функциями..? - person UiUx; 30.10.2014
comment
в основном синтаксис, который я использовал, позволит вам в будущем передавать больше параметров вашему контроллеру, например, $http и многие другие, что очень полезно. - person Kutyel; 30.10.2014

arrow_upward
11
arrow_downward

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

person katmanco    schedule 30.10.2014
comment
кажется, вы правы, но можете ли вы предоставить какой-либо ресурс для этого. ссылка, которую вы предоставили, не упоминает ничего написанного. - person Kick Buttowski; 26.03.2015
comment
Я рвал на себе волосы во время отладки, почему он работал нормально несколько недель назад (1.2.x) и не работает сейчас (1.3.x) ;-) - person K. Siva Prasad Reddy; 04.06.2015

arrow_upward
5
arrow_downward

Я только что изменил вашу скрипту js. Посмотрите пример скрипки.

function personController($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
}

С вашим кодом не возникло никаких проблем, за исключением настроек скрипта JS с onLoad на Без переноса в голову

введите здесь описание изображения

person khichar.anil    schedule 28.10.2014
comment
когда я пытался на своей локальной машине, я получаю следующую ошибку. Ошибка: [ng:areq] Аргумент 'personController' не является функцией, стал неопределенным - person UiUx; 28.10.2014
comment
Привет @UiUx, не могли бы вы опубликовать свой локальный код, включая html и js, чтобы я мог помочь вам лучше. - person khichar.anil; 28.10.2014
comment
Спасибо. Это работает, кстати, в новом дизайне скрипта JS вам нужно настроить эту опцию в области javascript в раскрывающемся меню под кнопкой (JavaSctipt + шестеренка). - person Yevgeniy Afanasyev; 21.12.2015

arrow_upward
1
arrow_downward

Вам нужно создать модуль приложения, а затем добавить в него контроллер. В angular все зависит от зависимостей. Во-вторых, вам нужно имя приложения. Базовый учебник находится на их главной странице: https://docs.angularjs.org/tutorial/step_00 Я начал с него, и он у меня отлично работал. Просто выполните все шаги, начиная с шага 1.

person Beri    schedule 28.10.2014
comment
Их учебник очень прост, и вы учитесь маленькими шагами. Это займет у вас около 3 часов. Тогда вам придется искать более продвинутые туториалы и начинать читать документацию :) Angular очень продвинут. - person Beri; 28.10.2014
comment
Привет, Бери, спасибо за ваше время, и я получаю сообщение об ошибке, о которой я упоминал в комментарии выше, пожалуйста, найдите ее и помогите мне. - person UiUx; 28.10.2014

arrow_upward
1
arrow_downward

Это распространенный результат поиска по запросу «Контроллер Angular не работает», поэтому я подумал, что было бы полезно добавить решение, которое устранило мою проблему «Контроллер не работает».

У меня был базовый маршрут с $routeProvider, указывающим на файл контроллера и партиал templateUrl, например:

$routeProvider.when('/', {
    templateUrl: 'partials/home.html',
    controller: 'homePage'
});

У меня было несколько других маршрутов, и все эти контроллеры работали, но мой первый маршрут почему-то не работал. Оказывается, у меня была небольшая логическая ошибка в моем партиале, и это предотвратило запуск ЛЮБОГО кода моего контроллера.

Глупая небольшая ошибка, но я был застигнут врасплох тем, что это была логическая проблема в моем партиале, которая мешала запуску любого кода контроллера. Это заняло намного больше времени, чем я хотел бы признать, потому что проблема была не в моем «JavaScript», хотя ошибки консоли присутствовали. Радости тесно связанного внешнего кода, верно?

person Benjamin Solum    schedule 15.07.2015

arrow_upward
1
arrow_downward

Вы должны ввести функцию как параметр внутри модуля

var app = angular.module('app',[]);
app.controller('personController',function($scope){
  $scope.firstName = 'John';
  $scope.lastName = 'Smith';
});
person latifalbr    schedule 08.09.2016

arrow_upward
1
arrow_downward

добавив np-app="myApp" в любой тег html, например <html ng-app = "myApp">, мой код работает нормально.

person Samreen Quyyum    schedule 26.10.2016
comment
Спасибо тебе, друг. Ваш ответ + Кутьель решил мою проблему - person Jason Krs; 25.03.2018

arrow_upward
0
arrow_downward

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

В документации говорится:

AngularJS applications cannot be nested within each other.

person Yevgeniy Afanasyev    schedule 19.12.2015