个人中心
gpt4 book ai didi

javascript - Angular UI-Router 组件无法正常工作

转载 作者：行者123 更新时间：2023-12-01 03:58:40 25 4
gpt4 key购买 nike

我有一个简单的项目，它使用 ui-router 和组件。对于“hello”组件，如果我单击“hello”链接，则不会发生任何事情；如果我单击“关于”链接，则会显示 View ，因为它不使用组件。有人可以告诉我为什么“hello”组件不起作用吗？我尝试了不同版本的 angular-ui-router.js，但没有解决问题。谢谢。

index.html:

<!DOCTYPE html>
<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>  -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script> 
 <script src=https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"> </script> 
 <script src="js/hello-component.js"></script> 
 <script src="js/hellogalaxy-module.js"></script>

 <style>.active { color: red; font-weight: bold; }</style>
</head>
 <body ng-app="hellogalaxy">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a> 
<ui-view></ui-view>
</body>
 </html>

hellogalaxy-module.js:

 var myApp = angular.module('hellogalaxy', ['ui.router']);
 myApp.config(function($stateProvider) {
 var helloState = {
       name: 'hello',
       url: '/hello', 
       component: 'hello'
 };

 var aboutState = {
       name: 'about',
       url: '/about',
       template: '<h3>Its the UI-Router hello world app!</h3>'
 } 
 $stateProvider.state(helloState);
 $stateProvider.state(aboutState);
 });

hello-component.js:

 angular.module('hellogalaxy').component('hello', 
 {
     template: '<h3>{{$ctrl.greeting}} Solar System!</h3>'            
     controller: function() {  this.greeting = 'hello'}
 })

最佳答案

您应该先加载模块，然后加载组件，将顺序更改为，

 <script src="js/hellogalaxy-module.js"></script>
<script src="js/hello-component.js"></script>

关于javascript - Angular UI-Router 组件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42400502/

25 4 0
文章推荐： javascript - 获取 'Access-Control-Allow-Origin' header 错误
文章推荐： sed - 如何使用sed替换ini文件中的值？
文章推荐： cakephp - saveAll() 使用 CakePHP 2.3.1 失败
文章推荐： javascript - 在逗号或空格上匹配正则表达式，但不能同时匹配两者
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com