Angularjs：无法运行代码答案

【问题标题】：Angularjs: Unable to run the codeAngularjs：无法运行代码
【发布时间】：2015-07-22 20:14:19
【问题描述】：

我是 angularjs 的新手，这些是我创建的文件。我已经尽力了，但无法运行上面的代码。

我的应用程序（文件夹）

- 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>

电话列表.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>

电话详细信息.html

【问题讨论】：

您是否在控制台日志中查找错误？
未捕获的错误：[$injector:modulerr] errors.angularjs.org/1.3.15/$injector/…...gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)
这就是我得到的。

标签： javascript html angularjs model-view-controller

【解决方案1】：

你应该注入ngRoute模块而不是$routeProvider：

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

还要确保包含 angular-route.js 的来源，因为角度路由与角度来源是分开的。

编辑：从您发布的 index.html 中我看到您包含 angular-route.js 但您似乎缺少脚本angular-material，所以一定要加上：

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

【讨论】：

迈克尔所说的，但也删除 ngMaterial 消除了错误。
也许你忘记了 angular-material ？在主页中，我看到您链接了 css 但没有脚本
编辑了答案以添加缺少的 angular-material 脚本包含。
XMLHttpRequest 无法加载文件：///Users/rohitborade/Desktop/latest/phone-list.html。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。
我的意思是..我不是从本地主机运行它。只需在浏览器中打开 index.html 文件。这样跑可以吗。