一、什么是Angular

  • jQuery，它属于一种类库(一系列函数的集合)，以DOM为驱动核心；而Angular是一种 MVC 的前端框架，则是前端框架，以数据和逻辑为驱动核心，它有着诸多特性，最重要的是：模块化，双向数据绑定，语义化标签，依赖注入等。
  • MVC 开发模式：model（模型），view（视图），controller（控制器）。

二、模块化

最大程度实现代码复用
定义应用
  • 为HTML标签添加 ng-app 属性，表明整个文档都是应用，也可指定标签添加，该标签包裹的所有内容都是应用的一部分（++注：没有关联相应模块，一定不能赋值；但如果关联相应模块，必须赋值++）
定义模块
  • 提供一个全局对象Angular，用angular.module(参数1，参数2)方法定义模块，输出一个返回值。
  • 第一个参数：跟ng-app的值一致；
  • 第二个参数：数组。表明该模块依赖其他模块，依赖不存在则写 [ ]；

定义控制器（view和model的桥梁）
  • 定义模块输出的返回值.controller(参数1，参数2)。
  • 第一个参数：控制器名称（++确定与view的关联++，在HTML标签添加ng-controller：控制器名称）；
  • 第二个参数：为一个数组，除了最后一个单元是函数，其余都是字符串，该参数表明控制器的依赖关系。

三、指令

  • 常用内置指令

    1.ng-app 指定应用根元素，至少有一个元素指定了此属性。

    2.ng-controller 指定控制器

    3.ng-show 控制元素是否显示，true显示、false不显示（通过display：none/block来控制）

    4.ng-hide 控制元素是否隐藏，true隐藏、false不隐藏

    5.ng-if 控制元素是否“存在”，true存在、false不存在（与ng-show区别：当为false的时候，连同整个DOM节点都不存在）

    6.ng-src 增强图片路径

    7.ng-href增强地址

    8.ng-class 控制类名 (后面可接对象,如ng-class="{done: true}")

    9.ng-include 引入模板

    10.ng-disabled 表单禁用

    11.ng-readonly 表单只读

    12.ng-checked 单/复选框表单选中

    13.ng-selected 下拉框表单选中

  • 自定义指令

    • directive

四、数据绑定

单向绑定
  • 只能是模型数据向视图传递（类似artTemplate模板引擎的工作方式）
  • 相关指令：
    • 通过 {{}} 或者 ng-bind 来实现模型数据向视图模板的绑定，模型数据由一个内置服务$scope提供，它是个空对象，通过为这个对象添加属性或方法，便可以在相应的视图模板里被访问。
    • 这里的 {{}} 是 ng-bind 的简写形式，区别在于通过 {{}} 绑定数据时会出现闪屏，添加添加 ng-cloak 也可以解决“闪烁”现象。
双向绑定
  • 视图 -->传到 模型上 -->再传回视图
  • 相关指令：
    • ng-model
  • 举一个小例子：
    <body ng-app>

	<input type="text" ng-model='mesg'>

	<h1>{{mesg}}</h1>

</body>
初始化模型（既初始化$scope）
  • ng-init （很少用）。
事件处理
  • 无需显式的获取DOM元素便可添加事件
  • 在原有事件前面添加前缀“ng”，然后以属性的形式添加到HTML便签中，例如：ng-click
数据处理
  • 相关指令：

    • ng-repeat: 可以将数组或对象数据迭代到视图模板中
    • ng-switch 和 ng-switch-when 配合使用

五、作用域

  • 每个controller下的$scope产生不同的作用域
  • 根作用域：ng-app所在的标签内

