Angularjs: Не удалось запустить код

Я новичок в angularjs, и это файлы, которые я создал. Я пробовал свои силы, но не смог запустить приведенный выше код.Angularjs: Не удалось запустить код

MYAPP (Папка)

- app.js 
- controller.js 
- index.html 
- phone-detail.html 
- phone-list.html

На домашней странице есть телефон-list.html и при нажатии на телефон, маршруты к телефону-detail.html странице.

app.js

var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider']); 

phonecatApp.config(['$routeProvider', 
    function($routeProvider) { 

    $routeProvider. 
     when('/phones', { 
     templateUrl: 'phone-list.html', 
     controller: 'PhoneListCtrl' 
     }). 
     when('/phones/:phoneId', { 
     templateUrl: 'phone-detail.html', 
     controller: 'PhoneDetailCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/phones' 
     }); 
    }]);

controller.js

var phonecatControllers = angular.module('phonecatControllers', []); 
phonecatControllers.controller('PhoneListCtrl', ['$scope', 
function ($scope) { 

$scope.phones = 
[{"Device":"ipad mini","Model":"MD528LL/A"}, 
{"Device":"ipadair","Model":"MD785LL/A"}] 
}]); 

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 
function($scope, $routeParams) { 
$scope.Model = $routeParams.Model; 
}]);

index.html

<!doctype html> 
<html lang="en" ng-app="phonecatApp"> 
<head> 

<!-- Angular Material CSS now available via Google CDN; version 0.10 used here --> 

<!-- Angular Material Dependencies --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
<script src="controller.js"></script> 
<script src="app.js"></script> 

</head> 

<body> 

<div ng-view> 

</div> 

</body> 
</html>

телефон-list.html

<div class="mainContent" style="margin:5%"> 

<li ng-repeat="phone in phones" style="float:left; margin:40px" > 

<md-content style="padding:0px; overflow-y: hidden"> 

<md-card style="width:300px; height:300px; margin:0px" > 

<img ng-src="{{phone.image}}" class="md-card-image" style="height:40%" alt="image caption" > 

<md-card-content style="padding:0; height:25%"> 

<h6 class="md-title">{{phone.Device}}</h6> <hr style="opacity:0.5"> 

</md-card-content> 

<md-card-footer class="md-actions" layout="row" layout-align="center" style="padding:0"> 

<md-button class="md-raised">Action 1</md-button> 

<md-button class="md-raised">Action 2</md-button> 

</md-card-footer> 

</md-card> 

</md-content> 

</li> 

</div>

телефон-detail.html

{{}} phone.Device

источник

2015-07-22 Rohit

Вы нашли в журнале консоли ошибки? – Rob

Непринятая ошибка: [$ injector: modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=phonecatApp&p1=Err...gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular .min.js% 3A17% 3A381) – Rohit

Это то, что я получаю. – Rohit

Вы должны вводить ngRoute модуль вместо $routeProvider в:

var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider'])

Также убедитесь, что вы включили источники угловое разрешение route.js, поскольку угловая маршрутизация отделена от угловых источников.

Edit: Из index.html вас в курсе я вижу, вы включили угловой route.js но это, кажется, вам не хватает сценарий углового материала, так что не забудьте добавить:

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

источник

2015-07-22 20:22:46

Не совсем. Он показывает ту же ошибку. – Rohit

Что сказал Майкл, но и удаление ngMaterial избавляется от этой ошибки. – Rob

Возможно, вы забыли * угловой материал *? На домашней странице я вижу, что вы связали css, но не скрипт –

Angularjs: Не удалось запустить код

ответ

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