第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、数据绑定

  • 单向数据绑定

    模型变化过后,自动同步到界面上;

    一般纯展示型的数据会用到单项数据绑定;

    使用表达式的方式都是单向的

  • 双向数据绑定

    两个方向的数据自动同步:

    模型发生变化自动同步到视图上;

    视图上的数据发生变化过后自动同步到模型上;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

Javascript中的异步

832
来自专栏文渊之博

部署和使用kibana

背景 本文将主要介绍ELK的可视化工具Kibana的部署和使用。主要分为三个步骤来实现最终呈现:   1.导入数据到ES;   2.部署kiban...

26110
来自专栏蓝天

Linux中系统整体性能监控工具详细介绍

 mpstat: mpstat 不但能查看所有CPU的平均信息,还能查看指定CPU的信息。

1172
来自专栏H2Cloud

C++执行内存memcpy的效率测试

在进行memcpy操作时,虽然是内存操作,但是仍然是耗一点点CPU的,今天测试了一下单线程中执行memcpy的效率,这个结果对于配置TCP epoll中的wor...

4524
来自专栏烙馅饼喽的技术分享

我的CMS开发记-4 介绍一下DotNetNuke的系统执行流程

       有朋友说应该写个大致结构出来。想想也有道理,那么我就来介绍一下Dotnetnuke的执行流程。基本上我这个就是照搬他的 基本思路     一个站点...

3498
来自专栏数据和云

如何提高Linux下块设备IO的整体性能?

编辑手记:本文主要讲解Linux IO调度层的三种模式:cfp、deadline和noop,并给出各自的优化和适用场景建议。 作者简介: ? 邹立巍 Linux...

6924
来自专栏Hadoop数据仓库

将MySQL去重操作优化到极致之三弹连发(二):多线程并行执行

        上一篇已经将单条查重语句调整到最优,但该语句是以单线程方式执行。能否利用多处理器,让去重操作多线程并行执行,从而进一步提高速度呢?比如我的实验环...

2027
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用wrk对HTTP延迟进行基准测试

本文重点介绍称为开源HTTP基准测试工具WRK,它可以在高负荷下测量HTTP服务的延迟。

4560
来自专栏开发 & 算法杂谈

并行化的动态数据竞争验证和检测方法

之前系列提到的动态数据竞争验证和检测方法是结合了验证和检测两部分。这篇文章主要介绍一下并行化的动态数据竞争验证和检测方法。

2334
来自专栏用户画像

4.2.4 文件系统实现

线性列表就是把文件名组织成一个线性表,查找的时候依次与线性表中每个表项进行比较。若把文件名按序排列使用折半查找法 可以降低平均的查找时间,但是建立新文件时会增加...

802

扫码关注云+社区

领取腾讯云代金券