六、过滤器

  • 内置过滤器

    • currency[货币] 将数值格式化为货币格式
    • date 日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
    • filter 在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
    • json 将Javascrip对象转成JSON字符串。
    • limitTo 取出字符串或数组的前（正数）几位或后（负数）几位
    • lowercase 将文本转换成小写格式
    • uppercase 将文本转换成大写格式
    • number 数字格式化，可控制小位位数
    • orderBy 对数组进行排序，第2个参数是布尔值可控制方向(正序或倒序)
  • 自定义过滤器
    • 通过模块对象实例提供的filter方法自定义过滤器
  • 总结
    • 竖线调用，冒号传值。

七、依赖注入

  • 通过注入的方式解决依赖问题，通过回调函数的参数来实现。
  • 常见AngularJS内置服务：$http、$http、$location、$timeout、$rootScope
  • 分类：
    • 行类式
    • 推断式（不建议使用，代码压缩后，参数无法找到，无法找到依赖）

八、服务

  • 内置服务

    • $Timeout 和 $interval与原生JS区别，不需要每次手动开启脏值检查，即$scope.$digest()
    • 是对原生JS的封装
    • 常见内置服务：

      • $http 向服务器端发起异步请求（注意前后端言行（接收/发送）一致）

        • post的请求方式：对应数据用data，
        • post要有个请求头headers，这里headers的值用{}括起来，angularJS默认是'application/json'。发送请求头有两种格式来传送数据（注意：php中$_POST[ ]只能接收formData格式数据的application/x-www-form-urlencoded这一种格式的数据）
          • 'Content-Type', 'application/x-www-form-urlencoded'，该格式发送的参数为字符串key=value格式，例如"username=zhangsan".
          • 'Content-Type', 'application/json'，该格式发送的参数为json格式，例如{"username"："zhangsan"}
        • get的请求方式：对应数据用params，ps:服务器端接收$_GET[]， 在success中打印$log.info(ret)可以检查数据是否传到服务器。
        • 1.5.8之前的版本，回调函数用success()，error()；1.6版本之后的版本用then()
        • 跨域
          • jsonp 用一句话概括，前端发送一个事先定义好的函数名给服务端，服务端接收这个函数名并拼凑“（）”，并返回；前端就接收了一个函数的调用
          • method: "jsonp" ,params:{ callback:"JSON_CALLBACK" },其中JSON_CALLBACK为临时定义的函数名发给服务端，让服务端替换(注:1.6之后不需写这个)；在jquery中，自动帮你传了，所以不用这一步。

      • $log 打印调试信息($log.log()、$log.error()、$log.warn()、$log.debug()、$log.info())

      • $filter 在控制器中格式化数据

      • $Timeout 和 $interval

  • 自定义服务

九、模块加载

  • 配置块

    • 通过config来实现对服务的配置（也可以更改一些服务的默认设置）,AngularJS绝大多数服务都有对应的provider。例如：$route 对应的$routeProvider(配置路由)
  • 运行块
    • 特殊：run方法 还是最先执行的。 案例：比如验证用户是否登录，未登录则不允许进行任何其它操作。

十、路由

  • 功能：一个应用由若干个个视图组成，然后呢，根据不同的业务逻辑展示不同的视图给用户。

  • 理解

    • SPA：Single Page Application 单页面应用
    • 链接使用锚点
    • 单一页面原理：单页面通过hashchange事件监听锚点的变化，实现不同锚点准备找到对应的视图

  • 路由: AngularJS基于单一页面原理进行封装，将锚点变化封装成路由，这也是与后端路由的根本区别

  • 路由的使用：

    • 需引入angular-route.js文件

    • 实例化模块，传入依赖（路由名称为：ngRoute）

    • 配置路由（config、$routeProvider、when（条件））

    • 布局模板（用ng-view指令，路由匹配的视图会渲染到该区域）

  • 路由的参数：

    • 两种方法匹配路由：when和otherwise，when可以调用多次。otherwise作为when的补充，参数只有一个。
    • when有两个参数
      • 参数1：是个字符串，代表当前url的hash值；例如：“/：type”
      • 参数2：是一个对象，配置当前路由参数，如视图、控制器
        • template：字符串形式视图模板
        • templateUrl：引入外部视图模板
        • controller：视图模板所属控制器，作用之一：通过http请求向后台要数据
        • redirectTo：跳转到其他路由 例如：“/2”；
    • 获取路由参数，在控制器中注入$routeParams，可以传递参数给后台或其他。

