第214天:Angular 基础概念
一、Angular 简介
1、 什么是 AngularJS
- 一款非常优秀的前端高级 JS 框架
- 最早由 Misko Hevery 等人创建
- 2009 年被 Google 公式收购,用于其多款产品
- 目前有一个全职的开发团队继续开发和维护这个库
- 有了这一类框架就可以轻松构建 SPA 应用程序
- 轻松构建 SPA(单一页面应用程序)
- 单一页面应用程序:
+ 只有一个页面(整个应用的一个载体)
+ 内容全部是由AJAX方式呈现出啦的
- 其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。
2、为什么使用 AngularJS
- 更少的代码,实现更强劲的功能
- 将一些以前在后台开发中使用的思想带入前端开发
- 带领当前市面上的框架走向模式化或者架构化
3、AngularJS 的核心特性
- MVC
- 模块化
- 自动化双向数据绑定
- 指令系统
4、相关链接
- http://www.apjs.net/
- http://www.angularjs.cn/
- http://docs.angularjs.cn/api
- https://material.angularjs.org
- http://angular-ui.github.io/
5、Angular 上手
- 安装 Angular
(1)下载 Angular.js 的包
+ https://github.com/angular/angular.js/releases
(2)使用 CDN 上的 Angular.js
+ http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
(3)使用 Bower 安装
```bash
bower install angular
```
(4)使用 NPM 安装
```bash
npm install angular
```
- 每种方式安装包,本质都是将angular的库下载到当前文件夹中
6、angular的优势
- Angular 最大程度的减少了页面上的 DOM 操作;
- 让 JavaScript 中专注业务逻辑的代码;
- 通过简单的指令结合页面结构与逻辑数据;
- 通过自定义指令实现组件化编程;
- 代码结构更合理;
- 维护成本更低;
- Angular 解放了传统 JavaScript 中频繁的 DOM 操作
7、angular中最重要的概念是指令(directive)
- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的user.name建立绑定关系
8、运行官方文档
由于众所周知的原因,Angular 官网打不开
我们需要本地运行 Angular 文档
下载最新的 Angular 包
解压后有一个 docs 文件夹
必须通过 http 服务器访问该文件夹
可以通过 SublimeServer 或者 http-server 运行
9、推荐工具
- 在线编辑器
+ https://jsfiddle.net/
二、 Angular 基础概念
1、MVC 思想
- 将应用程序的组成划分为三个部分:Model View Controller
模型:处理数据和业务逻辑
视图:以友好的方式向用户展示数据
控制器:组织调度相应的处理模型
- 控制器的作用就是初始化模型用的;
- 模型就是用于存储数据的
- 视图用于展现数据
- 登陆案例分析MVC思想
- 模型
+ 我们数据库中所有用户的信息
+ 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
- 控制器
+ 接受用户在界面上填写的用户名和密码
+ 将用户名和密码交给模型
- 视图
+ 给用户呈现一个表单
+ 接受用户输入内容,并将其提交给控制器
+ 根据控制器返回的数据,响应用户页面
2、模块(Module)
AngularJS很重要的一个特性就是实现模块化编程,我们可以通过以下方式创建一个模块,对页面进行功能业务上的划分
1 // 创建一个名字叫MyApp的模块,第二个参数指的是该模块依赖那些模块 2 3 var myApp = angular.module("MyApp", []);
也可以将重复使用的指令或过滤器之类的做成模块便于复用
注意必须指定第二个参数,否则变成找到已经定义的模块
3、控制器(Controller)
调度逻辑的集合
1 angular.module('OneApp', []) 2 3 .controller('HelloController', [ 4 5 '$scope', 6 7 function($scope) { 8 9 $scope.p = { 10 11 name: 'zhangsan' 12 13 }; 14 15 } 16 17 ]);
控制器的三种主要职责:
- 为应用中的模型设置初始状态
- 通过$scope对象把数据模型或函数行为暴露给视图
- 监视模型的变化,做出相应的动作
// 监视购物车内容变化,计算最新结果
$scope.$watch(‘totalCart’, calculateDiscount);
$scope(上下文模型)
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope暴露数据模型(数据,行为)
4、表达式(Expression)
作用:
使用 表达式 把数据绑定到 HTML。
语法:
表达式写在双大括号内:{{ expression }}。
比较:
表达式作用类似于ng-bind指令
建议更多的使用指令
AngularJS表达式很像JavaScript表达式
它们可以包含文字、运算符和变量
如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }}
对比 JavaScript 表达式
相同点:
AngularJS 表达式可以包含字母,操作符,变量。
不同点:
AngularJS 表达式可以写在 HTML 中。
AngularJS 表达式不支持条件判断,循环及异常。
AngularJS 表达式支持过滤器。
5、数据绑定
- 单向数据绑定
模型变化过后,自动同步到界面上;
一般纯展示型的数据会用到单项数据绑定;
使用表达式的方式都是单向的
- 双向数据绑定
两个方向的数据自动同步:
模型发生变化自动同步到视图上;
视图上的数据发生变化过后自动同步到模型上;
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
设计模式快速学习(一)工厂模式
工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。我们熟悉的Spring 的 bean 工厂等。 直接上demo.先代码,后介绍。 1. 编写接口Shape Shape .java /** * 一个接口:关于形状 * Created by Fant.J. */ public interface Shape { /** * 描述方法 */ void describe(); } 2. 编写实现类 Circle .java /** * Created by Fant.J. */ public class Circle implements Shape { /** * 描述方法 */ @Override public void describe() { System.out.println("我是个圆形"); } } Rectangle .java /** * Created by Fant.J. */ public class Rectangle implements Shape { /** * ...
- 下一篇
ABAP正则表达式 vs SPLIT INTO
需求: 把如下通过"/"连接起来的三个字符串分别解析出来。 传统的做法见下图第98行的function module SKWF_UTIL_IO_FIND_BY_KEY: 这个function module的作用就是解析用两个/分隔开的document type: L, document class: CRM_L_ORD和document guid。 这个function module采用传统的做法,把三个key拆分并存储到一个内标里,然后READ TABLE INDEX 1,2,3的方式分别取出每个key。用了42行代码。 如果用正则表达式,只需1行代码: 而且后者比前者快3~6倍:因为FIND REGEX是在ABAP Kernel用C++实现的,比在ABAP端做要高效。参考如下的性能测试比较结果(单位:微秒)。 要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7设置SWAP分区,小内存服务器的救世主