Load html view file on click of link in angular js

Question

This is my html code

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

I want to load html view file on click of form using angular js. This is my js code

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);
 }

 }]);

There are errors in console

ReferenceError: angular is not defined v2-app.js:2:4

TypeError: dgApp is undefined directives.js:1:0

TypeError: $ is not a function index.html:143:5

So I want load html view file on click form link on the same page in ng-view. What I made wrong in the above code?? If anybody has any idea then please guide me.

try applying digest cycle using `$scope.$apply()` in function `scrollToSection ` as you are calling jquery function in angular code — Pankaj Parkar, Jun 05 '15 at 05:57
it would be something like `$scope.scrollToSection = function(sectionID){ $('html, body').animate({ scrollTop: $("#"+sectionID).offset().top - 63 }, 800);$scope.$apply(); }` — Pankaj Parkar, Jun 05 '15 at 06:43
I dont want scrolling..I want to directly open one html file on click of link on same page. Please see this link ..I want that kind of functionality — Kedar B, Jun 05 '15 at 06:51
you are missed to add `angular.js` & and `jquery` in your index page..referring those will solve your issue — Pankaj Parkar, Jun 05 '15 at 07:27

Pankaj Parkar · Answer 1 · 2015-06-05T09:12:54.100

1

Your error stacktrace clearly says that you missed to add angular.js & jquery.js, Try adding those will solve you issue

Sequence would be

angular.js
angular-route.js
jquery.js
v2-app.js & other angular file will loaded after it.

Edit

For loading your view on click you need to remove .otherwise({ redirectTo: '/about' }) from your $routeProvider look at the updated plunkr

Demon Plunkr

edited Jun 05 '15 at 09:12

answered Jun 05 '15 at 07:41

Pankaj Parkar

134,766
23
234
299

Load html view file on click of link in angular js

1 Answers1