程序博客网 > 淘宝客佣金终于追回了

angular入门1

来源：互联网 发布：淘宝客佣金终于追回了 编辑：程序博客网 时间：2024/05/16 15:03

AngularJS -入门1

AngularJS概述

Angular图标

介绍

  • 简称：ng
  • Angular是一个MVC框架
AngularJS 诞生于2009年，由 Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化(编程)、自动化双向数据绑定、语义化标签、指令、依赖注入等等。
  • 其他前端框架： Vue 、 Avalon 、 React 、 BackBone 、 KnockoutJS

Angular的核心特性

  • 指令、MVC、模块化、双向数据绑定

原则

  • 不推崇开发人员手动操作DOM, 其底层还是操作DOM
  • 解放双手，简化了HTML的操作（从DOM中解放出来）
  • 如果要在 angular 中操作DOM，就通过 angular 的自定义指令来实现

优势

  • Angular 最大程度的减少了页面上的 DOM 操作
  • 让 JavaScript 开发专注业务逻辑
  • 代码结构更合理
  • 维护成本更低
  • 通过简单的指令把页面结构和数据结合
  • 通过自定义指令实现组件化编程

使用场景

  • AngularJS主要考虑的是构建 CRUD 应用，一般是：单页面的应用程序。

SPA -单页应用程序

  • SPA： Single Page Application
  • 介绍：
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

  • 单页面应用程序：

    • SPA

  • 传统多页面应用程序：

    • 传统web

优势

  • 1 无刷新加载页面，避免了不必要的跳转和重复渲染
  • 2 更好的用户体验，让用户在web app感受native app的速度和流畅
  • 3 减少了请求体积，节省流量，加快页面响应速度

  • 4 可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲

  • 传统ajax的劣势：

1 ajax请求不会留下历史记录2 用户无法直接通过URL直接进入指定页面3 ajax对SEO不友好

劣势

  • 不利于SEO，但是有其他解决方案

主要技术点

  • 1 ajax
  • 2 锚点的使用（window.location.hash #）
  • 3 hashchange 事件

实现思路

  • 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
  • 1 锚点（#）原本用作页面内部进行跳转，定位并展示相应的内容
  • 2 NG中，锚点被用作请求不同资源的标识，请求数据并展示内容

实例和参考

  • SPA - 百度百科
  • 一种SPA（单页面应用）架构
  • 网易云音乐

AngularJS的基本使用

  • AngularJS 是自动执行的，只需要我们告诉它要做什么，在哪个位置去做，本篇博客是基于angular1的

案例

  • 1 Hello World案例
  • 2 文本框的值加1案例

使用步骤

  • 1 引入 NG 的js文件
  • 2 设置 ng-app 指令
  • 3 给文本框添加 ng-model 指令
  • 4 给按钮添加 ng-click 指令

directive -指令

  • AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
  • 指令是DOM元素上的一些标记，让NG给DOM元素添加一些特殊的行为
  • 指令包含：内置指令 和 自定义指令

指令是什么

  • 将前缀为 ng- 的属性称之为指令，其作用是为DOM元素绑定数据、添加事件 等
<input type="text" ng-model="userName">
  • 指令的值是一个：表达式

指令的类型

  • 属性（A）、元素（E）、类（C）、注释（M）

常用指令

ng-app

  • 作用：该指令用来启动一个AngularJS应用
  • 理解：指定AngularJS应用程序管理的边界，只有在ng-app内部的指令才会起作用
  • 解释：
ng-app 指令指定了应用的根元素，通常放置在页面的根元素，也可以是任意的元素例如：body或html标签应用程序运行时，会自动执行边界内部的其他指令。标记的范围尽可能小，提高性能注意：每个页面中可以出现多次 `ng-app` 指令（不推荐！）如果是多个需要手动引导：`angular.bootstrap()`

ng-click

  • 作用：用来指定DOM元素被点击时执行的事件
  • 语法：ng-click="expression"
<button ng-click="val + 1"></button>

ng-model

  • 作用：绑定数据，在 input/select/textarea 标签中使用
  • 说明：
ng-model指令将尝试把属性绑定到当前作用域中。如果当前作用域中没有该属性，那么AngluarJS会帮我们隐式创建并且添加到当前作用域中。

ng-init （了解）

  • 作用：初始化属性的值
  • 语法：ng-init="uName='Jack'"

expression -表达式

  • 介绍：是一些JavaScript的代码片段主要被用在插值绑定或者直接作为指令的属性值
从JS角度，使用运算符和数据 连接起来的有 结果 的代码就是：表达式注意：不带分号例如：可以使用 console.log(); 打印出来， 或者    console.log( expression );可以用作 赋值运算符 的右值    var test = expression;
<p>{{user.name}}</p><p>{{1 + 8}}</p><p>{{"hello" + "world"}}</p><div ng-click="sayHi()"></div>

AngularJS的执行过程分析

  • 示例代码：
