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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
JS继承 笔记
Jul 13 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
phpwind中的数据库操作类
2007/01/02 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
Wordpress php 分页代码
2009/10/21 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP类的反射用法实例
2014/11/03 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python交互式图形编程的实现
2019/07/25 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
学生会个人自荐书范文
2014/02/12 职场文书
培训研修方案
2014/06/06 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
闪闪的红星观后感
2015/06/08 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