如何在AngularJs中为添加/编辑用户重用HTML / Controller

Question

I have two separate HTML templates for Add / Edit user and hence two separate controllers. How i can have one HTML file and one controller for both Add/Edit functionality.

Add User

  <div>
       <label>FirstName</label>
                    <div>
         <input type="text" name="name"  data-ng-model="register.Student.FirstName">
                    </div>
                </div>
                <div>
                    <label>LastName</label>
                    <div>
         <input type="text" name="name" data-ng-model="register.Student.LastName">
                    </div>
</div>

Edit User

  <div>
                    <label>FirstName</label>
                    <div>
        <input type="text" name="name" data-ng-model="student.Student.FirstName">
                    </div>
                </div>
                <div>
                    <label>LastName</label>
                    <div>
         <input type="text" name="name" data-ng-model="student.Student.LastName">
                    </div>
</div>

AddController which initialize FirstName and Last Name to null value. This is not the case in my EditController.

       $scope.register = {
                User: {
                    FirstName: '',
LastName: '',
            };

My route configuration

 templateUrl: '/app/users/newStudent.html',
        controller: 'newStudentController',
        controllerUrl: '/app/users/newStudentController.js', 

       templateUrl: '/app/users/editStudent.html',
        controller: 'editStudentController',
        controllerUrl: '/app/users/editStudentController.js',

Answer 1

Club both the html files and name it say student.html and club both the controller files and name it say student.js .

student.js

app.module('myApp', []).controller('studentController', function () {})

Your route config:

templateUrl: '/app/users/student.html',
        controller: 'studentController',
        controllerUrl: '/app/users/student.js',

UPDATE

DEMO: http://jsfiddle.net/softvar/uh17tseh/1/

HTML :

<div ng-app="myApp" ng-controller="myController">
    <div ng-repeat="stud in students">
        <div ng-hide="isEditForm">
            <span>{{stud.name}} - {{stud.age}}</span>
            <button ng-click="isEditForm=true;">Edit Student</button>
        </div>
        <div ng-show="isEditForm">
            <label>Enter Name</label><input ng-model="stud.name" />
            <label>Enter Age</label><input ng-model="stud.age" />
            <button ng-click="isEditForm=false;">Save</button>
        </div>
    </div>
    <br/><br/>

    <div ng-hide="isAddForm">
        <button ng-click="isAddForm=true;">Add Student</button>
    </div>
    <div ng-show="isAddForm">
        <label>Enter name</label><input ng-model="newStudent.name" />
        <label>Enter Age</label><input ng-model="newStudent.age" />
        <button ng-click="addStudent()">Add</button>
        <button ng-click="isAddForm=false;">Cancel</button>
    </div>
</div>

JS :

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.students = [
        {"name": "ABC", "age": 21},
        {"name": "DEF", "age": 22},
        {"name": "GHI", "age": 23},
        {"name": "XYZ", "age": 24}
    ];
    $scope.newStudent = {};
    $scope.addStudent = function () {
        if ($scope.newStudent.name && $scope.newStudent.age) {
            $scope.students.push({"name": $scope.newStudent.name,"age": $scope.newStudent.age});
            $scope.isAddForm = false;
        }
    };
});