angularjs学习笔记--service、$http、$scope、angularjs指令、事件、api

Ps：上述绑定方法等价

 

ng-app=”模块名”  定义angularjs的使用范围；
ng-init=”变量=值”，初始化变量的值，当有多个变量时，中间用分号隔开；
ng-model=”变量”  定义变量名；
ng-bind=”变量”  绑定变量名，获取该变量的数据。这里的变量即是前一条的变量名。但一般用双重花括号来获取变量的值。

　　

 
    
名字：
 
    
hello{{name}}
 

ng-app指令告诉angularjs，

元素是angularjs应用程序的所有者；ng-model指令把输入域的值绑定到应用程序变量name；ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

 

Angularjs对于开发单一页面应用程序变得更易：angularjs把应用程序数据绑定到HTML元素；可以克隆和充分HTML代码；可以隐藏和显示HTML元素；可以在HTML元素背后添加代码；支持输入验证。

 
姓名为：
     

　　

H5允许扩展的属性，以data-开头，angularjs属性以ng-开头，但可以使用data-ng-让网页对h5有效。

 
姓名为：
     

 

　　

Angularjs表达式：

Angularjs表达式写在双大括号内；angularjs表达式把数据绑定到HTML，类似于ng-bind指令；angularjs将在表达式书写的位置输出数据。

 

 

Angularjs模块定义了angularjs的应用；angularjs控制器用于控制angularjs应用；ng-app指令了应用，与ng-controller定义了控制器。

 

 8-20

Angularjs指令是扩展的HTML属性，带有前缀ng-。Angularjs通过指令扩展HTML；其中内置指令可以为应用添加功能，也可自定义指令。

 

Angularjs指令：

 

ng-app指令：初始化一个angularjs应用；

ng-init指令：初始化应用程序数据；通常情况下不使用，而是选择控制器或模块来实现相同的功能。

ng-model指令：把元素元素值绑定到应用程序；

ng-bind指令：绑定HTML元素到应用程序数据；

ng-bind-html指令：绑定HTML元素的innerHTML到应用程序数据，并移除HTML字符串中危险字符；

ng-bind-template指令：规定要使用模板替换的文本内容；

ng-blur指令：规定blur事件的行为；

ng-change指令：规定在内容改变时要执行的表达式；

ng-checked指令：规定元素是否被选中；

ng-class指令：指令HTML元素要使用的css类；

ng-class-odd指令：类似ng-class，但只在奇数行起作用；

ng-class-even指令：但只在偶数行起作用

ng-click指令：定义元素被点击时的行为；

ng-cloak指令：在应用正要加载时防止其闪烁；

ng-controller指令：定义应用的控制器对象；

ng-copy指令：规定拷贝事件的行为；

ng-csp指令：修改内容的安全策略；

ng-cut指令：规定剪切事件的行为；

ng-dbclick指令：规定双击事件的行为；

ng-disabled指令：规定一个元素是否被禁用；

ng-focus指令：规定聚焦事件的行为；

ng-form指令：指定HTML表单继承控制器表单；

ng-hide指令：隐藏或显示HTML元素；

ng-href指令：为a元素指令连接

ng-if指令：条件为false移除HTML元素；

ng-include指令：在应用中包含HTML文件

ng-jq指令：定义应用必须使用到的库，如jQuery

ng-keydown指令：规定按下按键事件的行为

ng-keyup指令：规定松开按键事件的行为

ng-keypress指令：规定按下按键事件的行为，其包括keydown与keyup两阶段

ng-list指令：将文本转换为列表

ng-model指令：绑定HTML控制器（input、select、textarea）的值到应用数据；

ng-model-options指令：规定如何更新模型

ng-mousedown指令：规定按下鼠标按键时的行为；

ng-mouseenter指令：规定鼠标指针穿过元素时的行为

ng-mouseleave指令：规定鼠标指针离开元素时的行为

ng-mousemove指令：规定鼠标指针在指定的元素中移动的行为

ng-mouseover指令：规定鼠标指针位于元素上方时的行为

ng-mouseup指令：规定当在元素上松开鼠标按钮时的行为

ng-non-bindable指令：规定元素或子元素不能绑定数据

ng-open指令：指定元素的open属性

ng-options指令：在列表中指定

ng-paste指令：规定粘贴事件的行为

ng-pluralize指令：根据本地化规则显示信息

ng-readonly指令：指定元素的readonly属性

ng-repeat指令：定义集合中每项数据的模板

ng-selected指令：指定元素的selected的属性

ng-show指令：显示或隐藏HTML元素

ng-src指令：指定img元素的src属性

ng-srcset指令：指定img元素的srcset属性

ng-style指令：指定元素的style属性

ng-submit指令：规定onsubmit事件发生时执行的表达式

