关于Angular js的文件引用和模板问题(ng-view,ng-include)
来源:互联网 发布:java判断闰年的条件 编辑:程序博客网 时间:2024/05/18 14:27
1.ng-view和ng-include的区别
首先先说一下这两个指令的区别,ng-view这个方法通过使用路由控制,可以方便的实现页面组合。但这个方法也有一个重大缺点,就是一个html文件中,只能有一个ng-view。虽然有变通之法。他是可以被ctl控制的。
ng-include就是将多个页面的公共页面提取出来,如header.html,footer.html等,在每个页面用<dv ng-include="'header.html'"></div>
来引入。
2.代码体现
首先要定义一个主页面,这个页面只有一个<div ng-view></div>用来接收路由的页面,其他所有的css文件和js文件都要引入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>支付宝</title> <link rel="stylesheet" href="../css/yue-hua.css"> <script src="../quotejs/jquery.js"></script> <script src="../quotejs/angular.js"></script> <script src="../quotejs/angular-route.js"></script> <script src="../quotejs/angular-animate.js"></script> <script src="../js/yue-hua.js"></script></head><body ng-app="app"><div ng-view></div></body></html>2.创建模板页面,分为header.html footer.html content.html
3.配置路由,这里我只让让main.html始终显示,
angular.module("app",['ng','ngRoute','ngAnimate']). controller("footer",function($scope){}). controller("header",function($scope){}). controller("main",function($scope){}). config(function($routeProvider){ $routeProvider. when("/main",{ templateUrl:'../tpl/main.html', controller:"main" }).otherwise({ redirectTo:"/main" })})
4.到这里时页面显示的只是main部分的内容,那么我们不想这样,我们想让main里面还要显示出header.html 和footer.html的内容,而让整个页面变得完整,这时需要用到ng-include在模板main.html里面进行引入------看代码
<div ng-include="'../tpl/header.html'"></div><div> main</div><div ng-include="'../tpl/footer.html'"></div>
阅读全文
1 0
- 关于Angular js的文件引用和模板问题(ng-view,ng-include)
- Angular.js中ng-if、ng-show和ng-hide的区别介绍
- angular中ng-include失效的原因
- Angular Js入门之ng-bind和ng-model和{{}}的区别
- angular-js的ng-bind与ng-model区别
- 记一个Angular的问题(ng-if,ng-show)
- Angular JS ng-app使用的注意事项
- angular js ng-change的用法
- angular中ng-bind和ng-model的区别
- angular中ng-bind和ng-model的区别
- angular.js里的ng-show,ng-hide与ng-if的区别
- angular模板加载 ----ng-template
- angular模板加载 ----ng-template
- angular 模板循环ng-container
- angular模板加载 ----ng-template
- angular的ng-options
- angular select ng-options和ng-repeat
- angular路由与ng-options/ng-include指令
- 关于home键后,App重走冷启动页的处理
- linux中启动tomcat权限不足permission denied
- 面试问题redis有哪些集群方案
- div遮罩
- HashMap和Hashtable的区别
- 关于Angular js的文件引用和模板问题(ng-view,ng-include)
- IO-字符编码
- 分布式锁
- Flask实战2问答平台-问答详情完成
- Linux 详解udev
- Kruskal算法的JAVA实现
- 后台调用前台的含有多个参数的JS方法
- HTTP HTTPS 协议
- Java中的boolean类型