Question

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

Answer 1

您应该在{/ p>中注入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>

Angularjs：无法运行代码

1 个答案: