最近两年,前端开发市场比较流行一些框架的使用来提高我们的开发效率,比如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
.下面就是如何在页面上使用AngularJS
ng-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()
<div style="color: rgb(54, 46, 43); margin: 0px; font-family: Helvetica, "Hiragino Sans GB"