文档章节

AngularJS 1.x版本 学习教程

o
 osc_x4h57ch8
发布于 2018/04/24 10:52
字数 3222
阅读 0
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

AngularJS

被Google收购了,并且应用到Google的很多产品中

Google有一个产品,写了17000多行代码,使用AngularJS改版之后,代码1500行代码

应用场景:

  1. 前后端相分离的应用   HTML  JS(PHP)
  2. CRUD类型的应用(Create、Read、Update、Delete)
  3. SPA(Single Page App:单页面应用)

AngularJS特性一:MVC模式

AngularJS 第一大特性采用MVC模式设计:使数据分离更加便于维护与修改。

M(model): 模型-用来处理数据;

V(view): 视图-用来显示数据;

C(controller): 控制器-用来分配数据给视图显示(调度作用);

 

代码示例:

<!DOCTYPE html><html ng-app><head><script src="JS/angular.min.js"></script><script>  function ng1($scope,$rootScope){ // 局部范围变量$scope.name = "梁"; // 全局范围变量      $rootScope.age = 20;}function ng2(){}</script>

  </head>

  <body>

    <div ng-controller="ng1"> {{name}} {{age}} </div>

    <div ng-controller="ng2">{{age}}</div>

  </body>

</html>

 

注意点:

* ng-app 指令:在哪里注入就说明从哪里开始用angular解析。

* ng-controller 指令:指定该区域使用哪个控制器来解析。

* $scope 局部范围变量:定义的变量只能在该函数内部使用。

* $rootScope 全局范围变量:定义的变量可以在全部范围中使用。

*{{变量名}} 在视图层中用 { { } } 符号来解析变量内的数据。

 

AngularJS特性二:MVVM双向数据绑定模式

AngularJS 第二大特性采用MVVM模式设计:使模型与视图层相互关联,更加方便使用。

模型变化视图也跟着变化,视图变化模型也跟着变化。

代码示例:

<!DOCTYPE html>

<html ng-app >

  <head>

    <script src="JS/angular.min.js"></script>

    <script>

      // 文字两秒后变换

      function ng1($scope,$timeout){

        $scope.name="李";

        $timeout(function(){

          $scope.name="王";

        },2000);

      }

    </script>

  </head>

  <body>

    <div ng-controller="ng1"> {{name}}</div>   

  </body>

</html>

AngularJS特性三:模块化处理 以及代码压缩问题

AngularJS 第三大特性分模块化处理:减少全局变量的污染(减少变量的冲突); 减少模块与模块之间的依赖(模块1出错了,不影响模块2); seaJS   saas模块化处理的框架

实现:

  1. 先定义模块angular.module(‘模块的名称’,[‘依赖的其他模块’])
  2. 调用模块ng-app调用
  3. 代码压缩问题处理方法

 

代码示例:

<html ng-app=”app”>

var ng = angular.module('app',[]); // 定义模块

// 绑定控制器

ng.controller('a',['$scope',function($scope){    // 代码压缩问题解决

$scope.name = 'angular1';

}]);

ng.controller('b',['$scope',function($scope){

     $scope.name = 'angular2';

}]);

ng.controller('c',['$scope',function($scope){

$scope.name = 'angular3';

}]);

 

<div ng-controller="a"><p>{{name}}</p></div>

<div ng-controller="b"><p>{{name}}</p></div>

<div ng-controller="c"><p>{{name}}</p></div>

 

注意点:

 

* 代码压缩:项目完成后代码压缩会将形参压缩导致不能用,解决方法:在绑定控制器时第二个参数设置为数组,第一个元素为真是的作用域,第二个元素函数的参数对应前面真是的作用域。

 

AngularJS:过滤器的使用

AngularJS 过滤器的使用:更加方便的进行数据转换及数据排列。

 

 

AngularJS:过滤器扩展(在js中使用、自定义过滤器)

AngularJS 过滤器拓展:

 

  1. 过滤器的组合使用

   

  1. 在js中的使用

 

  1. 自定义过滤器

是模块下面的方法: 模块名.filter();

 

操作步骤:

 

1.    调用模块里面的 filter() 方法 返回一个函数 其中参数 str 代表定义的变量的值

 

2.    在模型中定义变量

 

3.    在视图中调用自定义的过滤器显示输出

 

 

 

AngularJS:ng-repeat指令(1)

ng-repeat 相当于for(var i in arr){} 在控制器中写数据 使用ng-repeat指令循环到视图当中。

 

AngularJS:ng-repeat指令(2)

结合ng-repeat指令与过滤器实现排序与模糊搜索

AngularJS:ng-repeat指令(3) 属性、自定义循环的开始和结束

属性:

1. $index:            返回数据的索引 从0开始;

2. $first:                   返回布尔值 索引在第一个的为true,其他都是false;

3. $last:               返回布尔值 索引在最后一个的为true,其他都是false;

4. $middle:         返回布尔值 索引在中间的为true,其他都是false;

5. $even:             返回布尔值 索引在偶数位置的为true,其他都是false;

6. $odd:              返回布尔值 索引在基数位置的为true,其他都是false。

实例:    通过在class里面判断偶数进行各行换色。

自定义循环的开始和结束:

ng-repeat-start   ng-repeat-end          在开始和结束中循环一个整体。

 

AngularJS:事件指令

事件指令:

  1. ng-click / ng-dblclick      单击 / 双击;
  2. ng-mousedown / up              鼠标按下 / 抬起;
  3. ng-mousemove / over / out         鼠标移动 / 移入 / 移出 ;
  4. ng-keydown / up / press              键盘按下 / 抬起 / 按住 ;
  5. ng-focus / blur          获得光标 / 失去光标 ;
  6. ng-submit          提交 ;
  7. ng-selected        下拉菜单默认被选择(与之前相比,可以加变量或者函数) ;
  8. ng-change          内容改变事件经常结合ng-model指令使用 ;
  9. ng-copy / cut / paste              内容复制 / 剪切 / 粘贴 ;

* 红色标记指令为angularJS新增事件指令。

实例:

复选框被选中相应的下拉列表也被选中。

 

复制

 

 

AngularJS:input指令

input指令:

  1. ng-disabled        按钮是否禁用(结合 $interval服务使用) ;
  2. ng-readonly              输入框是否为只读模式 ;
  3. ng-checked        复选框是否被选中 ;
  4. ng-value             表单的值 ;

 

实例:

按钮5秒后被释放。

 

 

 

AngularJS:ng-bind数据显示相关指令

www.bootcdn.cn/angular.js/1.4.0/ 加速器cdn地址

ng-bind指令:

在页面有alert() 弹出框时 在点击弹出框确定前如果未使用 ng-bind相关指令,会将{{....}}显示出来,解决此问题的办法就是在视图当中使用 ng-bind 相关指令:

 

1.    ng-bind=“变量名” 只能输出一个变量 ;

2. ng-bind-template= “ {{变量名}} {{变量名}} {{变量名}} ” 能输出多个变量,变量名   外要加 {{}} 符号 ;

3. ng-bind-html= “变量名” 变量名外不需要加{{}} 符号,输出数据中带有html标签的数据(注意点:angularJS 将不常用的方法写在框架外部,以便使框架更加轻便,要想使用外部方法首先要在模块中加载此方法才可以使用,ng-bind-html 指令就是被加载到外部的方法);

4. ng-non-bindable         将变量名原封不动输出将{{}}符号同时输出

 

 

 

AngularJS:CSS样式相关的指令和DOM操作相关的指令

CSS样式相关的指令:

  1. ng-cloak      不常用 控制css显示和隐藏 display:none ;
  2. ng-class              增加class属性 格式:ng-class= “{class名:true}”或false ;
  3. ng-style              设置样式,格式: ng-style= “{{变量名}}”变量内容写json格式{color: ‘red’, background: ‘red’} ;
  4. ng-href        设置超链接 格式:ng-href= “{{变量名}}”;
  5. ng-src          设置图片src属性 格式:ng-src= “{{变量名}}”;
  6. ng-attr-(suffix)   设置属性 格式:ng-attr-title=“{{变量名}}” / ng-attr-width=“{{变量名}}” / ...  (suffix)属性名;

 

DOM操作相关的指令:

  1. ng-show      控制显示隐藏 返回布尔值 ;
  2. ng-hide        控制显示隐藏 返回布尔值 ;
  3. ng-if             DOM节点的添加删除操作 返回布尔值 true表示创建节点 / false 表示删除节点;
  4. ng-switch    不常用:返回布尔值 true 显示 / false 隐藏 ;
  5. ng-open      不常用 兼容性不好: html5 open 属性返回true展开 / false 折叠;

用法: on 是条件

 

 

AngularJS:指令扩展

指令扩展:

  1. ng-init          初始化一个数据变量 在嵌套循环中使用;

用法:在循环中套循环中将索引循环出来使用,不能用</p> 标签循环。

 

  2. ng-include   加载模板;

用法:加载外部模板,注意点:(1)必须在服务器环境下加载,(2)必须在引号中在加引号变成字符串不然会被理解成变量。

  3. ng-model    模型赋值;

ng-model扩展: ng-model-options  updateOn: “监控的事件名称”;

用法: 在输入框输完文字失去光标后下面显示出文字来。

  4. ng-controller      绑定控制器;

ng-controller扩展:as面向对象用法:

 

 

AngularJS:自定义指令

自定义指令:

与自定义过滤器一样,都是模块里面的方法,第一个参数是指令名称,第二个参数是一个函数方法,返回一个对象格式。

格式:

 

 

AngularJS:服务

AngularJS中的服务就是用来处理数据的,相当与MVC中的M(模型)的角色。

1. 学习AngularJS内置的一些服务。

   $timeout

   $interval 等

   要想使用这些服务,第一步需要先注入到控制器里面

 

2. 自定义服务。

 

AngularJS:$http服务详解以及跨域请求的注意事项

$http服务:

$http异步请求服务 get / post / jsonp

 

 

jsonp注意事项:

  1. 如果使用的是angularJS,提供了跨域请求的方法
  2. 如果没有使用angularjs,需要自定义跨域请求的方法
  3. 服务器端一定要支持跨域(jsonp)请求

还有一种更省事的方法:在服务端不做任何限制

练习:

       使用angularJS内置$http服务中的jsonp方法完成百度搜索

 

 

 

AngularJS:$location服务以及$anchorScroll服务

$location服务(地址栏中的服务):

$location服务里面的方法:

  1. absUrl() :      获取完成的文件路径;

     

  2. paht():              路由地址,需要先设置;

     

     

  3. search():    地址栏参数;

     

     

  4. hash():              跳转到id=*** 相当于锚点;

     

     

  5. url():           获取文件后面的参数;

     

     

三种不常用:

  1. host():        获取主机名;
  2. prot():        获取端口号;
  3. protocol(): 获取协议;

 

$anchorScroll() 服务(结合$location做瞄点功能,实现页面跳转):

实现瞄点页面内调整功能。$anchorScroll() 解决多次点击锚点没有反应的问题。

 

 

 

AngularJS:$cacheFactory缓存服务

$cacheFactory缓存服务:

 

 

AngularJS:供应商概念

供应商概念:针对服务的相关初始配置工作(修改初始配置)。通过模块下面的 config([ ‘服务名称Provider’]) 进行修改(所有的配置要在config要在最上面定义):

1. 修改定界符号配置。

 

2. 修改锚点阻止自动滚动配置。

 

 

 

 

AngularJS:自定义服务的三种方式以及service的特点

自定义服务的三种方式:

  1. provider:     
  2. factory:

service:




AngularJS:自定义服务provider的特点

provider 特点:

增删改查案例:

 

provider 特点:

默认不能使用系统内置的服务,但是可以在供应商config里面进行配置,而且只有provider定义的服务才可以使用 .config() ,只能在provider中修改定界符、手动滚动等配置。

 

 

 

AngularJS:总结provider、factory、service的区别

factory特点:

可以使用系统内置服务,也可以使用 .config() 配置一些变量,并且可以使用this代表factory代表供应商,但是不能配置定界符、手动滚动。

service特点:

可以使用系统内置服务,但是不能使用配置 .config()。推荐使用。

 

AngularJS:service自定义服务实现百度搜索

 

 

AngularJS:封装公共的服务

每个控制器都有可能会使用自定义服务 所以将模块里面的服务写到 service.js 里面去,并且将自定义服务的名称加载到控制器中。

 

 

 

 

 

AngularJS:AngularJS的插件应用:

AngularJS:AngularJS中路由介绍以及实现

ng-route:路由插件:

在单页面应用里面,一定会有很多栏目例如:作品列表、文章列表、个人中心等,我们点击某个栏目的时候为了用户体验更流畅,通常不会让其直接跳转到其他网页,而是通过路由设置。

注意:

现在使用的angular.min.js 的版本是:1.3,使用 ng-route插件的时候,他的版本要低于angular.js 的版本。

 

 

AngularJS:给路由设置单独控制器以及在路由传递参数

ng-route 设置单独控制器:

 

ng-route 定义控制器:

 

ng-route 传递参数:

  1. 在视图层用 / 添加参数:

   

  1. 在config配置中用 /:自定义变量名接收参数:

   

  1. 在控制器中使用参数通过 $routeParams服务:
     

结果:

 

 

 

AngularJS:$location服务结合ngRoute实现路由的切换

路由切换:

1.    使用$location.path() 生成路径,但是生成的路径后面的参数只能有一个。

 

2.    接收参数并制定控制器。

 

3.    默认首页也要写上参数。

4. 在控制器里面注入$location

 

 

AngularJS:服务内部事件两种广播方式

服务内部事件广播:

在嵌套div标签 控制器中,给其中一个标签加了事件,也想让上面或者下面能够接收该事件,这时需要事件广播。

例如:

  1. 向上广播:


  2.向下广播,$broadcast,其他都一样:  
     



 

AngularJS:事件广播应用场景

事件广播:    通常用来监听路由切换。

方法:

阻止事件广播,不常用。




AngularJS:animate动画插件的简单使用

animate动画插件的简单使用:

  1. 通过CSS3的方式实现动画效果;
  2. 通过css指令完成 淡入淡出动画

  3. 通过JS实现运动效果,实现更复杂的操作;

 

 

 

AngularJS:支持ng-enter动画效果的指令

 

 

AngularJS:ngAnimate动画插件的使用

通过JS实现运动效果,实现更复杂的操作:

AngularJS:ngResource数据交互插件

ngResource 数据交互插件:类似于$http服务,基于RESTFul架构插件。

  1. 简单的使用:

 

  2. 复杂的使用 结合路由切换读取不同的数据:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

VB语言基础重要知识点12

我们课程,我们做一些针对于考试的简要讲解。 一、有关考试的几个问题 首先,提问:考试最重要的是什么? 答案其实很简单:得分!!!!! 想要得分,就要做到基本的保存。 保存哪些文件呢?...

刘金玉编程
2019/10/30
5
0
全网最全JAVA、Python电子书!限时领取,过时不候!

给大家整理了最全的入门+进阶书籍!!! 免费领取,无套路! 加微信发送“电子书” 秒通过,秒发资源! 本文分享自微信公众号 - Python进击者(JAVAandPythonJun)。 如有侵权,请联系 supp...

kuls
01/16
18
0
原创356--免费还是付费

最近得有一个星期,被一个录屏软件(record it)烦到了,本来免费版可以无限制录制,只能720p,GIF不支持,高清不支持,没有剪辑功能。 之前调研了好几种,用起来还是这个方便,就一直用了。...

八音弦
04/24
14
0
数字IC技术讨论群,设计和验证、前端和后端,总有你感兴趣的话题。快满了,需要的抓紧加入。

本文分享自微信公众号 - 白山头讲IC(gray_mount)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

白山头
04/29
5
0
how to install mongodb in centos7

[root@xtwj88 ~]# cat /etc/yum.repos.d/mongodb-org-4.2.repo [mongodb-org-4.2]name=MongoDB Repositorybaseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.2/x86......

qwfys
45分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部