<body ng-app>    <input type="text" ng-model="user.name" />    <p>Hello {{user.name}}</p></body>

执行过程说明

  • 1 ng-app告诉AngularJS让它来管理 body内部的代码
  • 2 ng-app指令创建了一个对象，对象中包含了AngularJS的相关内容，例如：数据模型
  • 3 ng-model指令查询数据模型中有没有 user 对象以及name属性，没有则创建
  • 4 创建user对象以及name属性，并初始化name值为：空字符串
  • 5 表达式 {{user.name}} 从数据模型中查找有没有该数据，如果有就取出来，并展示
  • 6 ng-model和{{}} 中的 user.name 指向的是数据模型中同一个数据
  • 7 文本框值的变化会导致数据模型的变化，数据模型的变化也会导致表达式的变化

Angular执行过程说明

案例强化

  • 加法计算器案例

查看AngularJS的文档

  • 目标：学会查看官方文档资料

离线文档和在线文档

  • AngularJS官方文档
  • ng中文文档
  • ng中文文档

module -模块

  • 所有的其他内容，都是基于模块的，有模块才有其他的内容！
模块是一个容器包含了应用程序的不同组成部分，并且这些内容必须要依附于一个模块    例如：controllers, services, filters, directives, configs 等模块是应用程序的组成单元，例如：登录模块、注册模块、商品列表模块 等，这些模块组合在一起构成了一个完整的应用程序。

创建模块

  • 语法：var app = angular.module(moduleName, []);
  • 作用：创建一个模块，让AngluarJS对整个内容进行模块化管理
  • 说明：模块也可以被创建多次，但很少这么做
  • 示例：
// 第一个参数：模块名称，字符串// 第二个参数：数组，用来添加当前模块的依赖项var app = angular.module("firstApp", ["otherModuleName"]);

获取模块

  • 语法：var app = angular.module(moduleName);
  • 作用：获取指定的模块

controller -控制器

  • 需要配合ng-controller指令来使用

创建控制器

  • 语法：app.controller(ctrlName, callback);
  • 作用：创建一个控制器，控制器必须出现在某个模块下
  • 示例：
