angular-ui-router not working

我有我能够加载的index.html，但angular-ui-router没有将其路由到合适的templateURl（app.html与index.html位于相同的deirectoy中）.I添加了所有所需的脚本，但它不工作angular-ui-router not working

<!DOCTYPE html> 
<html ng-app ="mustReadAlgo"> 
    <head> 
     <title>AngularJS Basic Example</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <link rel="stylesheet" href="lib/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="lib/css/animate.min.css" /> 
     <script type='text/javascript' src="public/lib/moment.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../public/lib/lodash.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../public/lib/angular/angular.min.js" charset="UTF-8"></script> 


     <script type='text/javascript' src="../../public/lib/angular-sanitize/angular-sanitize.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../public/lib/angular-ui-router/release/angular-ui-router.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../app.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../app/controllers/app.controller.js" charset="UTF-8"></script> 





    </head> 
    <body> 

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


    </body> 
</html>

而且我app.js是

'use-strict'; 

    angular.module('mustReadAlgo',['ui.router']).config($stateProvider,$urlRouterProvider){ 

     $urlRouterProvider.otherwise('/'); 

     $stateProvider.state('home',{ 

      url :'/', 
      templateUrl : 'app.html',(is in same directory as of index.html) 
      controller :'mustReadAlgoCntrller' 


     }); 



    }).run(function(){ 


    });

和控制器的代码是在app.controller.js

angular.module('mustReadAlgo').controller('mustReadAlgoCntrller',function($scope) 
{ 
    $scope.message='Hello World'; 
    console.log('inside controller'); 
});

app.html

<div class="row"> 
    <div class="col-xs-2"> 
    <button class="form-control btn btn-default"><span class="glyphicon glyphicon-thumbs-up"></span>Hello World</button> 
    </div> 
    <p>Hello</p> 
</div>

但是UI路由

内容不能正常工作加载templateUrl？任何人都可以请帮助我，我是新的角js。

来源

2016-03-23 k.hit

这看起来并不像一个URL。 – Lex

是的，但它应该工作，它是一个HTML代码，所以它应该显示that.Even如果我使用任何网址，它不工作。如果我添加模板URL为'app.html'这是在相同的位置index.html是。 –

你有什么错误吗？可能是'mustReadAlgoCntrller'中的拼写错误？ – henrikmerlander

如果您传递的是直接HTML作为模板，则需要使用template:而不是templateUrl:。 Here are the docs on templates。

来源

2016-03-23 21:43:56 Lex

谢谢，我会尝试。请将我的问题编辑为使用templateUrl。 –

我用模板尝试过，但那不起作用。 –

您需要在状态的配置和在$ urlRouterProvider.otherwise功能控制器

$stateProvider 
    .state("otherwise", { url : '/'}) 

$urlRouterProvider.otherwise('/otherwise');

来源

2016-03-24 00:05:51

进样$状态使用Statename的定义状态，否则，这将解决这个问题。为了让clearer-

angular.module('mustReadAlgo', ['ui.router']).controller('mustReadAlgoCntrller',['$scope', '$state', function($scope, $state) 
{ 
    $scope.message='Hello World'; 
    console.log('inside controller'); 
}]);

来源

2016-03-24 00:11:18

这将如何帮助解决问题？ OP没有在'mustReadAlgoCntrller'控制器中使用'$ state'。 – Lex

你是对的，更新我的答案 –

尝试使用：的

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

//代替：

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

来源

2016-03-24 00:33:37 Germando

在源代码中定义视图指令时，你可以阅读限制：'ECA'。在使用抽象视图时，文档中提供了的参考。 – Germando

angular-ui-router not working

回答

相关问题