Angular UI-路由器使用模板而不是组件
Angular UI-Router works with template but not component
我正在尝试在 angular 1 项目上使用 angular-ui-router。我 运行 遇到的问题是当我指定一个模板时我可以让 angular-ui-router 工作,但是当我指定一个组件时却不能。
例如,这个有效:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
template: '<grocery-list-component></grocery-list-component>',
};
$stateProvider.state(listOfGroceryLists);
};
但是,当我尝试指定组件时,没有任何显示,控制台中也没有给出错误:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
component: 'groceryListComponent',
};
$stateProvider.state(listOfGroceryLists);
};
这是我的 grocery-list.module.js
,它注册了组件和路由:
import angular from 'angular';
import 'angular-resource';
import uiRouter from 'angular-ui-router';
import groceryListComponent from './grocery-list.component';
import groceryListAPIService from './grocery-list.service';
import groceryListRoutes from './grocery-list.routes';
import groceryListDetailComponent from './grocery-list-detail.component';
const GroceryListModule = angular.module('groceryList', [
// Dependencies
'ngResource',
'ui.router',
])
.config(($resourceProvider) => {
$resourceProvider.defaults.stripTrailingSlashes = false;
})
.factory('groceryListAPIService', groceryListAPIService)
.component('groceryListComponent', groceryListComponent)
.component('groceryListDetailComponent', groceryListDetailComponent)
.config(groceryListRoutes);
export default GroceryListModule;
还有我的grocery-list.component.js
:
import template from './grocery-list.template.html';
import groceryListController from './grocery-list.controller';
const groceryListComponent = {
template,
controller: groceryListController,
controllerAs: 'groceryListCtrl',
}
export default groceryListComponent;
还有我的packages.json
:
{
"name": "shopping-list",
"version": "1.0.0",
"description": "An app to keep track of your grocery shopping",
"repository": "https://github.com/thomascothran/shopping_list.git",
"scripts": {
"start": "gulp",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"gulp": "^3.9.1",
"raw-loader": "^0.5.1",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"angular": "^1.5.8",
"angular-resource": "^1.5.8",
"angular-ui-router": "^0.3.1",
"js-cookie": "^2.1.3",
"ramda": "^0.22.1"
}
}
参考这个问题:
根据您的 package.json,您似乎在使用 0.3.x,但这是行不通的。请升级到 1.0.0 并尝试。
component attribute is available from ui-router@1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1
我正在尝试在 angular 1 项目上使用 angular-ui-router。我 运行 遇到的问题是当我指定一个模板时我可以让 angular-ui-router 工作,但是当我指定一个组件时却不能。
例如,这个有效:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
template: '<grocery-list-component></grocery-list-component>',
};
$stateProvider.state(listOfGroceryLists);
};
但是,当我尝试指定组件时,没有任何显示,控制台中也没有给出错误:
var groceryListRoutes = function($stateProvider) {
var listOfGroceryLists = {
name: 'listOfGroceryLists',
url: '/lists',
component: 'groceryListComponent',
};
$stateProvider.state(listOfGroceryLists);
};
这是我的 grocery-list.module.js
,它注册了组件和路由:
import angular from 'angular';
import 'angular-resource';
import uiRouter from 'angular-ui-router';
import groceryListComponent from './grocery-list.component';
import groceryListAPIService from './grocery-list.service';
import groceryListRoutes from './grocery-list.routes';
import groceryListDetailComponent from './grocery-list-detail.component';
const GroceryListModule = angular.module('groceryList', [
// Dependencies
'ngResource',
'ui.router',
])
.config(($resourceProvider) => {
$resourceProvider.defaults.stripTrailingSlashes = false;
})
.factory('groceryListAPIService', groceryListAPIService)
.component('groceryListComponent', groceryListComponent)
.component('groceryListDetailComponent', groceryListDetailComponent)
.config(groceryListRoutes);
export default GroceryListModule;
还有我的grocery-list.component.js
:
import template from './grocery-list.template.html';
import groceryListController from './grocery-list.controller';
const groceryListComponent = {
template,
controller: groceryListController,
controllerAs: 'groceryListCtrl',
}
export default groceryListComponent;
还有我的packages.json
:
{
"name": "shopping-list",
"version": "1.0.0",
"description": "An app to keep track of your grocery shopping",
"repository": "https://github.com/thomascothran/shopping_list.git",
"scripts": {
"start": "gulp",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"gulp": "^3.9.1",
"raw-loader": "^0.5.1",
"webpack": "^1.13.2",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"angular": "^1.5.8",
"angular-resource": "^1.5.8",
"angular-ui-router": "^0.3.1",
"js-cookie": "^2.1.3",
"ramda": "^0.22.1"
}
}
参考这个问题:
根据您的 package.json,您似乎在使用 0.3.x,但这是行不通的。请升级到 1.0.0 并尝试。
component attribute is available from ui-router@1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1