app.controller("DemoController", function($scope) {    // $scope 相当于当前的数据模型});

控制器的作用

  • 1 初始视图中使用的数据，是存储数据的容器
  • 2 通过$scope对象把数据模型或函数行为暴露给视图
  • 3 监视模型的变化，做出相应的逻辑处理

$scope的说明

  • 1 $scope是控制器和视图之间的桥梁，用于在控制器和视图之间传递数据
  • 2 推荐：给 $scope 添加数据应该使用对象，而不是作为其属性
  • 2 在控制器中暴露 数据模型（数据和行为），在视图中通过指令或表达式来使用
    • 对比：局部变量
  • 4 注意：$scope这个名称必须这么写！
  • 5 $scope 是在控制器创建的时候，被注入进去的
1 ng 在使用的时候，页面中只要有 ng-app 就会创建一个 scope，名字是：$rootScope2 $scope 是 HTML（视图）背后的“男人” ---->    视图：女人，负责美（展示）    $scope：男人，负责提供美的资源（数据）3 所有的控制器都继承自 $rootScope 4 继承是按照：原型式继承 来实现5 对于HTML来说，参照原型式继承：子节点继承自父节点

数据绑定方式

双向数据绑定

  • 一般通过 ng-model 指令实现
  • 概述：
数据模型的值发生改变，就会导致页面值的改变；页面值的改变，也会导致数据模型中值的改变，这种相互影响的关系就是双向数据绑定。

单向数据绑定

  • 一般通过 {{}} 表达式来实现
  • 概述：数据模型的值发生改变，导致页面的值发生改变

MVC 与 MVVM

  • 优势：代码分离（视图代码、控制器代码），职责分离，解耦
  • 目的：解决应用程序展示结构、业务逻辑之间的紧耦合关系，实现模块化和复用
  • 提高了代码的结构和可维护性，但是不会提高代码执行的效率

MVC介绍

MVC（Model–view–controller）是一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。MVC是一种应用程序的设计思想（不是设计模式）
  • Model 进行数据的存储和数据的处理方法（CRUD）
  • View 展示数据
    • 在Angluar中，View指的是在页面中被 ng-app 指令包裹的HTML代码
  • Controller 是应用程序中处理用户交互的部分
    • 通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据，是数据和视图的桥梁
例如：移动端和PC端两个View，共享同一个Model在MVC设计模式中， Model 响应用户请求并返回响应数据，View 负责格式化数据并把它们呈现给用户，业务逻辑和表示层分离，同一个 Model 可以被不同的 View 重用，所以大大提高了代码的可重用性。

MVVM

  • 是由 MVC 模式演变出来的！
  • 组成：
M: model 模型，相当于 User（构造函数）V: view 视图， ng-app 管理的页面VM: ViewModel 视图模型 在Angular中就是：$scope

ViewModel

  • 1 $scope实际就是MVVM模式中的VM（视图模型）
  • 2 Angular中大量的使用$scope, 盖过了C（控制器）的概念，所以很多人将其称为MVVM框架
  • 3 不要深究到底是什么类型（MVC/MVVM），重要的是学会使用。
  • 4 MVW ===> “Model View Whatever” MV*
  • 5 MVVM 首先出现在 微软的WPF 中

案例：用户注册

localStorage 的基本使用

  • getItem(keyName)：读取，参数类型：string
  • setItem(keyName, keyValue)：设置，参数类型：string

参考

  • localStorage - MDN
  • localStorage的基本使用

$watch -监听数据

  • 语法：$scope.$watch(attrName, callback, flag);
  • 作用：监听$scope中数据模型的变化，无法监视其他的数据（例如，普通变量）
  • 注意：调用$watch方法时，会立即被调用一次。
app.controller("demoController", function($scope) {    $scope.name = "jack";    // 参数一：表示监听的$scope中的属性名称，类型为：字符串    // 参数二：表示数据变化执行的回调函数，有两个参数分别是：当前值与变化之前的值    // 参数三：比较方式，false：表示比较引用；true：表示比较值。默认值为false    $scope.$watch("name", function(curValue, oldValue) {        // 只要被监听的数据发生变化，就会指定该回调函数中的代码！        // 略过第一次执行        if(curValue === oldValue) return;    });});

启动NG的方式

  • 1 通过 ng-app 指令启动
  • 2 手动启动：angular.bootstrap(document, ['MyModule'])
// 等待文档加载完成后，启动 angularangular.element(document).ready(function() {    angular.bootstrap(document, ['MyModule']);});

其他

多个app

  • 注意：不推荐在同一个页面中创建多个 ng-app
  • 注意：ng只会找到第一个 ng-app 并且启动，如果启动其他的，需要手动启动
<div ng-app="FirstApp"></div><div ng-app="SecondApp"></div>

框架和库的区别

Library

  • jQuery is a library， Angular is a framework
  • jQuery是API的集合，封装DOM操作，提高开发效率
使用jQuery的思路：1 想要获取元素，我调用 $(selector)2 元素绑定事件，我调用 .on()3 进行什么DOM操作，我调用什么方法完成总结：你告诉jQuery你要做的操作，jQuery就能帮你做好。      **在使用库的过程中，开发人员是 控制者**

Framework

  • 框架规定了一种编程方式
  • 使用框架的时候，由框架控制一切，我们只需要按照规则写代码
Angular提供了一套完整的解决方案，所有的流程都设定好了我们只需要按照流程规则，把我们的代码进行填坑。

主要区别是：

  • 控制反转，框架中控制整个流程的是框架
  • You call Library, Framework calls you.
  • 好莱坞原则：Don’t call us, we’ll call you.

其他资料

angular代码风格

  • johnpapa/angular-styleguide

模块化

  • 乐高
  • 乐高-机器人

参考网站

  • 百度CDN
  • 开源中国在线工具
阅读全文
1 0
淘宝客佣金终于追回了 淘宝客佣金终于追回了
原创粉丝点击
热门IT博客
怎么下载word2010软件怎么下载word2010软件
c语言入门看什么书c语言入门看什么书
利用淘宝双十一赚钱
微信第三方平台源码
淘宝店铺宝贝模板
上海跳跃网络吧
巨杉数据库 最新动态
java ftp上传附件
手机菜单设计软件
淘宝上哪家玉器店靠谱
一卡多号软件下载
halcon去毛刺检测算法
域名备案批量查询
飞利浦淘宝授权店
java开发年终总结范文
传智博客java视频
js array add
ubuntu如何卸载输入法
java math 平方
w3m linux 使用
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 红薯长胖吗 吃红薯减肥 红薯淀粉批发价格 早餐吃红薯能减肥吗 红薯深加工项目 红薯面条机 红薯的种植方法 血糖高 红薯 打红薯机 红薯保鲜剂 吃红薯能减肥 如何做红薯粉条 几斤红薯出一斤粉条 一天只吃红薯能减肥吗 如何种红薯 便秘吃红薯有用吗 香酥红薯条 怎样种植红薯 红薯磨粉机 红薯怎么做 红薯粉丝加工 红薯怎样吃 吃红薯血糖会升高吗 红薯磨浆机 红薯发芽能不能吃 红薯怎么种 减肥红薯 孕妇血糖高可以吃红薯吗 求购红薯粉条 红薯片烘干房 血糖高的人可以吃红薯吗 红薯减肥么 红薯吃多了会发胖吗 紫薯好还是红薯好 怎么做红薯粉条 红薯育苗技术 红薯哪里便宜 商薯19红薯苗 煎红薯片 红薯销售渠道 胃病能吃红薯吗

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里