угловая 1 простая маршрутизация - привязка данных не работает

Question

Я использую угловой 1 для привязки данных от формы к следующему представлению, используя модуль маршрутизации для отображения html-структуры из разных файлов, если у меня есть весь html-код в одном файле, то прототип работает отлично, но когда яиспользуйте модуль маршрутизации, данные не связываются через ссылки,

В следующей ссылке я использую только CSS для переходов, поэтому все HTML-файлы находятся в одном файле и не используют модуль маршрутизации, и там он работает http://jspmultimedia.com/angular-cv-css/#form

, а в следующей ссылке не работает, используя модуль маршрутизации для передачи данных из формы, которые будут отображаться в следующем представлении.http://jspmultimedia.com/angular-cv-route/#!/form

var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        controller : 'myCtrl',
        templateUrl : 'dashboard.htm'
    })
    .when("/form", {
        controller : 'myCtrl',
        templateUrl : 'form.htm'    
    })
    .when("/result", {
        controller : 'myCtrl',
        templateUrl : 'resultdashboard.htm'
    })                      
    .otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
    $scope.position = [
        "Front-end Web Developer",
        "Back-end Web Developer",
        "UI / UE Designer"
    ]
    //add skills
    $scope.skills = [];
    $scope.addItem = function () {
        $scope.skills.push($scope.addMe);
    }
    //remove skills
    $scope.removeItem = function (x) {
        $scope.skills.splice(x, 1);
    }  
});

это form.htm

<!-- FORM -->
<form id="form">
    <div class="form-group row"><!-- Name -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
        <div class="col-10">
            <input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
        </div>
     </div>
    <div class="form-group row"><!-- Last Name -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
        <div class="col-10">
            <input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
        </div>
     </div>              

     <div class="form-group row"><!-- Short Description -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
        <div class="col-10">
            <textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
      </div>                  
    </div>

    <div class="form-group row"><!--  select Position to apply -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
        <div class="col-10">
            <select ng-model="selectedPosition"  class="form-control form-control-lg">
                <option value="" selected disabled hidden>Choose here</option>
                <option ng-repeat="x in position" value="{{x}}">{{x}}</option>
            </select>
        </div>
    </div>
    <div class="form-group row"><!--  add skills -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
        <div class="col-4">
            <ul>
                 <li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
                        <span ng-click="removeItem($index)" style="cursor:pointer;">&times;</span>
                    </div>
                </li>

            </ul>
            <input class="form-control" ng-model="addMe">
            <button ng-click="addItem()" class="btn btn-primary">Add</button>                           
        </div>
        <div class="clearfix">
        </div>
        <div class="image-upload"> <!-- Image Upload preview -->
            <input type="file" class="form-control-file" onchange="readURL(this);" />
            <img id="preview-img" src="http://placehold.it/180" alt="your image" />
        </div>
    </div>  
    <!-- FINISH CTA-->
    <a href="#!result"class="btn btn-primary btn-lg text-center m-auto text-white">Finish</a>
</form>

и наконец resultdashboard.htm

<!-- Result dashboard CV -->
    <div id="resultDashboard">
    <div class="row col-12">
        <div class="col-3">
            <img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
        </div>
        <div class="col-6">
            <h1>{{ name + " " +lastName}}</h1>
            <p>{{shortDescription}}</p>
            <div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
        </div>
        <div class="col-3">
            <h3>Main Skills</h3>
            <ul>
                <li ng-repeat="x in skills"> {{x}}
                </li> 
            </ul>
        </div>
    </div>
</div>

Я предполагаю, что должен бытьесли что-то пропущено в контроллере, если кто-нибудь может взглянуть на него, пожалуйста, я был бы очень признателен. Предполагается, что прототип будет загружен в виде резюме, просто чтобы узнать, как использовать angular 1, а затем продолжить работу с другими библиотеками, я думаю, что понимание маршрутизациибольшой шаг для меня.В любом случае спасибо.

Answer 1

Добавьте контроллер в ваш HTML - как ng-controller = "myCtrl"