javascript - change - ui router example

Angular UI-Router funciona con plantilla pero no componente

Question

Estoy intentando usar angular-ui-router en un proyecto angular 1. El problema al que me estoy enfrentando es que puedo hacer que el router angular ui funcione cuando especifico una plantilla, pero no cuando especifico un componente.

Por ejemplo, esto funciona:

var groceryListRoutes = function($stateProvider) {
    var listOfGroceryLists = {
        name: ''listOfGroceryLists'',
        url: ''/lists'',
        template: ''<grocery-list-component></grocery-list-component>'',
    };
    $stateProvider.state(listOfGroceryLists);
};

Sin embargo, cuando intento especificar el componente, no aparece nada y no se da ningún error en la consola:

var groceryListRoutes = function($stateProvider) {
    var listOfGroceryLists = {
        name: ''listOfGroceryLists'',
        url: ''/lists'',
        component: ''groceryListComponent'',
    };
    $stateProvider.state(listOfGroceryLists);
};

Aquí está mi lista grocery-list.module.js , que registra el componente y las rutas:

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;

Y mi 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;

Y mi 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"
  }
}

Answer 1

Consulte esta pregunta: angular - UI.Router no carga el componente

Parece que está usando 0.3.x según su paquete. Json, que no funcionará. Actualiza a 1.0.0 e intenta por favor.

componente atributo está disponible desde [email protected] (ver aquí y en CHANGELOG.MD - se agregó en 1.0.0-aplpha) por lo que no está disponible 0.3.1