Angular.Js中ng-include指令的使用与实现


Posted in Javascript onMay 07, 2017

前言

大家如果想在angularjs动态加载一个内容,那我们就可以使用ng-include来实现。今天Insus.NET就在ASP.NET MVC环境中,举个例子来演示它的功能。

示例介绍

你可以在一个视图动态加载任一其它视图。如果你的动态内容有很多部件,你得需要在控制器创建相应的Action操作,如使用部分Partial view就不必创建相对应的Action。因此这是Insus.NET所喜欢的。

另外,我们还需要为ng-include的链接带些参数呢!!!

因此,参数,即是使用model来实现:

Angular.Js中ng-include指令的使用与实现

由于ng-include的链接,直接给部分视图名称或路径,视图无法直接Render部分视图的。

那我们想一个办法,写一个公用的视图,所有部分视图均加载在这个公用的视图即可,使用这个公用的视图去Render这些部分视图。

Angular.Js中ng-include指令的使用与实现

在CommonView操作Action中,我们传入一个model,是为了后面传递参数准备的。

接下来,我把这个视图写好:

Angular.Js中ng-include指令的使用与实现

渲染部分视图的Action创建完毕。其也没有过多html的代码。

下面创建2个部分视图,当然实际环境中,也许不止2个啦。

部分视图_View1:

Angular.Js中ng-include指令的使用与实现

部分视图2:

Angular.Js中ng-include指令的使用与实现

前面一切准备好,均是为了下面ng-include的演示:

Angular.Js中ng-include指令的使用与实现 

程序运行结果:

Angular.Js中ng-include指令的使用与实现

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
Seajs源码详解分析
Apr 02 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 #Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
php实现微信发红包功能
2018/07/13 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
python中的格式化输出用法总结
2016/07/28 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python实现神经网络感知器算法
2017/12/20 Python
详解Python核心对象类型字符串
2018/02/11 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
python编程的核心知识点总结
2021/02/08 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
Servlet方面面试题
2016/09/28 面试题
物业公司采购员岗位职责
2013/12/31 职场文书
班组拓展活动方案
2014/08/14 职场文书
工作检讨书范文
2015/01/23 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书