AngularJS 是一个前端的以Javascript为主的MVC框架。与AngularJS相类似的还有EmberJS。

随着时代在进步,各种各样的开发理念与开发框架不断的提出与发展,而就目前来说,除了游戏、IM(类似QQ)、Office这类软件之外,新出的软件应用开始出现两个方向,一个是以Web为主的Web APP,一个是以移动端为主的移动APP。且,现有也有一种声音认为Web APP早晚会取代移动端原生APP,从而一统计算机软件的应用方式。暂且不论这种说法是否会成为现实,Web APP的火爆可见一斑。

三年前,我编写的Web软件,还都是以后台为主,前台顶多用一下jQuery来进行几个简单的动态效果。两年前,我接触ExtJS,知道还有这么一种Javascript框架能够实现完整的UI订制,从而只需要使用Ajax传数据就可以了。

现在(实际上已经出来很长时间了),我了解到EmberJS以及AngularJS这种将前端的UI构建过程拆分为之前只在后端使用过的MVC的模式。从另一个角度说,现在是把原先的MVC中的V再度拆分一个MVC的应用。

所以,我认为,无论从哪个角度来考虑,单独的将Angular提出来,进行思考和学习是很有必要的。

AngularJS是什么?

AngularJS是一个由Google支持的Web App前端MVC框架。

AngularJS包括什么?

从AngularJS的官方文档中看到,它主要包括如下几个概念:

  • Template —— 模板
  • Directive —— 指令
  • Filter —— 过滤器
  • Controller —— 控制器
  • Scope —— 范围
  • Service —— 服务
  • Module —— 模块

Template Directive Filter这三个主要与“视图”有关。 Controller Scope Service这两个主要与“控制器有关”。 Module用于结构化项目。

注意:就像上面看到的那样,在AngularJS中,没有找到有关Model层的东西!

下面是对各个概念的理解以及如何应用的想法。

  • Directive是一种属性,写在HTML标签当中,用户标识出模板中一些特殊的东西。比如用于显示“部分模板”的<div ng-view></div>
  • Filter根据官网的解释,是用于控制视图中的元素如何显示,或者说显示成什么样的。
  • Template是视图层的具体载体,在Template中可以写一些辅助的逻辑,如ng-if等
  • Controller是控制器,根据官方文档的建议,不应该在Controller中写太复杂的东东,在控制器中只写有关业务逻辑的就可以了。
  • Scope,这个东西在看控制器的介绍的时候看到,在个人理解来看,应该是主要用于进行视图与控制器的数据操作,或者认为是用于打通视图层与控制器的一个东东。
  • 由于文档中写到,不建议在控制器中写太复杂的逻辑,所以我们应该把所有的可供复用的逻辑写到Service(服务)当中。然后我们可以利用AngularJS框架本身的DI(依赖注入)功能将Service注入到具体的控制器中。
  • Module,这个东西类似Java的类库的概念,我们写的所有的控制器、过滤器、服务等都得加到Module中,没什么好说的~

这里要注意一个问题——模型。

按照个人的理解,不论AngularJS再怎样,其数据的直接来源还是服务器,而服务器传数据的话,现在比较流行使用JSON格式,所以,就模型层来说,我们只要利用Service从服务器中获取数据,然后将其解析给在Controller中对应的Scope就行了。剩下的就是AngularJS内部处理,将数据自动绑定到前台了~

参考:

『AngularJS』一点小小的理解的更多相关文章

  1. AngularJS』一点小小的理解

    『AngularJS』一点小小的理解   AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与 ...

  2. 『TensorFlow』通过代码理解gan网络_中

    『cs231n』通过代码理解gan网络&tensorflow共享变量机制_上 上篇是一个尝试生成minist手写体数据的简单GAN网络,之前有介绍过,图片维度是28*28*1,生成器的上采样使 ...

  3. 『AngularJS』理解$Scope

    理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...

  4. 『cs231n』通过代码理解gan网络&tensorflow共享变量机制_上

    GAN网络架构分析 上图即为GAN的逻辑架构,其中的noise vector就是特征向量z,real images就是输入变量x,标签的标准比较简单(二分类么),real的就是tf.ones,fake ...

  5. 『cs231n』通过代码理解风格迁移

    『cs231n』卷积神经网络的可视化应用 文件目录 vgg16.py import os import numpy as np import tensorflow as tf from downloa ...

  6. 『AngularJS』$location 服务

    项目中关于 $location的用法 简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用.改变在地址栏中的URL会作用到$loc ...

  7. 『cs231n』RNN之理解LSTM网络

    概述 LSTM是RNN的增强版,1.RNN能完成的工作LSTM也都能胜任且有更好的效果:2.LSTM解决了RNN梯度消失或爆炸的问题,进而可以具有比RNN更为长时的记忆能力.LSTM网络比较复杂,而恰 ...

  8. 『AngularJS』ngShow

    原文 描述 ngShow指令显示或隐藏给定的基于标明ngShow属性的HTML元素.元素的显示或隐藏通过在元素上移除或添加ng-hide CSS类属性.".ng-hide"CSS类 ...

  9. 『AngularJS』Service

    理解Angular 服务 什么是Angular Service Angular 服务是为web应用执行特定任务的单例对象或方法. 注:如果组件是为了内容呈现的功能复用,那么服务就是为组件进行功能复用. ...

随机推荐

  1. Zepto源代码分析一~核心方法

    今天抽出时间复习了一下Zepto的源代码,依照自己的理解进行凝视. 欢迎大家拍砖. 源代码版本号:v1.1.4 源代码下载地址:http://zeptojs.com/ 分析总体代码之后,整理出架构图: ...

  2. SQL面试题与附解收集(一)

    数据库三范式是什么? 答: 1NF:字段不可分; 2NF:有主键,非主键字段依赖主键; 3NF:非主键字段不能相互依赖; 解释: 1NF:原子性 字段不可再分,否则就不是关系数据库; 2NF:唯一性 ...

  3. ansible 提示安装sshpass

    之前用ansible一直用的root身份.机器之间又早早的做好了ssh信任.所以一直也没有出现什么问题.今天想想自己不能这么浪了,还是用回普通用户吧: 然而马上就遇到了第一个问题,ansible提示安 ...

  4. unity, instantiate一个实例后,先指定parent,再指定position

    instantiate一个实例后,先指定parent,再指定position,才能保证position正确,如果先指定position再指定parent,则position会错误.

  5. Rigidbody-ClosestPointOnBounds测试

    可见是Collider的Bounds

  6. Atitit. 解释器模式框架选型 and应用场景attilax总结 oao

    Atitit. 解释器模式框架选型 and应用场景attilax总结 oao 1. 解释器模式结构描述 1 2. 如何实现(简单的解释器模式,仅仅通过词法分析即可实现,而无需token流进行处理. 2 ...

  7. 【Android】14.0 第14章 内部存储与外部SD卡存储—本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-27 一.简介 Android使用的文件系统是基于Linux的文件系统,在Android应用程序中,开发人员既可以建立和访问程序自 ...

  8. 彻底征服 Spring AOP 之 理论篇

    基本知识 其实, 接触了这么久的 AOP, 我感觉, AOP 给人难以理解的一个关键点是它的概念比较多, 而且坑爹的是, 这些概念经过了中文翻译后, 变得面目全非, 相同的一个术语, 在不同的翻译下, ...

  9. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  10. 【BZOJ】1630: [Usaco2007 Demo]Ant Counting(裸dp/dp/生成函数)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1630 题意,给你n种数,数量为m个,求所有的数组成的集合选长度l-r的个数 后两者待会写.. 裸dp ...