【angularJS】MVC
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的更多相关文章
- 【AngularJS】 2.0 版本发布
[AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布 w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...
- 【C#】MVC项目中搭建WebSocket服务器
前言 因为项目需要,前端页面中需要不断向后台请求获取一个及一个以上的状态值.最初的方案是为每个状态值请求都建立一个定时器循环定时发起Ajax请求,结果显而 易见.在HTTP1.1协议中,同一客户端浏览 ...
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- 【angularJS】Route路由
介绍 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). ...
- 【angularJS】Directive指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...
- 【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got undefined"
项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js&quo ...
- 【AngularJs】---Error: [$injector:modulerr] Failed to instantiate module starter.services
[遇到问题解决问题,原谅我这个菜鸟] 加了services angular.module('starter', ['ionic', 'starter.controllers', 'starter.se ...
- 【AngularJS】——0.分析
[引导分析]1.什么是AngularJS? 2.为什么要使用它? 3.应用场合? 4.基本思想? 5.四大核心特征? 6.优缺点是什么? 1.定义:AngularJS是一个用于设计动态web应用的前端 ...
- 【angularJS】$Scope
$Scope Scope(作用域)是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,用来保存AngularJS Model(模型)的对象. Scope 是一个对象,有可用的 ...
随机推荐
- 技术分享:JS工作原理
一 浏览器组成可分两部分:Shell+内核. 浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎. 渲染引擎功能作用 渲染引擎,负责对 ...
- cassandra 之 在spark-shell 中使用 spark cassandra connector 完整案例
1.cassandra 准备 启动cqlsh, CQLSH_HOST=172.16.163.131 bin/cqlsh cqlsh>CREATE KEYSPACE productlogs WIT ...
- java.net.SocketException: Connection reset 问题分析
1. socket编程时容易碰到如下异常: java.net.SocketException: Connection reset by peer: socket write error at java ...
- Java 类的构造器的调用顺序
规则如下: 对于一个复杂的对象,构建器的调用遵照下面的顺序: (1) 调用父类构建器.这个步骤会不断重复下去,首先得到构建的是分级结构的根部,然后是下一个子类,等等.直到抵达最深一层的子类. (2) ...
- 51nod-1179-最大的gcd(数学)
1179 最大的最大公约数 题目来源: SGU 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 给出N个正整数,找出N个数两两之间最大公约数的最大 ...
- crontab执行定时任务
在linux下面使用命令crontab -e 编辑任务: [adv@localhost]$ crontab -e 之后开始编辑任务 * * * * * cd /home/adv/work/cutte ...
- IPv6 地址分类
IPv6本地链路地址 IPv6本地链路地址,类似于IPv4中APIPA(Automatic Private IP Addressing,自动专用IP寻址)所定义的地址169.254.0.0/16. I ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- Shell 变量,Shell echo命令
一.Shell 变量 定义变量时,变量名不加美元符号($,PHP语言中变量需要),如: your_name="runoob.com" 注意,变量名和等号之间不能有空格,这可能和你熟 ...
- LeetCode OJ:Group Anagrams(同字符字符群)
Given an array of strings, group anagrams together. For example, given: ["eat", "tea& ...