ngview not working AngularJS

StackOverflow https://stackoverflow.com/questions/22619744

  •  20-06-2023
  •  | 
  •  

質問

I am trying to learn AngularJS and am having some trouble with my first app. I want to use ng-view to assign html files to different links, but nothing happens when I click the link. I must be missing something.

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';

});

partials/customer-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>

partials/customer-list.html

<h1>{{heading}}</h1>
役に立ちましたか？

解決

as the guys mentioned, there was a couple of syntax, naming errors, in any case here is your app fixed with no bugs.

Live example: http://plnkr.co/edit/RDL00s51y37VbNJICqr5?p=preview

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top