[英]unable to load view with angular-ui-router
I am using angular-ui-router tutorial. 我正在使用angular-ui-router教程。
It does not work when i want to load home.html page. 当我想加载home.html页面时,它不起作用。
I defined 3 states for each page and define their template url,but no navigation is working at all. 我为每个页面定义了3个状态,并定义了它们的模板网址,但是根本没有任何导航功能。
http://localhost:8080/index.html#/home.
this is index.html : 这是index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>catalogue</title>
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="css/myStyle.css" />
</head>
<body ng-app="MyApp" >
<div ui-view >
</div>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
this is app.js : 这是app.js:
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
home.html: home.html:
<div>
<h1>home</h1>
</div>
Set default URL state. 设置默认URL状态。
var app=angular.module("MyApp",['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
});
$stateProvider.state('chercher',{
url:'/chercher',
templateUrl: 'views/chercher.html',
controller: 'MyController'
});
$stateProvider.state('newProduct',{
url:'/newProduct',
templateUrl: 'views/newProduct.html',
controller: 'NewProductController'
});
// add this code
$urlRouterProvider.otherwise('/home');
});
app.controller('HomeController', function() {
});
app.controller('NewProduitController', function() {
});
open this link in browser http://localhost:8080/ 在浏览器http:// localhost:8080 /中打开此链接
i solved the problem. 我解决了这个问题。
I used ui-sref instead of writing directly in the URL browser. 我使用ui-sref而不是直接在URL浏览器中编写。
<button ui-sref="home" >Home</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.