新春节后,分享第一个教程。

是教一位新朋友全新学习ASP.NET MVC下使用AngularJs语言。

一,新建一个空的Web项目。使用NuGet下载AngularJs和jQuery。
二,配置BundleConfig.cs:

  1. public class BundleConfig
  2. {
  3. // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
  4. public static void RegisterBundles(BundleCollection bundles)
  5. {
  6. //bundles.Add(new StyleBundle("~/bundles/css").Include(
  7. // "~/Content/css/angularvalidate.css"
  8. // ));
  9.  
  10. bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  11. "~/Scripts/jquery-3.1.1.js"
  12. ));
  13.  
  14. bundles.Add(new ScriptBundle("~/bundles/angular").Include(
  15. "~/Scripts/angular.js",
  16. "~/Scripts/angular-route.js"
  17. ));
  18. }
  19. }

Source Code

三,配置Global.asax。编写Application_Start()方法,启用上面bundles的angularjs和jQuery引用。

  1. public class MvcApplication : System.Web.HttpApplication
  2. {
  3. protected void Application_Start()
  4. {
  5. AreaRegistration.RegisterAllAreas();
  6. FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  7. BundleTable.EnableOptimizations = true;
  8. BundleConfig.RegisterBundles(BundleTable.Bundles);
  9. RouteConfig.RegisterRoutes(RouteTable.Routes);
  10. }
  11. }

Source Code

四,项目使用ASP.NET MVC框架Layout:

五,为ASP.NET MVC创建一个控制器:

六,在项目下,创建一个angularjs目录,将用来存储angularjs代码文档,如app或controller等。下面新建一个app.js

七,为ASP.NET MVC创建一个视图:

上面html程序中,有使用了ng-app,ng-model和ng-bing等指令,实际说明,可以官方解释。

下面演示一下程序运行交互情形:

ASP.NET MVC下使用AngularJs语言(一):Hello your name的更多相关文章

  1. ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text

    前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能.但是没有实现怎样获取下拉列表的value和text功能. 下面分别使用ng-click和ng-change来实 ...

  2. ASP.NET MVC下使用AngularJs语言(五):ng-selected

    这次学习ng-selected语法,这个是为DropDownList下拉列表显示默认选项. 演示从下面步骤开始 1,新建一个model: 上面#14行代码的property,数据类型为bool.即是存 ...

  3. ASP.NET MVC下使用AngularJs语言(二):ng-click事件

    程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...

  4. ASP.NET MVC下使用AngularJs语言(八):显示html

    在Angularjs显示html文本,如果按照一般处理它.它只能页中显示没经解释文本. 在ASP.NET MVC添加一个控制器: 创建angularjs控制器: pilotApp.controller ...

  5. ASP.NET MVC下使用AngularJs语言(七):Cookie的使用

    网站开发,使用Cookie对暂存数据进行读写,可以使用C#,javascript,jQuery,也可以使用angularjs等等来读写...... 本篇实现angularjs环境之下对Cookie时行 ...

  6. ASP.NET MVC下使用AngularJs语言(四):$window.alert

    判断文本框是否有填写,没有填写使用angularjs的$window.alert来提示用户. 创建一个ASP.NET MVC控制器: 接下来是准备一个angularjs的控制器: pilotApp.c ...

  7. ASP.NET MVC下使用AngularJs语言(三):ng-options

    今天使用angularjs的ng-options实现一个DropDownList下拉列表. 准备ASP.NET MVC的model: public class MobilePhone { public ...

  8. ASP.NET MVC下使用AngularJs语言(九):日期时间处理与显示

    当在angularjs去显示一个时间时,如原原本本去显示这个值,它将显示一个怪怪的字符串,其实它就是被系列化json之后的字符串.如:一个空值显示为日期时间: 如果非空值显示为日期时间的情形: 为了能 ...

  9. asp.net mvc下的多语言方案 包含Html,Javascript和图片

    在网上查阅了众多方案,觉得路过秋天的方案 解耦性比较好,可以不使用微软的Resource文件,而是将所有的词汇放入在一个txt的词典之中,便于维护. 步骤如下: 1)在整个程序的入口处global.a ...

随机推荐

  1. source tree使用经验

    FeatureXXX具体功能开发分支,从develop分支拉,功能开发自测完后合并到develop分支.来不及上线的feature分支不要合并到develop. develop开发分支,上面代码都是已 ...

  2. html网页练习豆瓣网

    html </head> <body>     <!-- 头部 -->     <header class="header1">   ...

  3. 即时通信 选择UDP还是TCP协议

    之前做过局域网的聊天软件,现在要做运行在广域网的聊天软件.开始接触网络编程,首先是接触到TCP和UDP协议 在网上查资料,都是这样描述 TCP面向连接,可靠,数据流 .UDP无连接,不可靠,数据报.但 ...

  4. 微探eventlet.monkey_patch

    e ventlet.monkey_patch在运行时动态修改已有的代码,而不需要修改原始代码 在eventlet.monkey_patch中支持以下几种python原生库修改 eventlet.mon ...

  5. const命令声明变量应注意的几点

    对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址.const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心. const person = ...

  6. 真机调试adb:wait for device 解决方案

    1.adb logcat 命令的时候,cmd总是提示adb server did't ACK.       分析一下,明显adb server没有开启成功,服务启动失败一般都是端口绑定失败,所以我们只 ...

  7. layui模板和jfinal混合使用注意

    <!-- 列表信息展示 --> <div class="layui-row"> <table class="layui-table" ...

  8. 动画之一:视图动画 View Animation

    原文:https://blog.csdn.net/pzm1993/article/details/77167049 view动画支持4中动画效果,分别是: 透明度动画(AlphaAnimation) ...

  9. 动态加载、移除js、css

    本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...

  10. centos查看系统版本

    显示系统版本 cat /etc/redhat-release cat /proc/version uname -a 查看位数 file /bin/ls