angular入门

angular简介

angular是一个框架，诸多类库的集合，以数据和逻辑为核心；

MVC

modal-view-controller 模型-视图-控制器
模型：服务端专门处理后台传入的数据；一般指操作数据库
控制器：将服务端处理好的数据传给前端；连接模型和视图的桥梁；
视图：将内容、数据呈现给；HTML展示
使用mvc框架，会更高效，易于管理和高效

AngularJS应用

在任意DOM元素上使用一个属性 ng-app,就可以定义一个AngularJS的应用；
ng-app属性所有的DOM元素所包含的所有子元素都属于应用的一部分；
引用了angular框架下，会引入一个全局对象，angular；
在此对象下有若干对象，其中angular.module()可以实例化一个对象；
angular.module('App',[])两个参数：
- 1：模块化名称
- 2：依赖;[]暂时不依赖任何对象
控制器App.controller()两个参数
- 1：名称
- 2：依赖;
  - 关于依赖，依赖的数组里，最后一个单元必须是一个函数
  - App.controller('DemoCtrl',[’$scope‘,function($scope){}])
- $scope 就是我们所需要的 M；

angular的内置指令

ng-show 是通过 display：none 和 display：block来决定显示和隐藏的
ng-if 如果ng-if='false',那么在HTML中就没有了这个DOM节点了；
ng-class 值得类型可以是对象，并且此对象的属性是真是存在的类样式，属性值决定了此属性是否应用，true为应用，false不应用 ng-class={box:true,red:true}为应用box这个类样式
ng-include = “'aside.html'”;需要将aside.html用''包裹起来的；
- 浏览器端 JS不能够读取本地文件，因为浏览器JS是运行在客户端的，出于安全考虑，是不允许读取用户磁盘文件的；
- ng-include是通过ajax发出请求，得到数据的；
表单禁用 disabled,只要属性存在，不管是什么值，都表示禁用
- input type='text' disabled 或者disabled=''true/false ；只要存在都是禁用
- 在angular中，ng-disabled = 'true'表单禁用；ng-disabled = 'false'表单应用
无值属性:都可以进行设置属性值；
- ng-disabled
- ng-readonly
- ng-checked
- ng-selected
ng-src 和 ng-href ;如果在HTML中直接写src=《path》，虽然在解析完成后地址会加载，但是会先报错；

Angular自定义指令

angular是一个模块实例
.controller()来定义一个模块
.directive()来自定义属性；

    
    //自定义指令结构
    App.directive('cls',function(){
        //return 回来是一个对象或者是函数，通常情况下都是对象
        return {
            //E : element DOM元素
            //C: class
            //M: mark:注释
            //A:attribute 属性
            restrict:"A",
            replace:"true",//模板中的标签会将HTML中的标签进行替换
            template:"这是通过自定义指令添加的内容"，
        }
    })

AngualrJS 双向数据绑定

通过表单元素添加 ng-model 属性；
ng-bind

花括号(使用《》代替)

《》是ng-bind的简写


     //input可以直接获取module中的$scope.name的值
     
     《name》

只有表单元素才可以从视图向模型传送数据

AngularJS数据处理

ng-switch = "item" === ng-switch on = "item"
闪烁问题处理，可以添加 ng-cloak指令 《name》;
angular 的遍历

        {{item}}
        //或者是

小知识点

触发脏值检测 scope.$digest();监听视图中的数据改变；ng-click事件内部中自动封装了这个检测，也可以手动添加；
form 表单有默认的submit事件，通过回车就可以触发；。form中如果有action，那么在submit之后，action也会重新发送一次请求，会刷新页面，所以，当使用submit提交数据时，可以将默认的action删除；

    
        todos
        
    
    //angularJS通过ng-model将V与M进行绑定；
    //所以input中的value值就等于$scope.msg; 所以实际上$scope.msg = $('input').val();只不过这一步是AngularJS内部做的；
    //所以`$scope.msg=""`就直接将input的val值置空了；

AngularJS 遍历，获取当前元素的index值

    
            //item可以获取当前元素
                
                     //$index 代表当前元素所对应的index值
                    《item.tab》

在angular中，涉及到通过判断而决定某个样式显示或隐藏时，尽量通过 ng-class="{attr:flag}"来决定，不用再在js中进行if判断了；

