Question

您好我在使用状态中的组件时遇到的问题很少。所以我尝试使用模板进行ui-routing，并且工作正常。但是当我尝试将其路由到组件时，我得到了这个错误。

在我的app.js

中

angular.module('app', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('home', {
                url: '/home',
                component: 'home'
        });
}]);

和我的index.html

 <html ng-app="app">
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
        <script src="Content/lib/angularjs/Chart.js"></script>
        <script src="Content/lib/angularjs/angular-chart.js"></script>
        <script src="Content/app/components/home.js"></script>
        <script src="Content/app/app.js"></script>

        <link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
        <link rel="stylesheet" href="Content/app/components/redditAnalyzer.css">

    </head>
    <body>
        <a ui-sref="home">click me</a>
        <div ui-view></div>

    </body>
    </html>

和我的home.html

<body>

    "some stuffs"

</body>

和我的home.js

angular.module('app', ['chart.js'])
    .component('home', {
        templateUrl: 'Content/app/components/home.html',
        bindings: {},
        controller: ['$http',
            function ($http) {
                var vm = this;

"some more stuffs"

            }]
    });

但是当我点击我的index.html中点击我时，我收到此错误

Error: [$injector:unpr] http://errors.angularjs.org/1.6.6/$injector/unpr?p0=homeDirectiveProvider%20%3C-%20homeDirective
    at angular.js:88
    at angular.js:4826
    at Object.d [as get] (angular.js:4981)
    at angular.js:4831
    at Object.d [as get] (angular.js:4981)
    at getComponentBindings (angular-ui-router.js:sourcemap:8144)
    at TemplateFactory.makeComponentTemplate (angular-ui-router.js:sourcemap:8135)
    at Ng1ViewConfig.getTemplate (angular-ui-router.js:sourcemap:7938)
    at Object.<anonymous> (angular-ui-router.js:sourcemap:9719)
    at angular.js:1385 "<div ui-view="" class="ng-scope">"

我在做错了什么？谢谢！

Answer 1

您正在注册名为"app"的模块两次。具有相同名称的第二个模块将覆盖第一个

当它们具有相同名称时，仅在其中一个上使用依赖项注入数组。当没有依赖数组参数时，它充当getter而不是setter

变化：

// register new module with dependencies
angular.module('app', ['ui.router']).config...
// register new module with dependencies ... but will overwrite the first due to same name
angular.module('app', ['chart.js']).component...

要：

// register new module with dependencies
angular.module('app', ['ui.router','chart.js']).config...
// references an existing module to add component to
angular.module('app').component...

同样切换<script>的顺序，以便在您尝试向其添加组件之前模块存在

<!-- Module created in this file -->
<script src="Content/app/app.js"></script>
<!-- subsequent files can then access existing module -->
<script src="Content/app/components/home.js"></script>

Angularjs组件状态

1 个答案: