angularjs笔记

最新推荐文章于 2022-12-09 16:14:24 发布

Ted_Rui

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量366

点赞数

分类专栏： angular 文章标签： angularjs

本文链接：https://blog.csdn.net/Ted_Rui/article/details/70550548

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

angularjs

Module

一个angular程序就由一个主模块完成所有功能，一个主模块是由N个小模块组装成的
定义一个模块的方法就是angular.module()方法，接受两个参数

    angular.module("模块的名字",['引入分模块的名字'])

模块化开发，方便我们团队开发，方便分工合作，方便找出问题的根源

    //定义一个模块,是一个模块函数,主模块
    angular.module("app1",['app2','app3'])
    //小模块
    angular.module("app2",[])
    angular.module("app3",[])

ng-app作为一个属性值可以放在任何标签上，建议放在<html>和<body>标签上，放在那个标签上，那就是主模块控制那个标签的闭合作用域

    ng-app="主模块的名字"

ng-controller作为控制器的定义标签，放在ng-app闭合标签的范围内

ng-app就是整个程序的作用域

scope定义完一个控制器后在控制器的函数里面注入一个$scope形参，
$scope就是控制所在范围的绑定值

控制层 C

.controller("abc",function($scope){
        //model层
            $scope//是一个对象
            $scope.name  = "laoxie";
            $scope.age = 18
        })

视图层 V

<div ng-controller="abc">
            <p>{{name}}</p>
            <p>{{age}}</p>
        </div>

angularjs指令

ng-bind用来绑定值，相当于表达式{{}}

ng-repeat用来循环，重复创建代码

ng-app 定义作用域

ng-model此指令一般配合input select textarea标签使用,用来设置view层的数据

ng-if直接把DOM节点删除，或者插入DOM节点，ng-if比ng-show效率高一点

ng-click用来绑定点击事件

自定义指令

app.direcitve("指令的名字",自定义指令的函数(逻辑))

Angular叫指令，事实上就是组件

app.directive("hr",function(){  //这个函数retrun 一个对象 通常包含几个属性
    return {
        restrict:'ECMA' //如果不写就是默认所有形式都可以呈现,可以支持"EA"和"EAMC"
        templateUrl : 'xxx.html'//如果组件html结构比较简单我们用`template`，如果组件html结构比较复杂我们用`templateUrl`
        replace : true或者false  //false表示显示组件的标签名
        scope ： true/false/{}  //表示组件和作用域三种关系  第一次影响/互相影响/互不影响
        link : function(scope,ele,attr){
            //link就是组件的控制器，存放该组件数据模型model
            //link控制该组件的逻辑，相当于组件内部的控制器
            scope用来绑定数据
            ele就是组件下的元素节点
            attr就是节点元素的属性值
        }
    }
})

angularjs过滤器

filter	methods
orderBy	排序
limitTo	可以用于分页,第一个参数就是截取的长度，第二个是截取的位置，可以用于截取字符串和数组
date	接受时间戳格式，处理成常用的时间格式

自定义过滤器

app.filter("过滤器名字",function("服务")){
    return function("传入需要处理的值"){
        return "返回处理完的值"
    }
}

服务

$fiter服务
过滤器，用来过滤筛选关键信息

$sec服务
这个服务可以将html代码渲染到页面

$http服务
相当于原生js里面的javascript ,用$http.post()的时候要用1.5.9版本和一个组件不然传参数格式不对，这是个bug

自定义服务

ng 提供服务的过程涉及它的依赖注入机制。首先注入一个 provide的对象。
在通过调用一个 provider 的 $get() 方法，把得到的东西作为参数进行相关调用

 //这是一个provider
  var pp = function(){
    this.$get = function(){
      return {'haha': '123'};
    }
  }

  //我在模块的初始化过程当中, 定义了一个叫 PP 的服务
  var app = angular.module('Demo', [], function($provide){
    $provide.provider('PP', pp);
  });

  //PP服务实际上就是 pp 这个 provider 的 $get() 方法返回的东西
  app.controller('TestCtrl',
    function($scope, PP){
      console.log(PP);
    }
  );

上面的代码是一种定义服务的方法，当然， ng 还有相关的 shortcut， ng 总有很多快捷方式。

第一个是 factory 方法，由 $provide 提供， module 的 factory 是一个引用，作用一样。

var app = angular.module('Demo', [], function($provide){
    $provide.factory('PP', function(){
      return {'hello': '123'};
    });
});
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
在 module 中使用：
  var app = angular.module('Demo', [], function(){ });
  app.factory('PP', function(){return {'abc': '123'}});
  app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
  这段代码先定义了一个模块，又往模块里注入了$provide参数
  这个方法直接把一个函数当成是一个对象的 $get() 方法，这样就不用显式地定义一个 provider

自定义服务config

自定义服务factory

自定义服务service

service 方法，也是由 $provide 提供， module 中有对它的同名引用。
service 和 factory 的区别在于，前者是要求提供一个“构造方法”，
后者是要求提供 $get() 方法。意思就是，前者一定是得到一个 object ，后者可以是一个数字或字符串。
它们的关系大概是：
  var app = angular.module('Demo', [], function(){ });
  app.service = function(name, constructor){
    app.factory(name, function(){
      return (new constructor());
    });
  }

这里插一句，js 中 new 的作用，以 new a() 为例，过程相当于：
1.创建一个空对象 obj
2.把 obj 绑定到 a 函数的上下文当中（即 a 中的 this 现在指向 obj ）
3.执行 a 函数
4.返回 obj

service 方法的使用就很简单了：
  var app = angular.module('Demo', [], function(){ });
  app.service('PP', function(){
    this.abc = '123';
  });
  app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

事件广播通信数据

广播事件的名字 广播的值
$scope.$broadcast('to-child', $scope.toChildContent);
或者用$scope.$emit('to-child', $scope.toChildContent);

接收
$scope.$on('to-child', function(event, data) {
    //从$emit或者$broadcast中获取的args事件传递来的信息
    console.log(data)
})

Ted_Rui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs笔记

angularjsModule一个angular程序就由一个主模块完成所有功能，一个主模块是由N个小模块组装成的定义一个模块的方法就是angular.module()方法，接受两个参数 angular.module("模块的名字",['引入分模块的名字'])模块化开发，方便我们团队开发，方便分工合作，方便找出问题的根源 //定义一个模块,是一个模块函数,主模块 angular
复制链接

扫一扫