Как получить доступ к контроллеру в Angular.js

Я создаю приложение, использующее Angular.js, но мой файл index.html, похоже, не имеет доступа к моему файлу controller.js. Браузер выводит переменные в фигурные скобки следующим образом: {{friend.name}}, {{}} friend.numberКак получить доступ к контроллеру в Angular.js

Вот мой HTML-файл:

<!DOCTYPE HTML> 
<html ng-app> 
    <head> 
     <title>Angular Directives</title> 
    </head> 

    <body> 
     <div class="container" ng-controller="demoController"> 
      <h1>Angular Directives</h1> 
      <h2>ng-model example: two-way binding and $scope</h2> 
      <h3>Name</h3> 
      <input type="text" ng-model="name"> 
      <br /> 
      Hello, {{name}}! 
      <h2>ng-repeat example</h2> 
      <ul> 
       <li ng-repeat="friend in friends">{{friend.name}}, {{friend.number}}</li> 
      </ul> 
     </div> 
    </body> 

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

Вот мой файл controller.js:

var demoController = function($scope) { 
    $scope.name = "John Doe"; 

    var friend1 = { 
     name: "Tim Thompson", 
     number: "111-111-1111" 
    }; 

    var friend2 = { 
     name: "Sally Smith", 
     number: "222-222-2222" 
    }; 

    var friend3 = { 
     name: "Billy Bob", 
     number: "333-333-3333" 
    }; 

    var friends = [friend1, friend2, friend3]; 
    $scope.friends = friends; 
}

источник

2015-07-11 Kristine Rooks

Какую угловую версию вы используете? Или любая консольная ошибка? – Vineet

в ng-app введите имя модуля ur –

Необходимо включить его в качестве модуля и указать модуль в коде. Так что-то вроде этого.

angular.module("exampleApp", []) 
.controller("demoController", function($scope) { 
$scope.name = "John Doe"; 

var friend1 = { 
    name: "Tim Thompson", 
    number: "111-111-1111" 
}; 

var friend2 = { 
    name: "Sally Smith", 
    number: "222-222-2222" 
}; 

var friend3 = { 
    name: "Billy Bob", 
    number: "333-333-3333" 
}; 

var friends = [friend1, friend2, friend3]; 
$scope.friends = friends;

});

Затем установите ng-app="exampleApp", и ваш код должен работать.

Редактировать: Я только понял, что мое первоначальное объяснение могло быть неясным. Я имел в виду, что угловая система имеет модульную систему. Модули - это то, где вы подключаете контроллеры. Поэтому, когда вы добавляете ng-app="exampleApp", угловые будут смотреть на это и видеть, что вы хотите вытащить контроллеры из модуля exampleApp. Поэтому вам нужно указать, что это модуль, который вы хотели использовать в своем коде, и что вы подключили контроллер demoController к этому конкретному модулю.

источник

2015-07-11 19:15:34 OceansOnPluto

Для каждого приложения с угловым пространством требуется, по меньшей мере, один модуль, к которому будут подключены контроллеры, службы, фабрики и директивы и т. Д. Кажется, вам это не хватает, поэтому ваш контроллер не работает.

Сначала нужно создать модуль, как это:

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

[], где вы можете вводить другие модули для вашего приложения. Например, ngRoute, ngAnimate или ваши собственные вспомогательные модули.

После создания модуля вы должны сказать приложение, какой модуль использовать, вы делаете это с помощью ngApp директивы, как правило, устанавливается на html тег:

<html ng-app="myApp">

Remember, ngApp принимает имя вашего модуля, а не переменная, в которой он хранится. Таким образом, это будет myApp, а не myModule.

Затем вам необходимо подключить контроллер к этому модулю, который вы делаете простой настройка:

myModule.demoController = function($scope) { 
    $scope.name = "John Doe"; 

    var friend1 = { 
    name: "Tim Thompson", 
    number: "111-111-1111" 
    }; 

    var friend2 = { 
    name: "Sally Smith", 
    number: "222-222-2222" 
    }; 

    var friend3 = { 
    name: "Billy Bob", 
    number: "333-333-3333" 
    }; 

    var friends = [friend1, friend2, friend3]; 
    $scope.friends = friends; 
}

В качестве дополнительного наконечника он также рекомендуется использовать аннотацию массива поэтому приложение не ломается на минификация. Таким образом изменить ваш контроллер выглядеть следующим образом:

myModule.demoController(['$scope', function($scope) { 
    $scope.name = "John Doe"; 

    var friend1 = { 
    name: "Tim Thompson", 
    number: "111-111-1111" 
    }; 

    var friend2 = { 
    name: "Sally Smith", 
    number: "222-222-2222" 
    }; 

    var friend3 = { 
    name: "Billy Bob", 
    number: "333-333-3333" 
    }; 

    var friends = [friend1, friend2, friend3]; 
    $scope.friends = friends; 
}]);

Теперь вы будете вводить свою зависимость в качестве параметров функции и в массиве внутри '' знаков.

Теперь вы можете начать писать вещи в своем контроллере, и они будут видны на вашей странице.

источник

2015-07-11 19:22:29 Chrillewoodz

Вы должны привязать контроллер к своему приложению/модулю. Также не похоже, что вы создали приложение Angular (documentation).

Возможно, вам нужно создать еще один файл .js, следующий за следующим форматом, чтобы создать приложение. Обратите внимание, что вы также можете сделать это в том же файле, что и контроллер, непосредственно перед созданием контроллера. Пустые квадратные скобки в конце символизируют любые дополнительные угловые зависимости, которые вы хотите ввести, например, дизайн углового материала, но поскольку он не похож на используемый вами код, мы оставим его пустым.

var app = angular.module("MyAppName", []);

Затем вам нужно изменить код контроллера, чтобы связать контроллер к вашему угловому модулю, поместив этот код после текущего кода функции контроллера. (documentation).

app.controller("demoController", demoController)

Наконец, чтобы сделать вашу страницу HTML загрузить Угловой модуль и контроллер, необходимо положить ng-app="MyAppName" тег в коде на одном из родительских элементов demoController. Обычно это помещается на открытии <html> или <body> тег. Таким образом, вы можете изменить свой тег тега открытия, чтобы он соответствовал следующему:

<body ng-app="MyAppName">

источник

2015-07-11 19:22:50 andrewgu

Как получить доступ к контроллеру в Angular.js

ответ

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