Question

我正在使用angular-ui-router教程。

当我想加载home.html页面时它不起作用。

我为每个页面定义了3个状态并定义了他们的模板网址，但根本没有导航工作。

http://localhost:8080/index.html#/home.

这是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>

这是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的：

<div>
<h1>home</h1>

</div>

Answer 1

设置默认网址状态。

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() {

});

在浏览器http://localhost:8080/

中打开此链接

Answer 2

我解决了这个问题。

我使用ui-sref而不是直接在URL浏览器中书写。

<button ui-sref="home" >Home</button>

无法使用angular-ui-router加载视图

2 个答案: