angularJS

来源：互联网发布：做广告的软件编辑：程序博客网时间：2024/06/15 14:46

最近两年，前端开发市场比较流行一些框架的使用来提高我们的开发效率，比如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>

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:解析注释（注释的写法 ） restrict:'AECM'又是标签又是属性

- replace //替换原有标签（true）

- template //模板的方式 template :'<div>hellow</div>'

- templateUrl //

- scope //独立的作用域 scope：true 还有隔离作用域scope：{}

绑定方式{}中：： @:绑定的普通的字符串 =:解析的数据 &：父级的函数的绑定传递方式

[javascript] view plain copy
 
scope:{ myId : '@'  }          
    <div my-id="div1"></div>  
    <div my-id="div2"></div>  
  
   scope:{ myId : '@aaa'  }  
    <div aaa="div2"></div>  

- 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

-简写方式

常规写法：

[javascript] view plain copy
 
$http({  
    method:'GET',  
    method:'data.PHP',  
}).success(function(data,state,headers,config){  
    console.log(data);   
}).error(function(){  
    console.log(data);  
})  

简写方式：

[javascript] view plain copy
 
$http.get('data.php').success(function(data,state,headers,config){  
    console.log(data);   
})  

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"

0 0