0
私はDunebookからのチュートリアルに従おうとしています。私は、UIビューとして立ち往生得ている https://www.dunebook.com/create-an-e-commerce-site-with-angularjs/4/AngularJSチュートリアルで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', {
\t url:'/add',
templateUrl: 'partials/add-products.html',
controller: 'AddProductsCtrl'
});
$stateProvider.state('category', {
\t url:'/:category',
templateUrl: 'partials/products.html',
controller: 'ProductsCtrl'
});
\t $stateProvider.state('category.products', {
\t 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>これは、すべてのチュートリアルとかなり同じ表示されます。私は混乱していて、とても馬鹿だと感じています。
JSコンソールにエラーがありますか？あなたはそれらを投稿できますか？ –
これは省略された依存関係がスキップされるという警告を出すだけです... fsevents 0.2.1 – Benjamin