Html angularjs ui路由器代码中有一些内容

我正在关注Angularjs的MVA简介。我有两个问题。第一有没有更好的教程网站，你会建议

二是使用ui路由器。我已经看了好几个小时了；我一直在寻找答案，但就是想不出哪里可能是错的。一切看起来都像教程；图书馆从那里消失了；在我用ui路由器（以及所有带有ui sref的href）切换ng路由之前，一切都正常工作。我认为问题出在mainApp模块中，因为页面是白色的（当我与mainPageModule发生问题时，导航栏会显示出来，但它会在顶部列出{{event.something[0]}）。这让我快发疯了

index.html

mainPageModule.js

(function(){

 angular.module('mainPageModule', [])
.factory('SiteName', [function () {


return {
    title:"Website Name"
};
}])
.config([function () {
console.log("Event Module:: config");
}])
.run([function () {
console.log("Event Module::running");
}])
.controller('navigationbarController', ['$scope', 'SiteName',function                           ($scope,SiteName)
     {    this.menu=[
    {
        name:"Website Name",
        href:"home.html"
    },
    {
        name:"Your Area",
        href:"area.html"
    },
    {
        name:"Personal",
        href:"personal.html"
    },
{
  name:"Contact",
  href:"contact.html"
}
]

this.index = 0;

this.setIndex=function(val)
{
    this.index = val;
    console.log("called")
}

this.getIndex=function(){
    return(this.index);
}

}])



})();

header.html

  <nav  ng-controller="navigationbarController as event" class="navbar     navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"    data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{{event.title}}</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li  ng-click="setIndex(0)" ng-class="(index==0) ? 'active' : ''">
              <a ui.sref="home">{{event.menu[0].name}}</a>
            </li>
            <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' : ''">
                <a ui.sref="area">{{event.menu[1].name}}</a>
            </li>
            <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' : ''">
                <a ui.sref="personal">{{event.menu[2].name}}</a>
            </li>
             <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' :  ''">
                <a ui.sref="contact">{{event.menu[3].name}}</a>
            </li>

        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

切换导航


{{event.menu[0].name}

根据@TOM的建议，您需要在加载

angular.js

之后立即加载

angular ui router

，然后才能加载

mainApp.js

您需要在所有位置替换all

ui sref

指令

---

ui sref=“home”

而不是

ui.sref=“home”

对于任何其他有此问题的人来说，根本缺陷是页面底部脚本的顺序。这很重要。其次，我的脚本错误是在mainApp中的url后面没有包含逗号。接下来，我用UISREF替换了所有的ui.sref，它确实起了作用

---

谢谢你的帮助，潘卡帕卡和汤姆很棒。如果其他人开始运行时遇到这个问题，请检查控制台，它会告诉您出了什么问题

在包含

ui.router.js

脚本引用之前，先包含

mainApp.js

脚本引用，然后再切换这两个脚本引用。如果您仍然有问题，控制台中有错误吗？我切换了它们，它不工作。是的，控制台中有错误。我不知道如何读取它们。SyntaxError:missing}在属性列表mainApp.js:17:4“angular object”对象{element:R（），bootstrap:sc（），copy:Ea（），extend:z（），equals:fa（），forEach:s（），injector:Ob（），noop:H（），bind:nc（），toJson:$a（），20多个…}汤姆，你帮我解决了。我从来没想过要看控制台（我是个笨蛋）。在url的后面没有逗号。谢谢汤姆，你教了一个人钓鱼

(function(){

 angular.module('mainPageModule', [])
.factory('SiteName', [function () {


return {
    title:"Website Name"
};
}])
.config([function () {
console.log("Event Module:: config");
}])
.run([function () {
console.log("Event Module::running");
}])
.controller('navigationbarController', ['$scope', 'SiteName',function                           ($scope,SiteName)
     {    this.menu=[
    {
        name:"Website Name",
        href:"home.html"
    },
    {
        name:"Your Area",
        href:"area.html"
    },
    {
        name:"Personal",
        href:"personal.html"
    },
{
  name:"Contact",
  href:"contact.html"
}
]

this.index = 0;

this.setIndex=function(val)
{
    this.index = val;
    console.log("called")
}

this.getIndex=function(){
    return(this.index);
}

}])



})();

  <nav  ng-controller="navigationbarController as event" class="navbar     navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"    data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{{event.title}}</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li  ng-click="setIndex(0)" ng-class="(index==0) ? 'active' : ''">
              <a ui.sref="home">{{event.menu[0].name}}</a>
            </li>
            <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' : ''">
                <a ui.sref="area">{{event.menu[1].name}}</a>
            </li>
            <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' : ''">
                <a ui.sref="personal">{{event.menu[2].name}}</a>
            </li>
             <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' :  ''">
                <a ui.sref="contact">{{event.menu[3].name}}</a>
            </li>

        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>