Angularjs 角度--ui路由器未正确加载_Angularjs_Tabs_Linker_Angular Ui Router

Angularjs 角度--ui路由器未正确加载

angularjs tabs linker

Angularjs 角度--ui路由器未正确加载,angularjs,tabs,linker,angular-ui-router,Angularjs,Tabs,Linker,Angular Ui Router,我有一个用户界面路由器链接标签工作在plnkr，这是建立在标签。我有它的完美工作，但当我实现它到我的应用程序，它不会工作。我的应用程序是基于anuglar种子构建的。就像他们没有联系一样。“我的选项卡”或“我的视图”均不显示。我的视图位于根应用程序目录myApp/app/partials中的partials目录中我的应用程序 'use strict' // Declare app level module which depends on filters, and servi

我有一个用户界面路由器链接标签工作在plnkr，这是建立在标签。我有它的完美工作，但当我实现它到我的应用程序，它不会工作。我的应用程序是基于anuglar种子构建的。就像他们没有联系一样。“我的选项卡”或“我的视图”均不显示。我的视图位于根应用程序目录myApp/app/partials中的partials目录中

我的应用程序

    'use strict'

    // Declare app level module which depends on filters, and services
    angular.module("myApp", ['ui.router', 
   'ngCookies',
  'ngResource',
  'ngSanitize',
  'iu.bootstrap',
  'ngGrid',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
   ])

   .config(function($stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise("main/firstTab");

        $stateProvider
            .state("main", { abtract: true, url:"partials/main", templateUrl:"main.html" })
                .state("main.firstTab", { url: "partials/firstTab", templateUrl: "firstTab.html" })
            .state("main.secondTab", { url: "partials/secondTab", templateUrl: "secondTab.html" })
                .state("main.thirdTab", { url: "partials/thirdTab", templateUrl: "thirdTab.html" })
            .state("main.fourthTab", {url: "partials/fourthTab", templateUrl: "fourthTab.html"});

    });

我的管制员

'use strict';

/* Controllers */

angular.module('myApp.controllers', [])



    .controller("tabController", function($rootScope, $scope, $state) {     

        $scope.go = function(route){
            $state.go(route);
        };

        $scope.active = function(route){
            return $state.is(route);
        };

        $scope.tabs = [
            { heading: "firstTab", route:"main.firstTab", active:false },
            { heading: "secondTab", route:"main.secondTab", active:false },
            { heading: "thirdTab", route:"main.thirdTab", active:false },
            { Heading: "Reports"},
            { heading: "Reports", route:"main.fourthTab", active:false },
        ];

        $scope.$on("$stateChangeSuccess", function() {
            $scope.tabs.forEach(function(tab) {
                tab.active = $scope.active(tab.route);
            });
        });
    });

我的主HTML

<div ng-controller="tabController">
<section  class=" span3 " style="float:left">
    <tabset vertical="true" type="pills">
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.heading}}"
            select="go(t.route)"
            active="t.active">
        </tab>
    </tabset>
</section>
<section class="span12 " >

<!--Content Blocks -->   

        <div class="tab-content" style="border-bottom-right-radius: 1em; min-height:400px; overflow: hidden;" > 

    <div ui-view></div>
    </div>
    </section>
</div>

索引中

<html lang="en" ng-app="myApp" class="no-js">
<div ui-view></div>

您需要将

iu.bootstrap

更改为

ui.bootstrap。

解决方案是使用主页和部分的映射。他们不正确

.config（函数（$stateProvider，$urlRouterProvider）{

}))

伙计，我希望事情就这么简单。我改了，还是什么都没有。你在缩小你的js文件吗？如果是，则需要以以下格式定义控制器、指令等。控制器（“tabController”、[“$rootScope”、“$scope”、“$state”、函数（$rootScope、$scope、$state）{}]）

angular.module("myApp", ['ui.router', 
   'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.bootstrap',
  'ngGrid',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
   ]);

$urlRouterProvider.otherwise("partials/main/firstTab");

$stateProvider
    .state("main", { abtract: true, url:"/partials/main", templateUrl:"partials/main.html" })
        .state("main.firstTab", { url: "/partials/firstTab", templateUrl: "partials/firstTab.html" })
        .state("main.secondTab", { url: "/partialssecondTab/", templateUrl: "partials/secondTab.html" })
        .state("main.thirdTab", { url: "/partials/thirdTab", templateUrl: "partials/thirdTab.html" })
        .state("main.fourthTab", {url: "/partials/fourthTab", templateUrl: "partials/fourthTab.html"});