Question

你好我对这个框架的角度im benninger有问题，但我对它有一些了解。昨天我遇到一个问题，当我想将控制器从一个全局功能（在这种情况下一切正常）更改为控制器模块我重新阅读空白页面这里是我的代码

angular.module('myApp', ['ngRoute', 'membersService']).config(
['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'partials/home.html',
        controller: MembersCtrl
    }).otherwise({
        redirectTo: '/home'
    });
}]);

var myApp = angular.module('myApp');
myApp.controller('MembersCtrl',['$scope','$http', 'MembersSrv',function ($scope, $http, MembersSrv) {

$scope.refresh = function () {
    return MembersSrv.getAllPersons().then(function (data) {
        $scope.persons = data.data;
    });
};

$scope.clearMessages = function () {
    $scope.successMessages = '';
    $scope.errorMessages = '';
    $scope.errors = {};
};

$scope.reset = function () {
    if ($scope.regForm) {
        $scope.regForm.$setPristine();
    }
    $scope.newPerson = {name: "", lname: "", phoneNumber: ""};
    $scope.clearMessages();
};

$scope.register = function () {
    $scope.clearMessages();

    MembersSrv.save($scope.newPerson, function (data) {
        $scope.refresh();
        $scope.reset();
        $scope.successMessages = ['Member Registered'];
    }, function (result) {
        if ((result.status == 409) || (result.status == 400)) {
            $scope.errors = result.data;
        } else {
            $scope.errorMessages = ['Unknown  server error'];
        }
    });
};

$scope.refresh();
$scope.reset();
$scope.orderBy = 'name';
}]);

angular.module('membersService', []).service('MembersSrv', [
'$http', function ($http) {
    this.getAllPersons = function () {
        var url = "http://localhost:8080/gadziksy-web/rest/person";
        var req = {
            method: 'GET',
            url: url,
        };
        return $http(req);
    }
    }]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>myApp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Disable phone number detection on iOS.  -->
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="css/screen.css" type="text/css"/>
    <!-- Load angularjs -->
    <script src="js/libs/angular.js"></script>
    <!-- Load angularjs-route, which allows us to use multiple views displayed through application routes -->
    <script src="js/libs/angular-route.js"></script>
    <!-- Load angularjs-resource, which allows us to interact with REST resources as high level services -->
    <script src="js/libs/angular-resource.js"></script>
    <!-- Load the controllers for our app -->
    <script src="js/controllers/MemberCtrl.js"></script>
    <!-- Load the application wide JS, such as route definitions -->
    <script src="js/app.js"></script>
    <!-- Load the services we have defined for the application, particularly the REST services -->
    <script src="js/services/MemberSrv.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<div ng-controller="MembersCtrl">
    <h1 align="center">International Bank Application</h1>
    <div>
        <p>You have successfully connected to the Application.</p>
    </div>
    <form name="regForm" ng-submit="register()">
        <h2>Member Registration</h2>
        <fieldset>
            <legend>Register a member:</legend>
            <div>
                <label for="name">Name:</label>
                <input type="text" name="name" id="name" ng-model="newPerson.name" placeholder="Your Name" required
                       autofocus/>
            </div>
            <div>
                <label for="lname">Lname:</label>
                <input type="text" name="lname" id="lname" ng-model="newPerson.lname" placeholder="Your Lastname"
                       required/>
            </div>
            <div>
                <label for="dob">Date</label>
                <input type="date" name="dob" id="dob" ng-model="newPerson.dob" placeholder="Your Date" required/>
            </div>

            <ul ng-hide="!successMessages" class="success">
                <li ng-repeat="message in successMessages">{{message}}</li>
            </ul>

            <ul ng-hide="!errorMessages" class="error">
                <li ng-repeat="message in errorMessages">{{message}}</li>
            </ul>

            <div>
                <input type="submit" ng-disabled="regForm.$invalid" id="register" value="Register"/>
                <input type="button" ng-click="reset()" name="cancel"
                       id="cancel" value="Cancel"/>
            </div>
        </fieldset>
    </form>
    <h2>Persons</h2>
    <em ng-show="persons.length == 0">No registered members.</em>
    <table ng-hide="persons.length == 0" class="simpletablestyle">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Lname</th>
            <th>Date</th>
            <th>REST URL</th>
        </tr>
        </thead>
        <tr ng-repeat="person in persons | orderBy:orderBy">
            <td>{{person.id}}</td>
            <td>{{person.name}}</td>
            <td>{{person.lname}}</td>
            <td>{{person.dob}}</td>
            <td><a href="rest/person/{{person.id}}">details-{{person.id}}</a>
            </td>
    </table>
    <div>
        REST URL for all members: <a href="rest/members">/rest/members</a>
    </div>
    <div>
        <input type="button" ng-click="refresh()" name="refresh"
               id="refresh" value="Refresh"/>
    </div>
</div>

Answer 1

在$ routeProvider config

中将controller: MembersCtrl更改为controller: 'MembersCtrl'

角度控制器按模块空白页面

1 个答案: