Aiuto nella programmazione, risposte alle domande / Angularjs / Stato componente Angularjs - angularjs, angolare-ui-router, componenti angolari

Stato componente Angularjs - angularjs, angolare-ui-router, componenti angolari

Ciao ho poche domande sull'utilizzo dei componenti nello stato. Così ho provato a fare ui-routing usando i template e funziona bene. ma invece quando provo a indirizzarlo a un componente, ottengo questo errore.

nella mia app.js

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

e nel mio 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>

e nella mia home.html

<body>

"some stuffs"

</body>

e nella mia 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"

}]
});

ma quando clicco su cliccami nel mio index.html, ottengo questo errore

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">"

Che cosa sto facendo di sbagliato? grazie!

risposte:

1 per risposta № 1

Stai registrando il modulo chiamato "app" due volte. Un secondo modulo con lo stesso nome sovrascriverà il primo

Utilizzare solo l'array di dipendenze injection su uno di essi quando hanno lo stesso nome. Quando non esiste un argomento dell'array di dipendenza, esso funge da getter non setter

Modificare:

// 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...

Cambia anche l'ordine di <script> quindi il modulo esiste prima di provare ad aggiungere un componente

<!-- 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>