UI视图未在AngularJS教程中呈现
[英]UI-view not rendering in AngularJS tutorial
问题描述
I am trying to follow a tutorial from Dunebook. 
我正在尝试遵循Dunebook的教程。 https://www.dunebook.com/create-an-e-commerce-site-with-angularjs/4/ https://www.dunebook.com/create-an-e-commerce-site-with-angularjs/4/
I've gotten stuck as the UI-view is not rendering (I am checking it is rendering as specified in the page I link to right above "Adding Animations to the view transitions"). 由于UI视图未渲染，我被卡住了（我正在检查它是否按照我链接到的页面上的指定添加了“在视图过渡中添加动画”）。 I've looked this over a few times and i'm not sure what I am doing wrong... 我已经看了好几次了，但不确定自己在做什么错...
The code. 编码。
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 索引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/xxx/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 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 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 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 products.details.html
<p class="title">{{id}}</p> <h1>{{product.title}}</h1> <p>{{product.description}}</p> <h3>{{product.price|currency}}</h3>
It all appears fairly identical to the tutorial. 看起来与教程完全相同。 I'm confused and feeling pretty dumb. 我很困惑，感觉很傻。
1 个解决方案
解决方案1
1 已采纳 2016-09-11 11:37:44
If this is your exact code, you are missing a . 如果这是您的确切代码，则说明您缺少. between your module definition and calling config . 在模块定义和调用config 。
angular.module('myApp', [...])
.config(['$stateProvider',
function($stateProvider) {
...
}
])
instead of 代替
angular.module('myApp', [...])
config(['$stateProvider',
function($stateProvider) {
...
}
])
It actually makes sense that this is the issue, as your ui-view is not working would be caused by the lack of state definitions. 实际上这是有道理的，因为您的ui视图不起作用将由缺少状态定义引起。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.