Angular企业级开发-Angular MVC实现

1.MVC介绍

Model-View-Controller

在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能。除此之外,此模式通过对复杂度的简化,使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组:

控制器(Controller)- 负责转发请求,对请求进行处理。

视图(View) - 界面设计人员进行图形界面设计。

模型(Model) - 程序员编写程序应有的功能(实现算法等等)、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

2.Angular MVC


在AngularJS应用中,MVC设计模式通过JavaScript和HTML来实现。使用HTML定义视图,用JavaScript实现模型和控制器。

2.1Angular MVC中的Views

在AngularJS应用中,视图是使用HTML来创建,HTML可以是一个简单单独的页面,也可以是html代码片段。

一个简单的HTML页面:

<!DOCTYPE html><html><head><title>Hack Hands Angular - Demos</title><meta charset="utf-8" /></head><body><div id="messageTitle"></div><div id="message">Hello World</div></body></html>

AngularJS应用大多是是SPA(Single Page Application)应用,当前页面只是展示了应用的一部分内容,通过ng-view去加载更多的视图内容。含有ng-view的html文件如下:

<!DOCTYPE html><html><head><title>Hack Hands Angular - Demos</title><meta charset="utf-8" /></head><body><h1>Hack Hands Angular Demos</h1><div ng-view><div id="messageTitle"></div><div id="message">Hello World</div></div></body></html>

2.2 Angular MVC中的Controllers

应用的控制器,本质上它是一个JavaScript的函数,用于衔接页面模板和逻辑代码,并通过添加对象和行为来增强模板中作用域的功能在AngularJS中,可以在标签上使用ng-controller指令指定,也可以在配置ui-view的情况下,在路由里面指定。

// Code goes herevar hackApp = angular.module("hackApp", []);var indexController = hackApp.controller("indexController", function($scope) {
  // controller logic goes here
  $scope.message = "Hello Hacking World"});

2.3 Angular MVC中的Models

Model属于数据层,它即可以表示整个Anglar应用的数据模型对象,也可以只表示某个实体对象

Model数据模型对象依附于作用域,无论是整个模型对象或某个实体对象,都必须被Angular的作用域以属性的方式进行引用,这种引用可以显式或隐式的进行创建。

时间: 2024-10-20 06:20:54

Angular企业级开发-Angular MVC实现的相关文章

Angular企业级开发(10)-Smart Table插件开发

1.Smart Table内置的分页功能 Smart Table是基于AngularJS模块特性开发出来的一款优秀的表格组件,默认就支持过滤.排序等核心功能.开发者基于它也可以开发插件,满足个性化需求.比如分页.排序数据.通过Ajax获取等. Smart Table通过Custom Pagination插件可以完成分页功能: Custom pagination 运行效果如下: html代码结构: <table st-table="displayed" class="ta

Angular JS开发秘籍——互动出版网

这篇是计算机类的优质预售推荐>>>><Angular JS开发秘籍> 使用AngularJS革新MVC方式实现精彩的Web应用,扩展 HTML的AngularJS指令,20多年企业应用和Web界面开发经验作者Brad Dayley 最新作品 内容简介 快速掌握AngularJS Web开发技术 AngularJS是Web开发领域最激动人心的创新技术之一,它为整个开发过程提供结构,旨在简化Web应用的开发和测试. 网站已不再是简单的静态内容--相反,网站更趋动态化,通常单

Angular动态菜单用于MVC和WCF REST(未完)

来源链接 http://www.codeproject.com/Articles/996614/Angular-JS-Dynamic-Menu-Creation-using-MVC-and-WCF 新手翻译,看到一些好文,将其转过来,希望能对大家起到一点点的帮助. 1,为什么我们需要动态创建菜单: 如果我们只是需要创建一个只有几个页面的网站,那么用静态菜单就可以. 但是只果要开发一个大型Web应用的话,例如ERP Web应用. 在这种情况下,会有2个以上的开发者一起工作,而且页面可能会超过50-

52abp框架asp.net core &amp; Angular快速开发实战视频教程

课程标题 52abp框架asp.net core & Angular全栈开发实战视频课程 课程简介 从零开始学 52ABP企业开发框架,企业项目是如何开发和技术选型,代码如何管理,团队协同开发.Angular和.net core是如何结合的,当前处于迷茫或者 技术进入瓶颈期的程序员,可以知道一条如何往中高级程序员发展的道路.总的来说52ABP是一个整合了前后端的强力框架,基于DDD(领域驱动设计)思想的强大稳定的WEB应用框架! 面向人群 在职的.NET 程序猿(具备C# .net 基础,热爱互

Angular js开发的各种坑(持续更新中。。。)

Angular UI的Modal 在按照官方文档写的时候会报如下错误 var ModalDemoCtrl = function ($scope, $modal, $log) {   $scope.items = ['item1', 'item2', 'item3'];   $scope.open = function (size) {    var modalInstance = $modal.open({       templateUrl: 'myModalContent.html',   

iOS企业级开发初级课程-表视图(13集)

首先了解了表视图的组成.表视图类的构成.表视图的分类以及表视图的两个重要协议(委托协议和数据源协议),对表视图有了一个整体上的认识.接下来我们掌握了如何实现简单表视图和分节表视图,以及表视图中索引.搜索栏.分组的使用.然后我们学习了如何对表视图单元格进行删除.插入.移动等操作.最后本章向大家介绍了表视图UI设计模式方面的内容. 序号 技术点 1 表视图-1-表视图介绍 2 表视图-2-简单表视图 3 表视图-3-简单表视图下 4 表视图-4-自定义单元格 5 表视图-5-搜索栏-1 6 表视图-

嘿!@野兽,你的ng api 掉了 - - angular.uppercase和angular.lowercase

@野兽的 ng api 学习 -- angular.uppercase和angular.lowercase angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = "ABCabc"; var upperCase = angular.uppercase(str);//ABCABC angular.lowercase 将指定的字符串转换成小写 格式:ang

王家林的云计算分布式大数据Hadoop企业级开发动手实践

一:课程简介: Hadoop是云计算分布式大数据的事实标准软件框架,Hadoop中的架构实现是整个云计算产业技术的基础,作为与Google三大核心技术DFS.MapReduce.BigTable相对的HDFS.MapReduce.和HBase也是整个Hadoop生态系统的核心的技术,本课程致力于帮您掌握这三大技术的同时掌握云计算的数据仓库挖掘技术Hive,助您在云计算技术时代自由翱翔. 二:课程特色 1,      深入浅出中动手实作: 2,      掌握Hadoop三大核心:HDFS.Map

JDBC - 开发实例 - MVC模式

JDBC - 开发实例 - MVC模式  1. 在web.xml中配置连接数据库的信息 web.xml: <context-param> <param-name>server</param-name> //主机名 <param-value>localhost</param-value> </context-param> <context-param> <param-name>db</param-name&