前端MVC框架之 Angular的更多相关文章

  1. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  2. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  3. 最轻量级的前端Mvc框架backbone

    最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...

  4. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

  5. 前端三大框架（Angular Vue React）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  6. 前端MVC框架Backbone 1.1.0源码分析系列

    Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...

  7. Web前端MVC框架

    MVC: 模型层(model).视图层(view).控制层(controller) Model:即数据模型,用来包装和应用程序的业务逻辑相关的数据或者对数据进行处理,模型可以直接访问数据. View: ...

  8. 前端mvc框架backbone.js入门[转]

    原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...

  9. 前端mvc框架backbone.js入门

    关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...

随机推荐

  1. 【Spring】使用Spring的AbstractRoutingDataSource实现多数据源切换

    最近因为项目需要在做两个项目间数据同步的需求,具体是项目1的数据通过消息队列同步到项目2中,因为这个更新操作还涉及到更新多个库的数据,所以就需要多数据源切换的操作.下面就讲讲在Spring中如何进行数 ...

  2. Javascript面对对象. 第一篇

    Javascript,有两个种开发模式: 1.函数式(过程化)2.面对对象(oop),面对对象语言有一个标志,就是类,而通过类可以创建任何多个属性和方法,而Ecmascript没有类的概念,因此它的对 ...

  3. BZOJ 4085:[Sdoi2015]quality(round 2 音质检测)(数据结构)

    居然在考场上把这道题打出来了觉得自己也是有点吊啊(虽然后面就没时间做其他题了囧而且还被卡常数了...) 题解自己写了一份TEX的就直接放上来吧.... 好啦,在谈点什么别的 什么?你在bz上TLE了? ...

  4. mybatis的动态sql中collection与assoction

    User.java, Role.java,address.java为三个类 public class User { .....//user自己的属性//association一对一 private R ...

  5. 2017-2-23 C#基础 for循环

    循环语句主要有:for;while;foreach.最常用的是for循环.for循环的四要素:初始条件:循环条件:循环体:状态改变.for循环的顺序是:初始条件--循环条件--循环体--状态改变.br ...

  6. index_merge引发的死锁排查

    概述 前几天排查了一个死锁问题,最开始百思不得其解,因为发生死锁的两个事务是单语句事务,语句类型相同(where属性列相同,仅值不同),而且语句都走了相同的索引,但最终确实发生了死锁.通过定位排查发现 ...

  7. rsyslog+mariadb+loganalyzer实现日志服务器搭建

    rsyslog+mariadb+loganalyzer实现日志服务器搭建 一.概述 Linux的日志记录了用户在系统上一切操作,包括系统自身运作产生的日志,这些日志是应使用者了解服务器的情况最好的资料 ...

  8. sql server中部分函数功能详解

    1.TOP 子句 TOP 子句用于规定要返回的记录的数目. 对于拥有数千条记录的大型表来说,TOP 子句是非常有用的. SQL Server 的语法: SELECT TOP number|percen ...

  9. 用ASP.NET创建网站

    ASP.NET提供三种框架来创建web应用:WebForms,ASP.NET MVC和ASP.NET WebPages.这三种框架都是稳定成熟的,你可以用任何一种方式开发一个很棒的web应用.不管你选 ...

  10. “使用多target来构建大量相似App”，唐巧大神理论验证（附工程代码地址）

    无意间看到巧神的文章时,感觉非常兴奋,此文章正好解决了公司目前项目的痛点. 读到以下关键一段时,不甚明了,故自己做了实验分享给有缘人. "我们的每个课程的资源文件都具有相同的文件名,例如首页 ...