Angularjs: невозможно запустить код

0

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

MYAPP (Папка)

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

На главной странице находится phone-list.html и при нажатии на телефонные маршруты на страницу phone 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

  • 0
    Вы смотрели в журнале консоли ошибки?
  • 0
    Необработанная ошибка: [$ инжектор: modulerr] errors.angularjs.org/1.3.15/$injector/…… gleapis.com% 2Fajax% 2Flibs% 2Fangularjs% 2F1.3.15% 2Fangular.min.js% 3A17% 3A381)
Показать ещё 1 комментарий
Теги:
model-view-controller

1 ответ

0

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
Поделиться
  • 0
    На самом деле, нет. Это показывает ту же ошибку.
  • 0
    То, что сказал Майкл, но также удаление ngMaterial избавляет от ошибки.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню