前端基础学习专辑我爱编程

angular入门

2017-04-27  本文已影响50人  Rella7

angular简介

MVC

AngularJS应用

angular的内置指令

Angular自定义指令

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

AngualrJS 双向数据绑定

AngularJS数据处理

        <li ng-repeat='item in lists'>{{item}}</li>
        //或者是
        <li ng-repeat='item in lists'>
            <span ng-bind='item'></span>
        </li>

小知识点

    <form ng-submit='show()'>
        <h1>todos</h1>
        <input class="new-todo" ng-model='msg' placeholder="What needs to be done?" autofocus>
    </form>
    //angularJS通过ng-model将V与M进行绑定；
    //所以input中的value值就等于$scope.msg; 所以实际上$scope.msg = $('input').val();只不过这一步是AngularJS内部做的；
    //所以`$scope.msg=""`就直接将input的val值置空了；

    <ul class="todo-list">
            <li ng-repeat="item in tabs ">//item可以获取当前元素
                <div class="view">
                    <input ng-click="change($index)" class="toggle" type="checkbox"> //$index 代表当前元素所对应的index值
                    <label>《item.tab》</label>
                    <button  class="destroy"></button>
                </div>
            </li>
        </ul>

作用域

过滤器

依赖注入

服务（重点）

$log 服务 调试信息的输出

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

$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 专门发起异步请求

AngularJS $http总结

  1. $http发送请求的方式有3种：method：“get”/"post"/'jsonp';
  2. 参数的传递方式为：params:
get方式请求
        $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方式请求
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.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’服务了
    <p ng-controller='DemoCtrl'> 《name | capitalize》</p>

运行块

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

路由

路由的配置

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

猜你喜欢

热点阅读