AngularJS:无法注入视图

时间:2016-03-18 09:57:02

标签: angularjs views



<!DOCTYPE html>
<html lang="en" ng-app="contactsMgr">
<head>
    <meta charset="utf-8">
    <title>Contacts Manager</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Contacts Manager</a>
    </div>

    <div class="collapse navbar-collapse" id="nav-toggle">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/">Browse</a></li>
            <li><a href="#/add-contact">Add Contact</a></li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <input type="text" class="form-control" placeholder="Search">
        </form>
    </div>
</nav>

<div class="container">

    <ng-view></ng-view>

</div>

</body>
</html>
&#13;
&#13;
&#13;

&#13;
&#13;
angular.module('contactsMgr', ['ngRoute'])

    /*-----------------------------------
     | Routes
     ------------------------------------*/

    .config(function($routeProvider, $locationProvider){

        $routeProvider
            .when('/', {
                controller: 'indexCtrl',
                templateUrl: '../assets/partials/index.html'
            })

            .when('/add-contact', {
                controller: 'addCtrl',
                templateUrl: '../assets/partials/add.html'
            })


            .when('/contact/:id', {
                controller: 'contactCtrl',
                templateUrl: '../assets/partials/contact.html'
            })

            .otherwise({
                redirectTo: '/'
            });

        $locationProvider.html5Mode(true);

    })



    /*-----------------------------------
     | Index Controller
     ------------------------------------*/

    .controller('indexCtrl', function($scope){

    })

    /*-----------------------------------
     | Add Controller
     ------------------------------------*/

    .controller('addCtrl', function($scope){

    })

    /*-----------------------------------
     | Contact Controller
     ------------------------------------*/

    .controller('contactCtrl', function($scope, $routeParams){

        console.log($routeParams);

    })
&#13;
&#13;
&#13;

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

Dont use / in the href tag for you instead use like the below code

<a href="#showOrders">show order</a>
如果你想要一个正确的答案,还有一件事。清楚地解释你的成就而不是形象。作为代码