在angular js中,点击链接加载html视图文件

Load html view file on click of link in angular js

本文关键字:加载 链接 html 视图 文件 angular js      更新时间:2023-09-26

这是我的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视图文件的点击使用angular 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: angular is not defined v2-app.js:2:4

TypeError: dgApp is undefined

TypeError: $ is not a function

所以我想加载html视图文件上点击表单链接在同一页的ng-view。我在上面的代码做错了什么??

您的错误堆栈跟踪清楚地表明您错过了添加angular.js &jquery.js,尝试添加这些将解决您的问题

序列为

  1. angular.js
  2. angular-route.js
  3. jquery.js
  4. v2-app.js,其他angular文件会在它之后加载。

编辑

加载你的视图点击,你需要删除.otherwise({ redirectTo: '/about' })从你的$routeProvider看更新的plunkr

恶魔Plunkr