Angularjs 组件状态

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 中点击 click me 时，我得到了这个错误

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 组件状态

Angularjs component state

angularjs

angular-ui-router

angular-components