Question

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

其次是使用ui-router。我已经看了几个小时;去寻找答案，只是找不到可能出错的地方。一切看起来像教程;图书馆脱离了它;一切都在进行，直到我用ui-router（以及ui-sref的所有href）切换ng-route。我认为问题出在mainApp模块中，因为页面是白色的（当我遇到导航栏会出现的mainPageModule问题但是它会在顶部列出{{event.something [0]}}）。这真让我抓狂。

的index.html

<div ng-include src="'app/event/directives/header.html'"></div>

  <div class="container">
    <ui-view></ui-view>
  </div>



<script src="./app/angular.min.js"></script>
<script src="./app/mainApp.js"></script>
<script src="./app/ui.router.js"></script>

<script src="./app/event/mainpageModule.js"></script>
<script type="text/javascript">
console.log("angular object",angular);
</script>
</body>

mainApp.js

angular.module('mainApp', ['mainPageModule','ui.router'])
.config(['$urlRouterProvider','$stateProvider',
    function ($urlRouterProvider, $stateProvider) {
        $stateProvider
        .state("home", {
            url: "/home",
            templateUrl: 'main.html'
        })
        .state("area", {
            url: "/area",
            templateUrl: "area.html"
        })
        .state("personal", {
            url: "/personal"
            templateUrl: "personal.html"
        })
        .state("contact", {
            url: "/contact"
            templateUrl: "contact.html"
        })
        $urlRouterProvider.otherwise('','/home')

      }])
.run([function () {
/* Run is when the app gets kicked off*/
console.log("Run hook");
}])

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>

Answer 1

根据@TOM的建议，您需要在加载angular-ui-router之后立即加载angular.js，之后您可以加载mainApp.js。

您需要在所有地方替换所有ui-sref指令。

ui-sref="home"代替ui.sref="home"

Answer 2

对于遇到此问题的其他人来说，根本的缺陷是页面底部脚本的顺序。这很重要。其次，我的脚本错误不包括在mainApp中的url之后的逗号。继续前进，我用ui-sref替换了所有的ui.sref，它确实有效。

感谢您的帮助，pankajparkar和汤姆很棒。任何其他人开始并进入这个问题，检查控制台，它会告诉你什么是错的

angularjs ui-router代码中的东西

2 个答案: