Форум

dozer · #1 (**permalink**) 06.05.2015, 16:43

не работает такая конструкция в файле controllers.js

var phonecatApp = angular.module("phonecatApp", []);
phonecatApp.controller = ("PhonelistCtrl", function ($scope) {
 $scope.phones [{
 	'name' : 'samsung',
 	'snippet' : 'This phone look graet'},
 	{'name' : 'Motorola',
 	'snippet' : 'This is great telephone' },
 	{'name' : 'Motorola XOOM',
 	'snippet' : 'Very cool device'}
];
});

В индексе:

Код:

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhonelistCtrl">

  <ul>
    <li>
      <span>{{phones[0].name}}</span>
      <p>
        {{phones[0].snippet}}
      </p>
    </li>
    <li>
      <span>{{phones[1].name}}</span>
      <p>
        {{phones[1].snippet}}
      </p>
    </li>
  </ul>
	
	

</body>
</html>

В консоли вываливает:

Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
Error: [$injector:nomod] Module 'phonecatApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=phonecatApp
at REGEX_STRING_REGEXP (http://localhost:8000/app/bower_comp...gular.js:63:12)
at http://localhost:8000/app/bower_comp...lar.js:1774:17
at ensure (http://localhost:8000/app/bower_comp...lar.js:1698:38)
at module (http://localhost:8000/app/bower_comp...lar.js:1772:14)
at http://localhost:8000/app/bower_comp...lar.js:4115:22
at forEach (http://localhost:8000/app/bower_comp...ular.js:323:20)
at loadModules (http://localhost:8000/app/bower_comp...ular.js:4099:5)
at createInjector (http://localhost:8000/app/bower_comp...lar.js:4025:11)
at doBootstrap (http://localhost:8000/app/bower_comp...lar.js:1452:20)
at bootstrap (http://localhost:8000/app/bower_comp...lar.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=phonecatApp&p1=Err…calhost%3A8000%2F app%2Fbower_components%2Fangular%2Fangular.js%3A14 73%3A12)

Никак не могу побороть! В чем может быть проблема?

igormog · #2 (**permalink**) 06.05.2015, 20:27

Судя по строке bower_components в URL'ах, ваш проект должен собираться на сервере с помощью bower, похоже он не установлен или не запущен

nerv_ · #3 (**permalink**) 06.05.2015, 22:47

phonecatApp.controller("PhonelistCtrl", function ($scope) {

ksa · #4 (**permalink**) 07.05.2015, 09:53

Сообщение от nerv_

phonecatApp.controller("PhonelistCtrl", function ($scope) {}

И не только это...

Похоже у dozer вообще проблема с синтаксисом JS.

Вот рабочий вариант

<!DOCTYPE html>
<html ng-app='phonecatApp'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var phonecatApp = angular.module("phonecatApp", []);
phonecatApp.controller("PhonelistCtrl", function ($scope) {
	$scope.phones=[{
		'name' : 'samsung',
		'snippet' : 'This phone look graet'},
		{'name' : 'Motorola',
		'snippet' : 'This is great telephone' },
		{'name' : 'Motorola XOOM',
		'snippet' : 'Very cool device'}
	];
});
</script>
</head>
<body>
<body ng-controller="PhonelistCtrl">
  <ul>
    <li>
      <span>{{phones[0].name}}</span>
      <p>
        {{phones[0].snippet}}
      </p>
    </li>
    <li>
      <span>{{phones[1].name}}</span>
      <p>
        {{phones[1].snippet}}
      </p>
    </li>
  </ul>
</body>
</html>

Ищи различия...

Форум

Справочник

Discord чат

Курсы javascript