无法使用ui.router获取网址内容

时间:2018-05-09 05:12:39

标签: html angularjs

我的HTML代码

<!doctype Html>
<html lang="en">
<head >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.16/angular-ui-router.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="first.js"></script>

</head>
<body ng-app="myApp">
<a href="first">firstname</a>
<div ui-view></div>
</body>

我的js在这里

var app=angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider,) {

     $stateProvider.state('home', {
            url: 'first',
            templateUrl: 'msg.html '
        })
});

和msg.html

<div >

hello world
</div>

我不知道为什么我无法获取网址内容会抛出错误信息,例如对象未找到任何帮助表示赞赏

1 个答案:

答案 0 :(得分:0)

使用,ui-sref代替href

 <a ui-sref="home">firstname</a>

所以代码将是,

的index.html:

<!doctype Html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>

    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="script.js"></script>

</head>

<body ng-app="myapp">

    <a ui-sref="home">firstname</a>
    <div ui-view></div>
</body>

</html>

<强>脚本:

(function(){
    var app = angular.module('myapp', ["ui.router"]);

    app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('home', {
            url: 'first',
            templateUrl: 'msg.html '
        })
    });
})();

<强> msg.html

<div>
  Hello World
</div>

Here is the documentation

Please check this DEMO