ng-switch指令：规定显示或隐藏子元素的条件

ng-transclude指令：规定填充的目标位置

ng-value指令：规定input元素的值

    
    
    


   

       隐藏/显示
       

           名：


姓：
姓名：{{firstName + "" + lastName}}

　

Ps：这里的ng-app = “myApp”,而不是ng-app = “app” ！ng-hide = “true”是让元素不可见。

 

    
    
    



    隐藏/显示
    

        名：

        姓：

        姓名：{{person.firstName + " " + person.lastName}}
    

Ps：ng-show = “true” 设置元素可见

    
    
    


   

       
在输入框中尝试输入：
       
姓名：
       
你的输入为：{{firstName}}
   

Ps：ng-app初始化一个angularjs应用程序；ng-init初始化应用程序数据；ng-model把元素值绑定到应用程序

 

    
    
    


  

    
循环对象：
      

          

              {{x.name + ',' + x.country}}
          
      
  

　

Ps：ng-repeat指令用在一个对象数组上，也可以用于重复一个HTML元素

 

Ps：ng-app指令定义了angularjs应用程序的根元素，ng-app指令在网页加载完毕时会自动引导应用程序。

 

Ps：.directive函数可以添加自定义指令，要调用自定义指令，需要在HTML元素上添加自定义指令名。指令名可以以驼峰法进行命名，但使用时需要使用 – 形式名字！！

 

Ps：可以通过元素名、属性、类名及注释进行指令调用：

（1）       元素名：上面方法即是通过元素名进行指令调用的

（2）       属性

　　

（3）       类名

    
    


   


注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

　　

（4）       注释

    
    




注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。

Ps：限制使用：通过restrict属性，限制你的指令只能通过特定的方式来调用，restrict的值可以是一下几种：A：作为属性使用； E：作为元素名使用； C作为类名使用； M作为注释使用；   ps：restrict默认值为EA，即可以通过元素名和属性名进行指令调用。

 

angularjs事件：

ng-click：angularjs点击事件

ng-dbl-click：

ng-mousedown：

ng-mouseenter：

ng-mouseleave：

ng-mousemove：

ng-keydown：

ng-keyup：

ng-keypress：

ng-change：

 

    
    
    


   

       点我
       
{{count}}
   
   



 

　　

angularjs验证属性：

$dirty：

$invalid：

$error：

 

Angularjs全局API（Application Programming Interface）：

（1）       转换

angular.lowercase()：将字符串转换为小写

angular.uppercase()：将字符串转换为大写

angular.copy()：数组或对象深度拷贝

angular.forEach()：对象或数组的迭代函数

 

    
    
    


    

        
{{x1}}
        
{{x2}}
    
    

　　

（2）       比较

angular.isArray()：如果引用的是数组返回true

angular.isDate()：

angular.isDefined()：

angular.isElement()：

angular.isFunction()：

angular.isNumber()：

angular.isObject()：

angular.isString()：

angular.isUndefined()：

angular.equals()：

 

 

（3）       JSON

angular.fromJson()：反序列化JSON字符串

angular.toJson()：序列化JSON字符串

（4）       基础

angular.bootstrap()：手动启动angularjs

angular.element()：包裹着一部分DOM element或是HTML字符串，把其作为一个jQuery元素来处理

angular.module()：创建、注册或检索angularjs模块

 

 

$scope: 应用在html视图与JavaScript控制器之间的纽带，其是一个对象，有可用的方法和属性，可应用在视图和控制器上。当利用angularjs创建控制器时，可以将$scope对对象当作一个参数传递。

    
    



    
{{carname}}


控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。

　　

当在控制器中添加$scope对象时，视图可以获取到这些属性，在视图中，不需要添加$scope前缀，直接添加属性名即可。

 

Angularjs应用组成包括：View（视图），即HTML； Model（模型），当前视图中可用的数据； Controller（控制器），即JavaScript函数，可以添加或修改属性。

 

scope是模型。Scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

 

    
    


    
    
{{greeting}}
    点我

当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。

　

service：

angularjs中，服务是一个函数或对象，可在angularjs应用中使用。有个$location服务，可以返回当前页面的URL地址。

    
    
    


  
 
      
当前页面的URL：
      
{{myUrl}}
  
  
该实例使用了内建的$location服务获取当前页面的URL
  

　　

 

Ps：$location服务作为一个参数传递到controller中。若使用它，则需要在controller中定义。

$location服务，可以使用DOM中存在的对象。

 

$http服务：服务向服务器发送请求，应用响应服务器传过来的数据。

 

$timeout服务：对应了js里的window.setTimeout函数

 

$interval服务对应了js中的window.setInterval。

  

参考 & 感谢：http://www.runoob.com/angularjs

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/7398250.html