2015-10-16 67 views
1

UIRouter喷射器模块错误

var myApp = angular.module('myApp',['ui.router']) 
 
myApp.config(function($stateProvider, $urlRouterProvider){ 
 
    // $urlRouterProvider.otherwise('/home'); 
 
    $stateprovider 
 
    //Home states and nested views 
 
    
 
      .state('home',{ 
 
       url: '/home', 
 
       templateUrl: 'index.html' 
 
      }) 
 
      
 
      
 
    
 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>Modern Business - Start Bootstrap Template</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom CSS --> 
 
    <link href="css/modern-business.css" rel="stylesheet"> 
 

 
    <!-- Custom Fonts --> 
 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    
 
</head> 
 

 
<body ng-app="myApp"> 
 
    <div ng-include='"templates/header.html"'></div> 
 
    <div ui-view></div> 
 
    <div ng-include='"templates/footer.html"'></div> 
 
    
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> 
 
    <script src="js/app.js"></script> 
 
    <!-- jQuery --> 
 
    <script src="js/jquery.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
    <!-- Contact Form JavaScript --> 
 
    <!-- Do not edit these files! In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. --> 
 
    <script src="js/jqBootstrapValidation.js"></script> 
 
    <script src="js/contact_me.js"></script> 
 
</body> 
 

 
</html>

这是我的HTML和我与UIRouter工作app.js。我遇到了喷油器模块的错误,但无法弄清楚。我是AngularJS的新手,所以请帮助我。是的,我的ng-include也不起作用。我运行我的index.html文件时没有显示任何结果。

回答

2

a working plunker

外壳是必不可少的。它是$stateProvider而不是$ stateprovider。这必须是高清的状态:

var myApp = angular.module('myApp', ['ui.router']) 
myApp.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/home'); 
    //$stateprovider 
    $stateProvider 
    //Home states and nested views 
    .state('home', { 
    url: '/home', 
    //templateUrl: 'index.html' 
    template: "<h1>hello from home</h1>", 
    }) 
}); 

检查它here

注意:当你开发...不要使用分钟的版本。只有充分可以给你很好的和容易理解的例外......

+0

它的工作。 thankx一吨 –

+0

这是很好的看看,享受令人惊叹的UI路由器;) –

1

$stateprovider应该$stateProvider