AngularJs的MVC模式
在AngularJs也有带有MVC模式。此时你完全可以把html的js中的Controller写到一个外部的js文件中。
Ok,在ASP.NET MVC项目,打开Content目录,创建一个新文件夹AngularJs目录,专门是用来存放AngularJs相关的js文件。
再在此目录下创建Controllers目录,
angular.module('myApp', []).controller('insusCtrl', function ($scope) {
$scope.Goodses = [
{ ID: 1, Item: 'A036', Description: 'DFG', Qty: 334 },
{ ID: 2, Item: 'A027', Description: 'WSD', Qty: 5 },
{ ID: 3, Item: 'A029', Description: 'VBG', Qty: 32 },
{ ID: 4, Item: 'A078', Description: 'TRF', Qty: 87 },
{ ID: 5, Item: 'A054', Description: 'CDU', Qty: 66 },
];
});
Source Code
然后在html页面引用此js就行了:
运行看看结果:
最后来看看project中的AngularJs目录结构:
AngularJs的MVC模式的更多相关文章
- AngularJs(一) MVC 模式的应用
Model的应用 MVC的模式大家都是十分熟悉了,那么Angular是怎么规划的呢.数据被放在json文件中,通过Ajax获取数据. [{ "action": "Buy ...
- AngularJS学习笔记(1)——MVC模式的清单列表效果
MVC模式的清单列表效果 使用WebStorm新建todo.html并链入bootstrap.css.bootstrap-theme.css.angular.js.要链入的相关css和js文件预先准备 ...
- AngularJS学习之MVC模式
AngularJS是谷歌开发维护的前端MVC框架,克服了HTML在构建应用上的不足,从而降低了开发的成本. 在学习AngularJS之前,有必要和之前学过的jQuery进行对比.jQuery是java ...
- 【Web开发】Mean web开发 01-Express实现MVC模式开发
简介 Mean是JavaScript的全栈开发框架.更多介绍 用Express实现MVC模式开发是Mean Web全栈开发中的一部分. Express 是一个基于 Node.js 平台的极简.灵活的 ...
- Android 腾讯入门教程( 智能手表UI设计 和 MVC模式 )
*****注意到mvc 在android 中是如何进行分层分域执行各自的功能.**** 官方推荐的按钮尺寸是48像素 前端之Android入门(1):环境配置 前端之Android入门(2):程序目录 ...
- ASP.Net MVC开发基础学习笔记:一、走向MVC模式
一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...
- 完成AngularJS with MVC 5, Web API 2项目
经过接近两个月的日夜奋战,完成AngularJS with MVC 5, Web API 2的项目,这也是进入公司以后最大的一个项目,从项目需求.用户Prototype/Demo,招人,开发完成,可谓 ...
- [ASP.NET MVC 小牛之路]01 - 理解MVC模式
本人博客已转移至:http://www.exblr.com/liam PS:MVC出来很久了,工作上一直没机会用.出于兴趣,工作之余我将展开对MVC的深入学习,通过博文来记录所学所得,并希望能得到各 ...
- 深入理解MVC模式
一,什么是MVC模式 该模式是一种软件设计典范,他把软件系统划分为三个基本部分:模型层(Model).视图层(View).控制器(Controller) *Model(模型)表示应用程序核心(比如数据 ...
随机推荐
- 清华大学 TUNA 协会
https://tuna.moe/ 技术,实力,优越感,环境..,镜像
- win8 本地化
先看个简单的案例:新时尚Windows8开发(6):资源 & 本地化 http://www.silverlightchina.net/html/windows8/study/2012/0902 ...
- ios蓝牙自定义快捷键
http://www.paopaoche.net/app/12072.html Beekeyboard
- JNI,RegisterNative参数解析
Register native method - 数据类型和method descriptor 使用JNI时,为了使得虚拟机可以找到在C/C++ code中定义的native方法,有两种机制可以用,一 ...
- Python之tornado
一.快速了解Tornado框架 1)tornado简介 Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的框架)有着明显的区别:它是非阻塞式服务器,而且速度相当快.得利于其 ...
- Hibernate 的缓存
Hibernate的一级缓存 什么是缓存?? 1 数据存到数据库里面,数据库本身是文件系统,使用流方式操作文件效率不是很高. 1.1 把数据存到内存里面,不需要使用流方式,可以直接读取内存中数据 ...
- socketserver模块实现并发和连接合法性验证
一.socketserver模块 1.sockeserver的源码流程 2.简单的使用 socketserver服务端 import socketserver class MyServer(socke ...
- 基础知识之nginx重写规则
nginx重写规则 nginx rewrite 正则表达式匹配 大小写匹配 ~ 为区分大小写匹配 ~* 为不区分大小写匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 文件及目录匹配 -f ...
- 安装kafka 集群 步骤
1.下载 http://mirror.bit.edu.cn/apache/kafka/2.1.0/kafka_2.11-2.1.0.tgz 2.解压 tar -zxvf kafka_2.11-2.1 ...
- vue的子传父
子组件传值给父组件,需要触发一个事件. 在这个事件里,使用this.$emit("父组件使用的名称","子组件的数据") 在父组件中引用的子组件,在子组件的标签 ...