角材料设计的UI路由器不能正常工作

我实现的角度材料设计水平MD-标签没有任何错误，但仍标签的内容是blank.thank你提前。角材料设计的UI路由器不能正常工作

的index.html

<!DOCTYPE html> 
<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <link rel="stylesheet" href="angular-material/angular-material.css"> 
    <style > 
.mainApp md-content .ext-content { 
    padding: 50px; 
    margin: 20px; 
    background-color: #FFF2E0; } 
    </style> 
</head> 
<body ng-app="mainApp"> 
    <div ng-controller="AppCtrl" layout="column" ng-cloak> 
    <div id="logo" > 
    <script type="text/ng-template" id="views/home.html" ></script> 
    <script type="text/ng-template" id="views/aboutus.html"></script> 
    <script type="text/ng-template" id="views/services.html"></script> 
    <script type="text/ng-template" id="views/contactus.html"></script> 

    <md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex"> 

    <md-tab data-ui-sref="home" md-active="state.is('home') "> 
    <md-tab-label>HOME</md-tab-label> 
    </md-tab> 

    <md-tab data-ui-sref="aboutus" md-active="state.is('aboutus')"> 
    <md-tab-label>ABOUT US</md-tab-label> 
    </md-tab> 

    <md-tab data-ui-sref="services" md-active="state.is('services')"> 
    <md-tab-label>SERVICES</md-tab-label> 
    </md-tab> 

    <md-tab data-ui-sref="contactus" md-active="state.is('contactus')"> 
    <md-tab-label>CONTACT US</md-tab-label> 
    </md-tab> 
<!--  <md-tab id="tab1" label="HOME" aria-controls="tab1-content" md-nav-click="goto('home')"></md-tab> 
    <md-tab id="tab2" label="ABOUT US" aria-controls="tab2-content" md-nav-click="goto('aboutus)"></md-tab> 
    <md-tab id="tab3" label="SERVICES" aria-controls="tab3-content" md-nav-click="goto('services')"></md-tab> 
    <md-tab id="tab4" label="CONTACT US" aria-controls="tab4-content" md-nav-click="goto('contactus')"></md-tab> 
--> </md-tabs> 

    <div id="content" ui-view flex> </div> 

    </div> 

    <script src="angular/angular.js"></script> 
    <script src="angular-material/angular-material.js"></script> 
    <script src="angular-aria/angular-aria.js"></script> 
    <script src="angular-animate/angular-animate.js"></script> 
    <script src="angular/angular-ui-router.min.js"></script> 
    <script src="controller/controller.js"></script> 

</body> 
</html> 

    controller.js 

(function(angular, undefined) { 
    "use strict"; 
    angular.module('mainApp', ['ngMaterial', "ui.router"]) 
    .config(function($stateProvider, $urlRouterProvider) { 

     $urlRouterProvider.otherwise('/home'); 
     $stateProvider 
     .state('home', { 
      url: "/home", 
      templateUrl: "views/home.html" 
     }) 
     .state('aboutus', { 
      url: "/aboutus", 
      templateUrl: "views/aboutus.html" 
     }) 
     .state('services', { 
      url: "/services", 
      templateUrl: "views/services.html" 
     }) 
     .state('contactus', { 
      url: "/contactus", 
      templateUrl: "views/contactus.html" 
     }) 
     ; 
    }) 
    .controller('AppCtrl', function($scope,$state, $location, $log) { 
     $scope.selectedIndex = 0; 
     $scope.$watch('selectedIndex', function(current, old) { 
      switch (current) { 
       case 0: 
        $location.url("/home"); 
        break; 
       case 1: 
        $location.url("/aboutus"); 
        break; 
       case 2: 
        $location.url("/services"); 
        break; 
       case 3: 
        $location.url("/contactus"); 
        break; 
      } 
     }); 
    }); 

})(angular);

aboutus.html

<div flex layout="row"> 
    <h1>The super duper awesome Contact Form will go here!</h1> 
</div>

接触和services.html相同的代码

来源

2016-09-11 amar ghodke

我创建相同的应用程序，你可能缺少一些参考匹配角材料，

<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>

这里是Working App

来源

2016-09-11 09:52:20 Sajeetharan

精湛!!!!但我不知道我有所有的文件，包括那么为什么我没有得到的内容？所以我必须下载以上所有文件并将其替换为默认文件？我真不明白.... –

我刚才上面的链接添加了错误的0.10 GET文件：//rawgit.com/angular/bower-material/master/angular-material.css网:: ERR_FILE_NOT_FOUND 58获取文件：//rawgit.com/angular/bower-material/master/angular-material.js网:: ERR_FILE_NOT_FOUNDUncaught错误：[$注射器：modulerr]未能实例化模块mainApp由于：错误：[$注射器：NOMOD ]模块'mainApp'不可用！您拼错了模块名称或忘记加载模块名称。如果注册模块确保您指定依赖关系作为第二个参数。 –

希望它现在是修复 – Sajeetharan

角材料设计的UI路由器不能正常工作

回答

相关问题