angular基础（ 1.2 -- 2.0版本 ）

教程推荐位置：http://www.angularjs.net.cn/tutorial/

本人是比较倾向《angular权威教程》和angular手册结合的方式学习。

调试工具极力推荐：ng-inspector

1、数据绑定

angular数据绑定的两个方式：（1）ng-bind指令（2）差值表达式（3）ng-model双向数据绑定

ng-bind和差值表达式都可以写简单的js表达式，ng-model只能绑定变量名。

ng-bind 和　ng-cloak 可以回避闪烁问题（插值表达式在刚刚加载时显示在页面上）

  
  
  


  
  

    
    
    
我叫：xxx
    
我叫：{{name}}
  

2、数据循环

  
  
  


  

    

      
      
      
{{index}}-{{item}}
    
    
      button0
      button1
      button2
      button3

      

        
        
{{key}}-{{value}}
      
  

  

3、ng环境与js环境

（1）ng环境与js环境不互通

（2）ng事件（用法和js相似）

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

  
  
  


    
    //ng事件能操作ng环境的变量
    
    

      
What you input is： {{json.name}}
    

(3)   模块与controller    $scope作用域（打通ng环境与js环境）

  
  
  
  



    
    
    
    {{parseInt(a)+parseInt(b)}}

4、内置过滤器和自定义过滤器

  
  



      

        

          单价：    

          数量： 

          总价：{{(price*quantity) | currency}}
        
        

          筛选数据显示

          
          

            
            

              {{item}}
            
          
        
        

          自定义过滤器stringMerge

          
          字符拼接：{{ msg | stringMerge:'are':'god' }}
        
      
      
      
      

 自定义过滤器判断字符是否被包含：

    
    
    


    

        
{{'ion' | isInclude:name}}
    

5、内置服务和自定义服务

常见的angular内置服务有：$location、$http、$timeout()和$interval()

可以认为服务就是在angular应用的的一些函数（后两个）或者对象（前两个）。

  
  
  


  

    $location服务用于返回当前页面的URL地址：

    {{myUrl}}
  
  

    $http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

    服务器返回：{{myDate}}
  
  

    $timeout 服务对应了 JS window.setTimeout 函数。

    $interval 服务对应了 JS window.setInterval 函数。

    在angular应用中最好使用angular的服务而不是js的相似功能函数，因为angular服务的支持性更好
    用法一样，我们举一个$timeout服务例子，5s后显示"欢迎您"。
  


  

自定义对象服务

  
  
  


  

    自定义服务：用于将十进制数字转化成十六进制

    
    

    {{ decimalism }}的十六进制为：{{ hex }}
  


  

6、$http服务

get和post请求的简写格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

7、依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• （1）value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

  
  
  


  

    {{ number }}
  

• （2）service

  
  
  


  

    {{ number }}
  

• （3）factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。也就是说可以引入到service或者controller。通常我们使用 factory 函数来计算或返回值。

  
  
  


  

    {{ number }}
  

• （4）constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

  
  
  


  

    {{ number }}
  

• （5）provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

  
  
  


  

    {{ number }}
  

8、路由

 
    
AngularJS 路由应用
    

        
首页
        
电脑
        
打印机
        
其他
    
     
    

    

路由配置时设置对象：

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object
});

参数说明：

• template:

  如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });

  以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

• controller:

  function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

• controllerAs:

  string类型，为controller指定别名。

• redirectTo:

  重定向的地址。

• resolve:

  指定当前controller所依赖的其他模块。

9、组件通信

（1）通过公共服务

（2）通过link的attrs实现同一个dom下组件通信

10、系统指令

全部angular系统指令可见angular参考手册，http://www.runoob.com/angularjs/angularjs-reference.html。下面介绍些常用系统指令：

（1）ng-class 和 ng-style

效果：

（2）ng-switch

该指令和 ng-if 一样当满足条件才渲染到HTML中。（注意 ng-if 没有 ng-else 指令来做if-else条件结构，需要时使用ng-switch）

  
    淘宝
    知乎
    京东
  


  

    
淘宝
    
知乎
    
京东
    
请选择 >>>>>>
  
  

(3) ng-bind-html 和 $sce.trustAsHtml()

 注意，低版本的angluar可以直接绑定HTML代码，但是在anglar1.6.4之后必须加上$sce才可以，否则会出现如下报错。

关于$sce的具体内容见：https://www.cnblogs.com/xing901022/p/5100551.html

(4) ng-trim()

    
    
    
    
    
    


    // ng-trim = "true" 去除前后空格
    
    

         您输入的是 : {{ input }}
    

11. 配置插值表达式符号

    var APP = angular.module('myApp',[]);
    APP.config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('{[');
        $interpolateProvider.endSymbol(']}');
    });

12、Angular概念图

 

不同作用域的通信

https://www.cnblogs.com/yuzhongwusan/p/4938816.html