作用域

根作用于 ng-app="App"所处的作用域

过滤器

在AngularJS中使用过滤器格式化展示数据，在“《》”中使用"|"来调用过滤器，使用“：”传递参数；
价格过滤器 《price|currency:'￥'：1》;冒号后面是传参数，多个参数多个冒号链接，：1表示表刘一个小数；
时间过滤器 《now | date:"yyyy-MM-dd hh:mm:ss"》
控制排序方向 《list | orderBy:"score":"true"》 true为反向排序，false为正向排序，默认为false；
常用内置过滤器

依赖注入

采用 ‘注入’ 的方式可以解决开发过程中的依赖的关系，成为依赖注入；
一般注入是通过 ‘参数’ 的形式实现的；
$http 同 $scope 一样，也是AngularJS内置的功能。可以提供发送异步请求的功能；

服务（重点）

$AngularJS内置的服务；ng- AngularJS 内置的指令；
常见的内置服务：需要在依赖中写入，然后才可以使用
- $scope
- $interval
- $timeout
- $log
- $http

$log 服务调试信息的输出

      $log.error('这是一个错误');
      $log.warn('这个一个警告');
      $log.log('这是一个console.log');
      $log.debug('这是一个调试');
      $log.info('这是一个普通内容');

`$timeout`和 `$interval`

$timeout 服务，延时显示数据，$interval 服务：计时器

    App.controller('DemoCtrl',['$timeout','$log','$interval',function ($timeout,$log,$interval) {
       //$timeout是一个函数
       //延时3秒后显示内容;
       $timeout(function () {
           $log.info('我哈哈哈,我等了3秒')
       },3000);

       var i = 0;
       $interval(function () {
           $log.info(i++);
       },1000)
   }])

$http 专门发起异步请求

2、在PHP中 $_POST 是专门接收 formData格式数据的，即“Content-Type:application/x-www-form-urlencoded”; 但是不能接收 Content-Type：application/json;
3、当headers为“Content-Type:application/x-www-form-urlencoded”时，上传的data格式为 data:"name=itcast&age=11";
4、当headers为“Content-Type:application/json”时，传递的参数格式为：data:{"name":"itcast","name":18};

AngularJS $http总结

$http发送请求的方式有3种：method：“get”/"post"/'jsonp';
参数的传递方式为：params:

get方式请求

"get"方式发送请求时，正常发送；参数以params:{name:'lisi',age:18}发送;
- 不管以什么方式传递参数，内部都会转换成？name=lisi&age=18的形式
- 在PHP中将传入的参数以json对象的形式输出

        $http({
          url:'./example.php',
          method:'get',
          params:{name:'lisi',age:18},
          
      }).success(function (data) {
          console.log(data);
      })
    //在PHP中代码：
    $name = $_GET['name'];
    $age = $_GET['age'];
    $array = ['name'=>$name,'age'=>$age];
    //var_dump($array);
    //将传递的参数放到数组中,并将数组转换成json对象格式进行输出;
    echo json_encode($array);
    //结果为：{name: "lisi", age: "18"}

post方式请求

“post”请求，需要注意两点

设置请求头：headers:“Content-Type:application/x-www-form-urlencoded”；

参数以data传递form data，data：“name=lisi&age=17”；请求头与参数必须保持一致；

     //post请求
     $http({
         url: './example.php',
         method: 'post',
         data: 'name=lisi&age=17',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         }
     }).success(function (data) {
         console.log(data);
     })

JSONP 的原理

前端传递一个实现定义好的函数名，给服务端，然后服务端接收这个函数名并拼凑一个“（）”，并返回，前端就接收到了这个函数的调用；
在jQuery中，我们不写callback的明细，ajax会自动帮我们生成一个，jQuery+序列号+时间戳等；但是在angularJS中，他们有帮我们封装，所以必须手动加上；

    $http({
            url:'./example.php',
            method:'jsonp',
            params:{
                //callback必须用'JSON_CALLBACK'进行占位，后端返回回调函数：angular.callbacks._0(lisi)；这个回调函数的结果就是success时的data数据；
                callback:'JSON_CALLBACK',
                name:'lisi',
                age:17
            }
        }).success(function (data) {
            console.log(data);
        })

