在angular js中,点击链接加载html视图文件
Load html view file on click of link in angular js
这是我的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
,尝试添加这些将解决您的问题
序列为
- angular.js
- angular-route.js
- jquery.js
- v2-app.js,其他angular文件会在它之后加载。
编辑
加载你的视图点击,你需要删除.otherwise({ redirectTo: '/about' })
从你的$routeProvider
看更新的plunkr
恶魔Plunkr
相关文章:
- JavaScript链接在点击时不起作用;函数在页面加载时工作
- 使用JavaScript从超链接加载时的默认下拉值
- Yii2从点击链接开始加载模式
- 单击同一链接时,使Iron Router重新加载页面
- 更改css链接并等待加载新的css
- href没有在每次单击li的一部分时加载链接.使用javascript使整个li可以点击
- 无法加载套接字.io.js
- jQuery UI选项卡:在选项卡中加载链接/重新加载整个页面
- 重新加载链接文件 HTML
- 在单击链接时运行数据库查询,但仍加载链接URL
- 如何为captcha添加重新加载链接
- 在浏览器中查看之前,预加载链接的php页面
- 可视化javascript加载链
- JQuery -幻灯片,图库:顺序加载图片(接下来的五张),而不是一次全部加载
- jQuery点击类加载链接
- jQuery fade "back to top"链接.页面加载链接可见性
- 在容器内加载链接(Bootstrap - template)
- 加载<链接rel="将原始内容转换为<样式>标签
- 如何从配置中加载套接字io事件监听器
- 从外部源加载链接内部模态