一些关于angular的总结

1. Angular介绍

1.1. 库和框架的区别

  • jQuery：库

    • 库一般都是封装了一些常用的方法
    • 自己手动去调用这些方法，来完成我们的功能 
            $(‘#txt‘).val(‘我是小明‘);
      $(‘div‘).text(‘xx‘);
  • angular：框架
    • 框架都是提供一种规范或者模式,
    • 我们却要按照它提供的这种规则去写代码
    • 框架会自动帮助我们去执行相应的代码.
  • 其实可以简单的理解为：大而全的是框架，小而精的是库

1.2. AngularJs是什么

  • 百度百科http://baike.baidu.com/link?url=CKrQ1574lIOkgQ8-FBB1fxuEJzIf0Jscf2n53rxuVjK37wm0M4LupH--17Ix6towMSRoizil9Dk8mqhK4-PXGK
  • 一款非常优秀的前端高级 JS 框架
  • 最早由 Misko Hevery 等人创建
  • 2009 年被 Google 公式收购，用于其多款产品
  • 目前有一个全职的开发团队继续开发和维护这个库
  • 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
  • Angular不推崇DOM操作，也就是说在NG中几乎找不到任何的DOM操作
    • angular，几乎不会使用angualr操作dom（但是angular内部肯定是使用dom来改变页面的值）
  • Angular 主要是来做什么的，帮助我们方便的去写spa应用程序

1.2.1. 什么是AngularJS

  • 一个前端框架，提供一种无DOM操作的编程方式，在前端页面中引入了传统在后台开发中使用的一些思想，增强代码的结构和可维护性
  • 一个功能非常完备的前端框架，通过增强HTML的方式提供一种便捷开发Web应用程序的方式
  • 其核心特点就是几乎无任何DOM操作，让开发人员的精力和时间全部集中于业务
  • MVC的特性增强了代码的结构和可维护性，应对需求的变化做出最小的改动

1.2.2. 什么是 SPA

  • single page application的缩写
  • 单页应用程序
  • 原理就是：通过监视hashchange事件，根据不同的url中的锚点值，去动态的发送ajax请求去请求数据（简单的说就是不会看到页面刷新）
    • 可以参照资料-备课代码-01理解
    • 网站实例：music.163.com

1.2.3. SPA的优点

  • 响应效果好，体验好
  • 重用资源
  • 方便统一控制和代码重用，不想访问应用了，在入口的控制一下就可以。

1.2.4. 扩展：如何获取url中的各部分参数，比如hash

  • 字符串操作
  • 正则表达式去匹配url
  • 创建a对象 
    var a=document.createElement(‘a‘);
a.hreg=‘http://www.baidu.com?id=23#home‘;
a.pathname
a.hash
a.search

1.3. 为什么要学Angular

  • 主要是为了就业，出去之后立马就能找到工作
  • 新的技术在中国市场推广开来，还是需要一定时间的
  • https://www.awesomes.cn

1.4. 为什么要使用Angular

  • 总结一句话：为了更少的代码，实现更强劲的功能

    • 很多操作都需要dom操作，但是angular中没有那么多的dom操作，这是因为angular帮我们封装了，减少了我们开发人员的dom操作
    • 一般在angular中就不会出现jquery了，因为这两种思想正好是相悖的。
    • 参照资料-备课代码-02-compare中的四个例子体会
  • 上面的意义只是皮毛，它真正的意义是:angular又是一场革命，带领前端进入了MVX时代。
    • 这就像从手工业转为机械工业一样，以前很多东西都是我么你自己手动去做，现在我们有了gulp，webpack这些自动化构建工具。

2. Angular的使用

2.1. Angular相关资料

2.2. 安装 Angular

  • 暴力安装:

    • 手动的去github下载安装
  • 通过工具安装:
    • npm : npm install angular
    • bower: bower install angular
  • CDN
  • 本质都为了拿到angular.js这个文件。
  • 2.4. 理解angular的整个开发流程
  • ng-app:告诉angular来管理页面的代码块是什么（ng-app所在元素及其子元素）
  • ng-click : 类比成onClick，是用来为当前元素注册点击事件的
  ng-click="val = (val-0) + 1"
  相当于：
  var add = document.getElementById(‘add‘);
  add.addEventListener(‘click‘,function(){

  }
  • ng-model: 用来获取文本框的值,是于input的value值进行了绑定。

    • 改变ng-model的属性值对应的值，文本框的值就会改变,
  ng-model = "val";//angular就会帮助我们去创建一个val变量
  相当于:
  var num = document.getElementById(‘num‘).value;
  • ng-init 指令: 用于对ng-model指定的值进行初始化操作

    ng-init = "val = 10"
  • ng-controller：我们的业务逻辑，数据模型都要写在这里面
  • $scope:这个就相当于我们所画的途中的数据模型， 在它上面给以挂载变量和方法。
    • 请参照资料-图片-02-计算器对应关系说明图
  • 表达式: {{}}，相当于模板函数中的模板输出

    • 在大括号内部写上一个ng-model对应的文本框的值

2.5. 使用AngularJS的流程

  1. 借助npm下载到本地
  2. 在HTML代码中引入Angular.js包
  3. 在JS代码中通过angular.module(‘myApp‘, [])注册一个模块
  4. 在HTML代码中将刚刚定义的模块通过ng-app="myApp"指令的方式作用到一个特定的元素上
  5. 根据当前页面的情况（业务块）划分控制器
  6. 在HTML代码中将刚刚定义的控制器通过ng-controller="ControllerName"作用到特定的元素上
  7. 建模（根据界面原型抽象一个数据模型）得到一个视图模型（ViewModel）
  8. 在JS代码中通过$scope暴露需要提供到页面的数据成员
  9. 在HTML代码中将刚刚暴露出来的数据通过类似ng-model/{{}}/ng-click之类的指令绑定到特定的元素上
  10. 在JS中完成业务逻辑（还可以展开）
  • 在思想上：

    • JQ提高了操作DOM的开发效率
    • NG几乎没有任何DOM操作（不是没有，只是不用我们自己操作）
    • NG内置一个类似JQ的东西angular.element()
    • Angular 不提倡DOM操作，如果必须使用DOM的话，也不建议再去引用jquery，有内置

2.6. 如何查看angular离线文档

  1. angular文档设计的非常好都是一个功能一个功能的js分开的，主模块有1000多kb,这个应该是大家见过的最大的js库了
  2. 因为angularJS的文档需要引用angularjs的东西，所以要用http-server模块打开的话，必须在文档的根目录启动hs -o

3. Angular 核心概念

  • 模块化
  • MVC - 思想
  • 指令
  • 双向数据绑定

3.1. angular.module（模块）

3.1.1. 作用

  • 通过模块对页面进行业务上的划分
  • 将重复使用的指令或者过滤器之类的代码做成模块，方便复用
  • 注意必须指定第二个参数，否则变成找到已经定义的模块
    • 请参照资料-备课代码-06-module.html理解

3.1.2. 语法

  • 根据不同的功能划分不同的模块。
  • 创建一个模块
  • 语法： angular.module(‘模块名‘,[])
    • 第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块
    • 注意: 即便我们不依赖其他的模块，也需要传递一个空数组 
        因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象
    • angular.module(‘myApp‘),是获取一个名为myApp的模块对象。
    • 我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:
      • 告诉anuglar,现在由我们自己创建的这个模块来管理页面。

3.2. angular.controller（控制器）

3.2.1. 作用

  • 为应用中的模型设置初始状态
  • 通过$scope对象把数据模型或者函数行为暴露给视图
  • 监视模型的变化，做出相应的动作
    • 请参照资料-备课代码-08-reg2.html理解

3.2.2. 语法

  • 控制器是通过模块对象来创建的:

    • 语法: var app = angular.module(‘模块名‘,[])app.controller(‘控制器的名字‘,function($scope){ // 在这个function里写我们具体想要执行的代码 // $scope 就是用来存储我们的数据模型. })
    • 我们需要在页面上使用了数据模型的元素父级元素上加上ng-controller指令，并给这个指令一个属性值，这个值就是我们创建的控制器名字。

3.3. 双向数据绑定(双向数据绑定)

  • 页面文本框的值改变，导致数据模型的值发生改变，
  • 数据模型的值的改变，反过来导致页面文本框的值的改变，这种相互影响的关系，我们起了个名词，叫作双向数据绑定。
  • ng-model = ""

3.4. 单向数据绑定

  • 只能一数据模型的值改变，导致页面值的改变;

3.5. MVC 思想

3.5.1. 什么是 MVC 思想

  • 将应用程序的组成划分为三个部分：Model View Controller

    • 模型：数据处理
    • 视图：以友好的方式向用户展示数据
    • 控制器：业务逻辑处理
  • 控制器的作用就是初始化模型用的；
  • 模型就是用于存储数据的,做一些业务逻辑的操作。
  • 视图用于展现数据

3.5.2. 用MVC构建应用的优势

  • 剥离开视图和逻辑之间的关系，无论怎么修改dom操作都不用修改业务逻辑代码
时间： 2024-10-12 22:55:47

一些关于angular的总结的相关文章

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b

Angular 2基础(一) 环境搭建

Angular2是一款开源JavaScript库,由Google维护,用来创建页面应用程序.正式发布于2016年9月,基于ES6开发. 一.准备工作 使用Angular2开发,需要预先做一些配置上的配置,如NPM.Node.Js.Git等,还要对TypeScript有个大概的了解. a)NPM是随同NodeJS一起安装的包管理器,那应该类似NuGet的作用了.NPM集成在了NodeJS安装包,可以一起安装,在CMD输入npm –v和node –v可以验证是否已安装. b)TypeScript则是

angular踩坑之路：初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

angular参考手册拷贝

AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-check

angular 动画

ngAnimate 做了什么? ngAnimate 模型可以添加或移除 class . ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画. AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-swit

angular.copy和angular.extend

angular.copy用于深复制,而angular.extend用于拓展.     angular.copy(src,[dst]) src:源对象 dst:目标对象,复制的对象 js中 '= '操作符复制的是指针,所以前后两个变量指向的还是内存中的同一个对象,所以在其中一个变量上操作该对象时,对另外一个变量也会生效.而angular.copy方法是深复制,会在内存中再生成一个对象,两个变量彼此独立,互不影响. 接收一个必须参数src,一个可选参数dst.如果dst没有提供,就会创建对象或者数组

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

Angular this vs $scope

this vs $scope ------------------------------------------------------------------------------ 'this' vs $scope in AngularJS controllers How does this and $scope work in AngularJS controllers? Short answer: this When the controller constructor functio