自定义服务，`$service`和`$factory`

App.controller(); 内置控制器
App.directive(); 内置指令
App.filter(); 内置过滤器
App.factory(); 内置服务
App.service(); 内置服务
App.config(); 配置块
App.run(); 运行块

配置块和运行块

App.config():一个参数，为数组；[]；App.config([]);

    App.config(['$logProvider','$filterProvider',function ($logProvider,$filterProvider) {
    //通过$logProvider对$log进行配置;
    $logProvider.debugEnabled(false);
    $filterProvider.register('capitalize',function () {
       return function (input) {
           return (input[0].toUpperCase() + input.slice(1));
       }
    })
    }]);
    //这样在配置好之后，在HTML中就可以直接使用‘capitalize’服务了
     《name | capitalize》

运行块

$rootScope: AngularJS的根作用域，可定于全局变量

     App.run(['$rootScope',function ($rootScope) {
            $rootScope.name = '顺治';
        }])
        //这个name在此文件中的任何一个控制器中都可以使用；

路由

路由是URL地址与程序的映射关系；通过调整地址的变化，可以‘调用或执行’ 某一具体的程序；
SPA：single page application 单页面展示所有功能；
多页面最明显的一个缺点就是每次更新页面都要进行刷新，不能得到很好的用户体验；
AngularJS的路由是建立在单页面的基础之上的；
onhashchange:检测地址栏中地址的变化，绑在window上的
PHP中：file_get_contents('./views/'.$hash.'.html');获取文件中的内容
锚链接就是点断的路由，就是地址与程序的映射关系；

路由的配置

路由经过设置才能使用
模块需要依赖路由 var Music = angular.module('Music',['ngRoute']);

     
     //锚点中有参数的时候，不会影响到路由；ß
        登录 //地址必须写成  #！/的形式
        注册
    
        
    
    
    var App = angular.module('App',['ngRoute']);
    //路由是需要配置才能使用;
    App.config(['$routeProvider',function ($routeProvider) {
        //两个参数path 和 route
        //第一个参数:路由
        //第二个参数是路由的配置
        $routeProvider.when('/register',{
            //template:"首页",简单的内容
            templateUrl:'./views/register.html' //可以引入URL地址
            //为当前视图文件分配控制器;
            controller:'RegisterCtrl',
        }).when('/login',{
            //template:"登录",
            templateUrl:'./views/login.html'
        }).otherwise({
            //如果都不符合,可以设置默认值
            redirectTo:'/register'
        })
    }])
    
    App.controller('RegisterCtrl',['$scope',function ($scope) {
        $scope.title = '注册';
    }])
    
    //然后在register.html页面中就可以直接进行数据绑定 《title》;

可以使用路由，也就是说开发者可以根据地址的变化执行不同的业务逻辑；路由需要配置后才能被使用；
使用when方法监听地址的变化，然后处理相应的逻辑；
参数传递可以有两种方式，一种方式是通过地址传参：
- 地址传参：其格式为?key1=val&key2=val2;.when('/login?name=lisi&age=17')
- 通过路由传参: 路由/:参数名
- ！！！注意：地址的格式（/login/:name/:pass）必须与路由的格式（#!/login/小明/12345）完全保持一致，一一对应；
```
    登录
    .when('/login/:name/:pass',{
    
        //template:"登录",
        templateUrl:'./views/login.html'
    })
```
- 获取路由中传递的参数 var parameter = $routeParams;

angular入门

angular简介

MVC

AngularJS应用

angular的内置指令

Angular自定义指令

这是通过自定义指令添加的内容

AngualrJS 双向数据绑定

《name》

AngularJS数据处理

《name》

小知识点

todos

作用域

过滤器

依赖注入

服务（重点）

$log 服务 调试信息的输出

$timeout和 $interval

$http 专门发起异步请求

AngularJS $http总结

get方式请求

post方式请求

JSONP 的原理

自定义服务，$service和$factory

配置块和运行块

运行块

路由

路由的配置

首页

登录

《title》

登录

你可能感兴趣的:(angular入门)

$log 服务调试信息的输出

`$timeout`和 `$interval`

自定义服务，`$service`和`$factory`