Question

我正在尝试遵循Dunebook的教程。 https://www.dunebook.com/create-an-e-commerce-site-with-angularjs/4/

我因为UI视图没有渲染而陷入困境（我正在检查它是否正如我在链接到“向视图过渡添加动画”的页面中指定的那样进行渲染）。我已经看过几次，我不确定我做错了什么......

代码。

Bower.Json

{
  "name": "angular-seed",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.2.x",
    "angular-ui-router": "",
    "angular-animate": "1.2.x",
    "angular-facebook": "",
    "angular-loader": "1.2.x",
    "angular-mocks": "~1.2.x",
    "html5-boilerplate": "~4.3.0"
  }
}

的index.html

<!DOCTYPE html>

<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AngularJS tutorial</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/simplex/bootstrap.min.css"/>
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <div class="container">
      <a class="navbar-brand" href="/">Garage Commerce</a>
        <ul class="nav navbar-nav">
    <li><a href="#/toys">Toys</a></li>
    <li><a href="#/books">Books</a></li>
  </ul>
  </nav>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
<div class="container-fluid">
<div  ui-view></div>
</div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

app.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ui.router',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])
config(['$stateProvider',
    function($stateProvider) {
        $stateProvider.state('add', {
        	url:'/add',
            templateUrl: 'partials/add-products.html',
            controller: 'AddProductsCtrl'
        });
        $stateProvider.state('category', {
        	url:'/:category',
            templateUrl: 'partials/products.html',
            controller: 'ProductsCtrl'
        });
       	$stateProvider.state('category.products', {
        	url:'/:id',
            templateUrl: 'partials/products.details.html',
            controller: 'ProductDetailsCtrl'
        });
}
])

controllers.js

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).controller('ProductsCtrl', ['$scope', '$stateParams',
        function($scope, $stateParams) {
            $scope.category = $stateParams.category
            $scope.productsListing = [{
                    product_id: '123',
                    title: ' Baby Rattles',
                    price: 2,
                    userName: 'John Doe'
                }, {
                    product_id: '456',
                    title: ' Kiddy Laptop',
                    price: 12,
                    userName: 'Sandy Peters'
                }

            ]

        }
    ])
    .controller('ProductDetailsCtrl', ['$scope', '$stateParams',function($scope, $stateParams) {
            $scope.id = $stateParams.id;
            $scope.product = {
                'title': 'Kiddy Laptop',
                'description': 'lorem lipsum do re me.',
                'price': 12,
                'userName': 'Sandy Peters'

            }

        }
    ]);

products.html放在

<h1>{{category}}</h1>
<hr/>
<!-- 1st Column -->
<div class="col-md-5">
   <div class="row-fluid listing sidebar" >
   <div class="listing" ng-repeat="product in productsListing">


   <h2><a ng-href="#/{{category%20+'/'+product.product_id}}">{{product.title}}</a> </h2>

   <h5>{{product.price |currency}}</h5>

   <p><i>-by:{{product.userName}}</i></p>
   </div>
   </div>


</div>
</div>

<!-- 2nd Column -->  
<div class="col-md-7">
   <div class="slide" ui-view></div>
</div>

products.details.html

<p class="title">{{id}}</p>
<h1>{{product.title}}</h1>
<p>{{product.description}}</p>
<h3>{{product.price|currency}}</h3>

这一切看起来与教程完全相同。我感到很困惑，感觉非常愚蠢。

Answer 1

如果这是您的确切代码，则表示您在模块定义与调用.之间缺少config。

angular.module('myApp', [...])
.config(['$stateProvider',
    function($stateProvider) {
        ...
    }
])

而不是

angular.module('myApp', [...])
config(['$stateProvider',
    function($stateProvider) {
        ...
    }
])

这实际上是有道理的，因为你的ui-view无法正常工作会因缺乏状态定义而引起。

在AngularJS教程

1 个答案: