使用AngularJS学习MVC的基础知识
日期:2018-05-31 16:18:55 / 人气:1983
本文将对“MVC with AngularJS”初学者更有帮助。
- 哪种技术最好?
- 我们为什么要使用MVC?
- 我们为什么要使用AngularJS?
- 为什么我们应该在MVC中使用AngularJS?
- 如何在MVC中配置AngularJS?
如今,世界上有很多新技术,因此可能会出现一些混淆,哪些是可以选择的,哪一种是构建我们的应用程序的最佳技术。
建议
大多数时候,程序员将在MVC中构建他们的应用程序,因为MVC(模型 - 视图 - 控制器)是松散耦合的,我们可以重用模式的结构。
带有WEB API的ASP.NET MVC最适合服务器端技术。我们可以为其他通信设备(移动设备,iPad等)重复使用相同的服务,并且Web API将分别托管在IIS中。它会增加服务器的性能。
Angular JS最适合客户端。我们可以使用快速开发,对数据绑定非常有用,因为它使用RESTful协议。
我们为什么要使用MVC?
ASP.NET MVC为您提供了一种强大且基于模式的方式来构建动态网站,使您可以完全控制标记以获得愉快的开发 体验。
模型 - 视图 - 控制器(MVC)体系结构模式将应用程序分为三个主要组件。
模型
模型通常用于业务对象。它将直接管理数据,逻辑和应用程序的规则。
视图
这是一个用户界面,它显示了操作的输出。
调节器
控制器是应用程序的核心。它接受输入并将其转换为模型或视图的命令。
ASP.NET MVC的功能
- Web API支持RESTful构建的MVC框架。
- 我们可以使用NuGet来安装jQuery,AngularJS等。
- 我们可以将异步操作方法编写为单一方法,它返回任务的一个对象。
- 路由模块负责映射特定的控制器动作。
我们为什么要使用AngularJS?
AngularJS是一种开源的脚本语言。它将基于Model-View-Controller模式和最新的客户端JavaScript进行工作。
数据绑定的最大优点之一是,只要模型发生变化,它就会自动更改视图的值,并在视图更改时更新模型。这被称为双向绑定。
AngularJS的特点
- 双向数据绑定。
- 使用和支持MVC设计模式。
- 支持路由,就像单个页面应用程序一样。
- 支持RESTful服务。
- 依赖注入。
我们为什么要在MVC中使用AngularJS?
ASP.NET MVC和AngularJS都兼容MVC模式,并且有许多项目可以在一起使用。这很好,因为您的MVC服务器端代码为Angular客户端调用提供了JSON结果。
另外,您可以使用MVC控制器来控制应用程序中的HTML视图或剃刀视图。这为您提供授权,重定向,错误处理等功能。
如何在MVC中配置Angular JS
打开Visual Studio 2015并单击=> File => New => ASP.NET Web Application。选择项目类型=>选择Web API项目,打开一个项目解决方案,右键单击上述项目并选择管理NuGet包,点击浏览标签并搜索AngularJS,我们必须下载AngularJS,AngularJS.Core和AngularJS.Route文件,下载完成后,这些文件路径将显示在输出窗口中。
添加新文件夹并创建新的JavaScript文件为Ng.Module.js
下载完成后,这些文件路径将显示在输出窗口中。
添加新文件夹并创建新的JavaScript文件为Ng.Module.js
打开Index.cshtml页面并编写ng-controller的代码,如下所示。
<div class="row" ng-controller="HomeController">
<div class="col-md-4 btn-success"> {{Testname}} </div>
<div class="col-md-4 btn-primary"> {{Test}} </div>
<div class="col-md-4 btn-danger"> {{happy}} </div>
</div>
Link the AngularJS files in _layout.cshtml page
<script src="~/Scripts/angular.min.js"></script>
<script src="~/AngularJS/Ng.Module.js"></script>
<script src="~/AngularJS/Ng.Ctrl.js"></script>
现在,运行(F5)应用程序。它会在浏览器中显示结果。
作者:admin
新闻资讯 News
- 讯宜捷成功签约深圳芯而达05-18
- 讯宜捷成功签约洛阳锐英机械05-18
- 讯宜捷成功签约深圳美达05-18
- 讯宜捷成功签约河南渡渡鸟网络科...05-18
案例展示 Case
- 地跨“半壁江山”06-23
- 【蒙牛清远】设备维护保养系统再...05-18
- 【青木合众】复杂问题简单化就是...05-10
- 【乐山商场】拯救零售服务的商业...05-05
- 【国企中石油】税银综合管理平台...05-15
- 【上田财富】信息化财富管理机构...05-05