想在angularjs动态加载一个内容,我们可以使用ng-include来实现。

今天Insus.NET就在ASP.NET MVC环境中,举个例子来演示它的功能。

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

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

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

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

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

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

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

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

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

部分视图_View1:

部分视图2:

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

程序运行结果:

AngularJs的ng-include的使用与实现的更多相关文章

  1. Part 16 ng include directive in AngularJS

    ng-include directive is used to embed an HTML page into another HTML page. This technique is extreme ...

  2. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  3. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  4. AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  5. angularJs项目实战!02:前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...

  6. AngularJs学习笔记--IE Compatibility 兼容老版本IE

    原版地址:http://docs.angularjs.org/guide/ie Internet Explorer Compatibility 一.总括 这文章描述Internet Explorer( ...

  7. angularjs 手动启动

    谷歌推的javascript框架angulajs相当火热,由于新项目的缘故,最近一直看angularjs.在看的时候,一直有个疑问,angularjs 核心依赖于DI(依赖注入).常用的方法是在页面的 ...

  8. AngularJS 学习之路(1)

    AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用. 不再是 "先查找元素在操作元素",所有操作都以 & ...

  9. AngularJS进阶学习

    参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...

  10. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

随机推荐

  1. WANem广域网环境模拟

    背景 在测试过程中,往往需要模拟网络环境较差情况下,体验情况,故引入广域网模拟工具辅助测试 安装WANem 步骤1:光盘引导WANem镜像: 步骤2:启动(或者新建虚拟机——选择other insal ...

  2. Mongodb的入门(8)mongodb事物分析

    老生常谈:<在前面博客中也介绍过> mongodb官网:https://docs.mongodb.com/manual/introduction/ mongodb:官网上是这样定义的Mon ...

  3. 关于《SQLSERVER走起》微信账号自动回复功能的升级

    关于SQLSERVER走起微信账号自动回复功能的升级 由于腾讯对微信公众账号的升级,本公众账号也增加了关键词自动回复功能, 只需要输入某些特定关键词,本公众账号就会进行自动回复. 例如: 输入 sql ...

  4. Tensorflow实现稀疏自动编码(SAE)

    1.概述 人在获取图像时,并不是像计算机逐个像素去读,一般是扫一眼物体,大致能得到需要的信息,如形状,颜色,特征.怎么让机器也有这项能力呢,稀疏编码来了. 定义: 稀疏自编码器(Sparse Auto ...

  5. 转:SQL Server - 使用 Merge 语句实现表数据之间的对比同步

    表数据之间的同步有很多种实现方式,比如删除然后重新 INSERT,或者写一些其它的分支条件判断再加以 INSERT 或者 UPDATE 等.包括在 SSIS Package 中也可以通过 Lookup ...

  6. office(Word、Excel、PPT等图标异常和桌面无新建解决方案)

    前言吐槽: 前不久因为安装了WPS,然后觉得不好用卸载WPS装回office就出现了一个很恶心的问题:word文档.excel文档.PPT这些办公软件图标异常,显示的是下面这样: 打开倒是可以正常用w ...

  7. jenkins安装及配置-centos6.9

    Jenkins安装及配置 目录 1.安装java. 2 1.1安装说明... 2 1.2创建java目录... 2 1.3下载并解压... 2 1.4设置环境变量... 2 1.5验证JDK有效性.. ...

  8. web笔试

    类型判断用到哪些方法? typeof和instanceof 值类型和引用类型的区别? 根据 JavaScript中的变量类型传递方式,又分为值类型和引用类型,在参数传递方式上,值类型是按值传递,引用类 ...

  9. easyui的datebox控件如何只要年月不要日谢谢知道的说一下

    例子2015-01 格式easyui-datebox 加上 data-options="formatter:myformatter,parser:myparser"function ...

  10. php 非对称加密解密类

    <?phpnamespace app\Parentclient\model;header("Content-Type: text/html;charset=utf-8");/ ...