Question

我正在开发一个Angular应用，我尝试将UI-Router与组件路由一起使用。

这是我的app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
    'ui.router',
]).config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.hashPrefix('!');

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('cahome', {
            url: '/home',
            templateUrl: 'views/home.html'
        })
        .state('catest', {
            url: '/test',
            templateUrl: 'views/test.html'
        })
        .state('caprototype', {
            url: 'prototype',
            component: 'caPrototype', // The component's name
            resolve: {
              users: function() {
                return 'utenti';
              }
            }
        });

}]);

angular.module('myApp').run(function ($rootScope) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
});

这是我的组件文件：

/**
 * Created by firegloves on 05/06/17.
 */

angular.module('myApp')

    .component('caPrototype', {

        // bindings
        bindings: {
            users: '='
        },

        // controller
        controller: ['$scope', function ($scope) {

            console.log('*** prototype');
        }],

        // controller as
        controllerAs: 'prototypeCtrl',

        // templateUrl: 'views/ca-prototype.html',
        template: '<h3>PROTOTYPE TEMPLATE IN LINE</h3>'
    });

这是我的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>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>

    <a ui-sref="cahome">Home</a>
    <a ui-sref="catest">Test</a>
    <a ui-sref="caprototype">Prototype</a>


  <!--[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 ui-view></div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
  <script src="components/ca-prototype/ca-prototype.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

如果我导航到状态cahome或catest一切顺利，但如果我导航到我的caPrototype状态，我可以在控制台日志中读取控制器输出，但状态仍然（或返回）到家庭默认状态。

有人有帮助吗？

无法在Angular UI-Router中加载组件模板

0 个答案: