angular ui路由器不工作
angular-ui-router not working
我有index.html,我可以加载它,但angular ui路由器没有将它路由到正确的templateURl
<!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>
我的应用程序是
'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?有人能帮我吗?我刚接触到angular js。
尝试使用:
<div class="container">
<ui-view></ui-view>
</div>
//而不是:
<div class="container" ui-view="" ></div>
如果直接传递HTML用作模板,则需要使用template:
,而不是templateUrl:
。以下是关于模板的文档。
您需要在状态配置中定义一个状态,并在$urlRouterProvider.otherwise函数中使用状态名
$stateProvider
.state("otherwise", { url : '/'})
$urlRouterProvider.otherwise('/otherwise');
在控制器中注入$state,这将解决问题。让它更清晰-
angular.module('mustReadAlgo', ['ui.router']).controller('mustReadAlgoCntrller',['$scope', '$state', function($scope, $state)
{
$scope.message='Hello World';
console.log('inside controller');
}]);
相关文章:
- AngularJS UI路由器不能像ng路由器那样工作
- 流星铁路由器动态段不工作
- 当名称空间在id参数之前声明时,Angular UI路由器停止工作
- angular ui路由器不工作
- 无法获取用户 ID 路由参数以在反应路由器中继上工作
- ExpressJS路由器不工作
- 铁:路由器工作很奇怪 - 将我发送到模板然后返回
- Angular (1.5.0) ng 路由器不工作
- ng-controller工作,UI路由器:控制器不是
- UI 路由器不加载 rawgit 中的视图,但在本地工作
- 如何在Microsoft IIS上使用反应路由器(createBrowserHistory)使路由工作
- React路由器不工作
- angular ui路由器状态模板不工作
- 使用react路由器,redux将无法工作
- 具有url参数的角度状态/路由器不工作
- 为什么angularjs路由器在这里不工作
- Angular UI路由器工作不正常
- 骨干路由器是'工作不正常
- 无法让UI路由器在我的Angular Framework中工作
- 我的主干js路由器是't工作