Question

我正在尝试学习AngularJS，并且在使用我的第一个应用时遇到了一些麻烦。我想使用ng-view将html文件分配给不同的链接，但是当我点击链接时没有任何反应。我一定错过了什么。

index.html

<!doctype html>
<html lang="en" ng-app="customerApp" ng-controller="customerControllers" >
<head>
<title>Customer Demo App</title>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>               
</head>
<body>

<ul class="nav">
        <li><a href="#/CustomerList"> List Customers </a></li>
        <li><a href="#/CustomerForm"> Add/Edit Customer </a></li>
</ul>

<div ng-view></div>

</body>

</html>

JS / app.js

/ * App Module * /

var customerApp = angular.module('customerApp', ['ngroute', 'customerControllers' ]);

customerApp.config([$routeProvider,
        function ($routeProvider) {
            $routePRovider.
            when('/CustomerForm',{
                templateUrl: 'partials/customer-form.html',
                controller: 'customerCtrl'
            }).
            when('/CustomerList',{
                templateUrl: 'partials/customer-list.html',
                controller: 'customerLstCtrl'
            }).
            otherwise({
                redirectTo: '/CustomerForm'             
            });
        }]);

JS / controller.js

customerApp.controller('customerCtrl', ['$scope', function($scope) {

    $scope.heading = 'Add / Edit Customer';

});


customerApp.controller('customerLstCtrl', ['$scope', function($scope) {

    $scope.heading = 'Customer List';

});

分音/客户form.html

<h1>{{heading}}</h1>

<div>
    <form>
        <label>Name</label>
        <input type="text" ng-model="customer.name" /></br>
        <lablel>Email</lablel>
        <input type="text" ng-model="customer.email"/></br>
        <label>Telephone</label>
        <input type="text" ng-model="customer.phone"/></br>
        <label>Address</label>
        <label>Street</label>
        <input type="text" ng-model="customer.street" /></br>
        <label>City</label>
        <input type="text" ng-model="customer.city"/></br>
        <label>State</label>
        <input type="text" ng-model="customer.state"/></br>
        <label>Zip</label>
        <input type="text" ng-model="customer.zip"/></br>
    </form>

    </p>{{customer}}</p>
</div>

分音/客户list.html

<h1>{{heading}}</h1>

Answer 1

正如这些家伙所提到的，有一些语法，命名错误，无论如何这里是你的应用程序修复没有错误。

实例： http://plnkr.co/edit/RDL00s51y37VbNJICqr5?p=preview

Answer 2

我遇到了这个问题，我按照this tutorial执行了该示例，但是我没有得到相同的结果。谷歌搜索后我发现我必须在本地服务器上运行它，例如xamp，wapserver并且有效。

ngview没有使用AngularJS

2 个答案: