Загрузить вид HTML-файл по щелчку ссылки в угловых JS

Question

Это мой HTML-код

<link rel="stylesheet" 
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    <!-- load angular via CDN --> 
    <script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> 
    <script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js "> 
    </script> 
<script src="v2-app.js"></script> 
    <script src="components/where-to-buy/whereToBuyController.js"></script> 
<script src="components/sku-listing/deviceController.js"></script> 
<script src="directives.js"></script> 
<nav class="tab-nav"> 
    <div class="tab-nav-inner"> 
     <div class="container-fluid" ng-controller="mainController"> 
      <div class="row"> 
       <ul class="nav nav-pills nav-justified th-menu"> 
        <li role="presentation" ng-class="{active:isActive('/about')}" ><a href="#/about" ng-click="scrollToSection('content-section')">Erafone offer details</a></li> 
        <li role="presentation" ng-class="{active:isActive('/form')}"><a href="#/form" ng-click="scrollToSection('content-section')">Form</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 

<!-- Tab panes --> 
<div class="container-fluid"> 

    <ng-view> 


    </ng-view> 

Я хочу, чтобы загрузить просмотр HTML-файл по щелчку формы, используя угловые JS. Это мой JS код

var dgApp = angular.module('dgApp', ['ngRoute']); 

// ROUTE 
dgApp.config(function($routeProvider){ 
$routeProvider 
    .when('/about',{ 
     templateUrl: 'components/additional-info/v2- 
    additionalInfoView.html', 
     controller : 'mainController' 
    }) 
    .when('/form',{ 

     templateUrl: 'components/form/v2-formView.html', 
     controller : 'mainController' 
    }) 
    .otherwise({ redirectTo: '/about' }) 
}); 
dgApp.controller('mainController', ['$scope' , '$location', '$http', 
    '$filter', function ($scope, $location, $http, $filter) { 

    $scope.scrollToSection = function(sectionID){ 

    $('html, body').animate({ 
     scrollTop: $("#"+sectionID).offset().top - 63 
    }, 800); 
} 

}]); 

Есть ошибки в консоли

ReferenceError: угловые не определен v2-app.js: 2: 4

TypeError: dgApp неопределен directives.js: 1: 0

TypeError: $ не является функцией index.html: 143: 5

Так что я хочу загрузить файл вида HTML на форму нажмите ссылку на той же странице в нг-вид. Что я сделал неправильно в приведенном выше коде? Если у кого-нибудь есть идея, пожалуйста, назовите меня.

Answer 1

Ваша ошибка StackTrace ясно говорит, что вы пропустили добавить angular.js & jquery.js, попробуйте добавить те разрешим вы выдаете

Последовательность будет

1. angular.js
2. угловой route.js
3. jquery.js
4. v2-app.js & другой угловой файл будет загруженный после него.

Редактировать

Для загрузки Вашего взгляда на кнопку вы должны удалить .otherwise({ redirectTo: '/about' }) из вашего $routeProvider взгляда на обновленный plunkr

Demon Plunkr