angularJS中的mvc是借助于$scope实现的。

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。scope 是模型。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
  • Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

（1）模块：AngularJS中的module作为Angular应用程序的入口点。那模块从何而来呢？这里不做过多探讨，涉及到依赖注入的概念。依赖注入是AngularJS中主要的优点之一，在DI作为一种设计模式被定义在应用程序中作为配置的一部分，如此一来，无需我们手动去创建，当应用程序首次启动时，DI会自动加载模块依赖。

（2）模型类：拿MVC类比，我们通过模型来获取数据，此时我们必须定义模型类，同理在大多数JavaScript客户端框架中也会要求我们创建模型类，但是在AngularJS中这种情况不会发生，在AngularJS中有一个scope对象，此对象用来存储模型类，Scopes被附加到DOM元素上，我们可以通过使用数据属性到scope对象，此对象用来存储模型类，Scopes被附加到DOM元素上，我们可以通过使用数据属性到scope的对象。$rootScope是AngularJS程序中的父Scope。

（3）控制器：在AngularJS中控制器作为视图和model的桥梁，在这个控制器这个区域中我们可以放置一个视图的所有业务逻辑。当应用程序中的业务逻辑被多个控制器所使用时，此时我们应该将业务逻辑放置在AngularJS中的Service（服务）中，当我们需要用到这些业务逻辑时，我们需要在DI的帮助下来获取这些服务。

视图（View）、$scope、控制器（Controller）之间的关系。

 <html ng-app="myApp"> 

<head> 

    <title></title> 

    <script type="text/javascript" src="Scripts/angular.min.js"></script>

    <script type="text/javascript" src="app.js"></script>

    <script type="text/javascript" src="scopeController.js"></script>

</head> 

<body> 

    <div ng-controller="ctrlName"> 

        <input type="text" width="200px" ng-model="name" /> 

        <h2>Your Name : {{name}}</h2> 

    </div> 

</body> 

</html>

app.controller('ctrlName', function ($scope) { 

    $scope.name = ''; 

});

【angularJS】MVC的更多相关文章

  1. 【AngularJS】 2.0 版本发布

    [AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布   w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...

  2. 【C#】MVC项目中搭建WebSocket服务器

    前言 因为项目需要,前端页面中需要不断向后台请求获取一个及一个以上的状态值.最初的方案是为每个状态值请求都建立一个定时器循环定时发起Ajax请求,结果显而 易见.在HTTP1.1协议中,同一客户端浏览 ...

  3. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  4. 【angularJS】Route路由

    介绍 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). ...

  5. 【angularJS】Directive指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...

  6. 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"

    项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...

  7. 【AngularJs】---Error: [$injector:modulerr] Failed to instantiate module starter.services

    [遇到问题解决问题,原谅我这个菜鸟] 加了services angular.module('starter', ['ionic', 'starter.controllers', 'starter.se ...

  8. 【AngularJS】——0.分析

    [引导分析]1.什么是AngularJS? 2.为什么要使用它? 3.应用场合? 4.基本思想? 5.四大核心特征? 6.优缺点是什么? 1.定义:AngularJS是一个用于设计动态web应用的前端 ...

  9. 【angularJS】$Scope

    $Scope Scope(作用域)是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,用来保存AngularJS Model(模型)的对象. Scope 是一个对象,有可用的 ...

随机推荐

  1. JavaScript权威指南--客户端存储

    客户端存储web应用允许使用浏览器提供的API实现将数据存储在用户电脑上. 客户端存储遵循“同源策略”,因此不同站点的页面是无法读取对于存储的数据.而同一站点的不同的页面之间是可以互相共享存储数据的. ...

  2. HighCharts常用设置

    1. X轴文字斜着放,在xAxis里设置 xAxis: { labels: { rotation: -90 //竖直放 rotation: -45 //45度倾斜 } } 2. 柱形图柱形的宽度和边框 ...

  3. Apache 配置SSL网站

    1. 申请证书    现在可以在阿里云或七牛上申请免费的证书,这里以阿里云为例        进入阿里云证书申请界面    https://www.aliyun.com/product/cas     ...

  4. java开发中的重中之重-------mysql（基础篇）

    介绍: mysql是目前世界上最流行的关系型数据库,在国内大的互联网公司都在使用mysql数据库,mysql经常被我们这样概述,“mysql是轻量级关系型数据库”,其实轻量级并不是说mysql是中小型 ...

  5. 翻译"Python编程无师自通——专业程序员的养成"

    这本书在 畅销Python编程类入门书,美国亚马逊Kindle编程类排行榜榜一. 开始初学python,也有不少书了,不想在白花钱(买了就放那里不看了),看一个英文文档的原著,准备每天翻译一点,放到b ...

  6. iptables详解（9）：iptables的黑白名单机制

    注意:在参照本文进行iptables实验时,请务必在个人的测试机上进行,因为如果iptables规则设置不当,有可能使你无法连接到远程主机中. 前文中一直在强调一个概念:报文在经过iptables的链 ...

  7. json与api- 天气api 博客词频分析

    一.json基础 1.1 json的介绍 json现在成为各种程序与语言之间交互的一种数据格式,本质是文本,字符串. json有两种格式: 1.  类似字典  {k:v,k,v} 2.  类似列表 { ...

  8. 012——数组（十二） 数组range array_count_values array_pad array_product

    <?php /*range () 生成包含指定范围的数组,第三个参数是步长值 */ /*$arr=range(1,10,2); print_r($arr);//输出:Array ( [0] =& ...

  9. 普通用户开通sudo权限：xxx is not in the sudoers file.This incident will be reported.的解决方法

    1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是: chmod u+w /etc/sudoers 3.编辑sudoers文件 vi /etc/s ...

  10. nginx的编译，和简单的配置问题

    反向代理常见的lvs.haproxy. 缓存服务常见的.squid.vanish.常见的前端缓存.Apache是多进程的web服务器,Nginx是多线程的web服务器. Nginx的特点,对静态能力强 ...