angularJS
来源：互联网 发布：考研数学网络课程 编辑：程序博客网 时间：2024/05/16 02:52
最近两年，前端开发市场比较流行一些框架的使用来提高我们的开发效率，比如2015~2016年流行起来的AngularJS,2016年流行起来的VueJS，2017年出现的svelet等等。最近公司的项目要使用Angular来进行项目的开发，在项目开发过程中，经历了很多的坑~这些坑，容我娓娓道来：
我们要使用一个技术，首先要了解这个技术是作什么的？怎么引入？用在哪里？
接下来，简单描述一下Angular是个什么东西，让我们对Angular的使用有一个基础的铺垫
一、 Angular概述
1. Angular是什么东西？
AngularJS是一个实现了MVC处理模式和MVVM数据双向绑定的前端开发JavaScript框架，用于构建和快速开发动态web项目；以其MVC、MVVM、依赖注入、强大的组件化模块化开发而流行于我们前端开发市场！
2. Angular中都有什么组成部分？
AngularJS在项目开发时，都会用到它里面的数据双向绑定、控制器、内置指令和自定义指令、过滤器和自定义过滤器、服务和自定义服务、ng路由和第三方的ui路由，组件化模块化开发等等
3. Angular怎么下载
目前，Angular有1.X和2.X的版本，官网退出的4.X的版本是一个2.X作为基础的语法版本，核心还是2.X的版本
软件开发市场比较流行的是1.3+版本，2.X版本在项目开发过程中使用的公司较少。
Angular1.X版本。通过http://code.angularjs.org进行下载，这是Angular官网的FTP服务器，可以直接下载公司项目中使用的Angular对应的版本
Angular2.x版本，请访问http://www.angularjs.io官网，自行下载和使用
4.Angular的使用
1. 通过下载Angular的离线zip压缩包，在项目中通过script标签引入js文件来使用Angular框架
<script src="js/lib/Angular/angular.min.js"></script>2. 通过npm的形式进行安装Angular包，在项目中require或者import导入使用
var angular = require("angular"); import angular from "angular"; 5.下面就是如何在页面上使用AngularJSng-app:是angularjs的入口，不写的话，程序不执行；可以写在html上还可以写到标签上；
function Angulars($scope,$rootScope){ $scope.name='hellow'; $rootScope.age=30''; } $rootScope:作用域是全局 <span style="font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;">先遍历局部的如果局部没有再遍历全局的</span>
<div ng-controller="Angulars"></div>
ng-click：指令 点击（和click相似）
视图影响数据，数据再影响视图
ng-model
var m1=angular.module('myApp',[]); m1.controller//局部作用域 m1.controller('Aa',['$scope',function($scope){ <span style="white-space:pre"> </span>$scope.name="哈哈哈！"; }]) //中括号的第一个'$scope'是防止代码压缩后出现$s,这种状况，这个'$scope'对应的是function($scope)里面的参数（不可改变的形参） angular.bind();绑定事件function show(n1,n2){ alert(n1); alert(n2); alert(this); } angular.bind(document,show,3)(4); <span style="font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"> 如果需要改变this的指向，可以用 $.proxy() </span>
angular.extend(); //对象继承
indentity//参数传递的是什么，打印的就是什么
noop()//空函数，没有内容。
lowercase（）//转小写
uppercase（）//转大写
element// 选择元素
bootstrap
ng-app不加的情况下，再点击的情况下初始化如下： angular.bootstrap(document,['myApp'])//初始化在document身上； 可以进行多次初始化： angular.bootstrap(aDiv[0],['myApp1']); angular.bootstrap(aDiv[1],['myApp2']);m1.run();//初始化全局数据
m1.run(['$rootScope'],function($rootScope){ <span style="white-space:pre"> </span>$rootScope.name="hellow word"; }) 过滤器：| 名称
currency 金钱 number 数字分隔（有小数时，默认保存3位数，后面可以传参） | number：4 保留4位小数； lowercase/uppercase:转大小写； json 格式化了json代码 limitTo 截取的操作（数组，字符串） | limitTo： 2 只截取前两位 date 针对时间的（把毫秒进行格式化） | date ：'yyyy'（有参数好多） 格式啊成日期 orderBy 排序； |orderBy:'age' 以age排序； $scope.name=[{color:'red',age:'10'},{color:'yellow',age:'20'},{color:'green',age:'30'}] filter 过滤（按value中的值过滤key值） |filter :'10' 就会把{color:'red',age:'10'}这一条匹配出来。自定义过滤器：
-angular.module
》controller/run
》filter
m1.filter('firstUpper',function(){//firstUpper是自定义的过滤器 <span style="white-space:pre"> </span>return function(str,num){ <span style="white-space:pre"> </span>console.log(2) <span style="white-space:pre"> </span>return str.charAt(0).toUpperCase()+str.substring(1); <span style="white-space:pre"> </span>}<span style="white-space:pre"> </span> }) <pre name="code" class="javascript" style="font-size: 15px; line-height: 24px;">html中引用angular.isDate 是不是时间对象
angular.isDefined 判断元素是存在的
angular.isUndefined 判断元素是不存在的
angular.isFunction 是不是函数
angular.isNumber 判断是不是是数字
angular.isObiect 判断是不是对象
angular.isString 判断是不是字符串
angular.isElement 判断是不是一个元素
判断当前的angularJs库的版本
判断两个元素是否相等
forEach 用来遍历元素
formJson/toJson 对json的解析
辅助方法 ；；参数传递的是什么，计算得结果就是这个参数
ng-app
ng-controller
ng-repeat:遍历
orEach 用来遍历元素：
$scope.allPrice=function(){ $scope.allprice=0; angular.forEach($scope.dataList,function(data,index,array){ $scope.allprice+=parseInt(data.price) }) return $scope.allprice }<div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space:pre"> </span>@scope.dataList=['aaa','bbb','ccc']</div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"> </div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><ul></div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"><span style="white-space: pre;"></span><span style="white-space:pre"> </span><li ng-repeat="data in dataList">{{data}}</li></div><div style="margin: 0px; font-family: Helvetica, "Hiragino Sans GB", 微软雅黑, "Microsoft YaHei UI", SimSun, SimHei, arial, sans-serif; font-size: 15px; line-height: 24px;"></ul></div> ng-repeat 指令
- $index //遍历索引号
- $first //只要是集合的第一项就会返回真（true），其余项会返回假（false）
- $middle //只要是集合的第一项和最后一项就会返回真（true），其余项会返回假（false）
- $last //只要是集合的最后一项就会返回真（true），其余项会返回假（false）
- $even //只要是集合的奇数行就会返回真（true），其余项会返回假（false）
- $odd //只要是集合的偶数行就会返回真（true），其余项会返回假（false）
- ng-repeat-start
- ng-repeat-end
angularJs自定义指令
- angular.module
>>controller
>>run
>>filter
>>directive //m1.driective('Ass',function(){ return{} })
- restrict //标签形式的指令 restrict:'E' E表示element restrict:'A' A:对应的属性 restrict:'C' C:解析成class restrict:'M' M:解析注释（注释的写法 <!-- directive:hello -->） restrict:'AECM'又是标签又是属性
- replace //替换原有标签 （true）
- template //模板的方式 template :'<div>hellow</div>'
- templateUrl //
- scope //独立的作用域 scope：true 还有隔离作用域scope：{}
绑定方式{}中：： @:绑定的普通的字符串 =:解析的数据 &：父级的函数的绑定传递方式
- controller //controller:['$scope',function($scope){ $scope.name='hellow' }]
>>directive
>>link // link:function(scope,element,attr){...}
- scope //作用域 scope.name
-elelment //每一个的最外层的div元素 elelment.delegate('input','click',function(){})
-attr //标签上的属性 attr.myId
-reController //和require配置选项有关系的
注意：：：模板中页面中调用的都是m1.directive(...)中的名字
angular.equals()://判断两个值是否相等 相等会返回true，否则返回false
-directive 注意：------scope.$apply() //刷新视图-----------------
>> transclude //transclude :true
- ng-transclude //<h1 ng-transclude></div>
>> require // require ：hi (hi是要引入指令的名字） reController(依赖require 引入的指令)
- ^ // 父级的身上找 eg: require : ^hellow (注：hellow是当前指令的父级) 如果是同级，就不用^ eg:<hi hellow></hi>
- ? // 容错的处理 （不存在的话不会报错） 一般的?和^一起使用 eg： require : ?^hellow
directive中的controller 和link 的区别
link ：dom指令的当前操作 link，针对当前内部 ；
controller多调用指令中的共享 ，指令与指令之间的交互，公有的方法可以被别的指令找到
angularJs服务
$http
- method
- url
- success
- error
-简写方式
常规写法：
简写方式：
wd=angular&cb=JSON_CALLBACK //
wd=//是要搜索的关键字
快速输入时，会每个字符发送一个请求，为了提高性能可以进行延迟处理（搜索经常用的方法）
$location
- absUrl() //得到网址信息的绝对地址
- path() //（可以设置可以获取）$location.path('aaa') 跟路由挂钩的(有历史记录前进后退的)
- replace() // $location.path('aaa').replace() (会替换之前的路径 ，没有历史记录前进后退的)
- hash() // $location.hash('hellow')
- search() // $location.seach({'age':'20'})
- url() // 得到网址信息（不是绝对信息）
- host() //主机名192.168.10.23
- port() //端口号 （端口：8080）
- protocol() //协议（http协议）
$anchorScroll //锚点跳转的服务功能 也是一个方法$anchorScroll()
- 例子：锚点跳转
$cacheFactory //缓存服务 var ach=$cacheFactory('myCache',{capacity:2}) myCache为缓存的id名字 capacity为缓存的长度
- info() //缓存的信息 ach.info()
- put() //设置缓存 ach.push('name','ss') ach.push('age','20')
- get() //获取缓存 ach.get('name')
- remove() //清除缓存 ach.remove('name') 清除后，就找不到name这一条缓存
$log //服务
-log() //调试 跟console.log()类似 $log.log()
- info() //
- warn() //警告$log.warn()
- error() //报错$log.error()
$interpolate //插值服务 (注：有点难理解)
$q //服务 有点类似jQuery中的延迟对象 对异步操作进行功能扩展 var dfd=$q.defer();
- promise的实现 //返回promise对象 return dfd.promise
- defer()
- resolve() //成功时候触发的方法 dfd.resolve
- reject() //失败时候触发的方法
- notify() //实时通知处理
- then() //监听成功失败的回调处理
angularJS的供应商
服务的相关初始配置操作
- congif
- provider
- $interpolate //$interpolateProvider
>>startSymbol()//改变表达式的头部符号{{ $interpolateProvider.startSymbol('@@')
>>endSymbol/改变表达式的尾部符号 }}
- $log //$logProvider
>>debugEnabled() //$logProvider.debugEnabled(true) // 控制台下显示$log.debug()是显示的
- $anchorScroll //$anchorScrollProvider
>>disableAutoScrolling() //$anchorScrollProvider.disableAutoScrolling() 禁止自动跳转
加上服务的方法，就可以手动的跳转 $anchorScroll（）
-----------------------------------------------------
angularJs的自定义服务
-module
- filter() //
- directive() //
- factory() //自定义服务 m1.factory('myRandom',function(){...})
- provider() // 自定义服务 m1.provider('myRandom',function(){...})
>>区别 //都是可以自定义服务，但是provider()可以配置操作
>>$get //
angularJs的自定义服务
模块之间的通信
- provider好处 //可以以js文件的形式引进来，angular.module('myApp2',[myApp1])方式引入
service() //不常用 针对构造函数的方式定义服务,面向对象的开发
- 构造函数
constant() //不常用 可以进行配置获取的
- 设置常量
value（） //不常用 不可以进行配置获取的
- 区别
provider好处：
service() 构造函数：
constant() 和value() ：
<-----------------------------------注意：有的时候插件引入后会报错，原因是，版本angular.js和插件的不同----------------------------------->
angularJs的插件使用
- ngSanitize
- ngRoute //实现单页面的路由的方式 插件地址：http://cdn.bootcss.com/angular.js/1.3.8/angular-route.min.js
- 版本的问题
- ng-view //切换视图主体的部分 <div ng-view></div>
$routeProvider //m1.config(['$routeProvider',function(){}]); //供应商的方式；
》when // .when('/aaaa / : num',{templateUrl:'temp2.html'})
- template/templateUrl
- controller
》otherwise // 初始化ng-view里面的内容
- redirectTo //redirectTo :'/aaaa'
$routeParams //$routeParams接受 :num这个参数
-事件 m1.run(['$rootScope',function(){}])初始化全局数据
>>$on //绑定事件(例如绑定到$rootScope上) $rootScope.$on('$routeChangeStart',function(){}) 可接受参数；例如 event（angular模拟的一个event和js的event类似） current（当前的路径对应的数据值） pre（前一个的路径）
>>$routeChangeStart //第一个参数，路由在切换之前触发的事件
>>$routeChangeSuccess/Error //
m1.config//供应商的方式；
以下主要给大家汇总了一下angular.element的方法，十分的详细，这里推荐给大家 参考下。
addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
attr() - 获取匹配的元素集合中的第一个元素的属性的值
bind() - 为一个元素绑定一个事件处理程序
children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css() - 获取匹配元素集合中的第一个元素的样式属性的值
data()-在匹配元素上存储任意相关数据
detach()-从DOM中去掉所有匹配的元素
empty()-从DOM中移除集合中匹配元素的所有子节点
eq()-减少匹配元素的集合为指定的索引的哪一个元素
find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
html()-获取集合中第一个匹配元素的HTML内容
next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
on() - 在选定的元素上绑定一个或多个事件处理函数
off() - 移除一个事件处理函数
one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
prop()-获取匹配的元素集中第一个元素的属性（property）值
ready()-当DOM准备就绪时，指定一个函数来执行
remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
removeData()-在元素上移除绑定的数据
replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
triggerHandler() -为一个事件执行附加到元素的所有处理程序
unbind() - 从元素上删除一个以前附加事件处理程序
val()-获取匹配的元素集合中第一个元素的当前值
wrap()-在每个匹配的元素外层包上一个html元素
0 0
- AngularJS
- angularjs
- Angularjs
- angularJS
- AngularJS
- AngularJS
- AngularJS
- AngularJs
- AngularJS
- AngularJs
- AngularJs
- AngularJS
- AngularJS
- AngularJS
- AngularJS
- AngularJS
- angularjs
- AngularJS
- js中，一个js中的函数，第一句var thiz = this; 为什么要这样做？
- 如何在O(N)的时间复杂度内找出数组中出现次数超过了一半的数
- 最长非递减子序列
- 设计模式六大原则的理解
- uva 1627
- angularJS
- np问题
- 函数指针和赋值 回调函数
- Android仿支付宝淘宝
- Nginx之一：实现简单HTTP模块helloworld
- RecyclerView更全解析之
- AVLoadingIndicator
- 二级域名解析指向服务器另一台主机— —Nginx
- 对文件描述符的理解
