Angularjs

2022/05/15, 14:14:16 1.7k 字 7.3m 夏天夏
学习笔记框架

概念

  • module 相当于容器
  • directive 指令负责对html元素进行绑定，同时进行相互作用
  • service 公有代码逻辑
  • controller 私有代码逻辑
  • filter 过滤器

指令directive

  • ng-app 标记angularjs的作用域
  • ng-model 绑定输入框的值到 scope 变量中：
  • ng-show 表达式为 true 时显示
  • ng-hide 表达式为 true 时隐藏
  • ng-disabled=‘switch’ switch===false时候元素不可用，可以和type=“checkbox” ng-model=‘switch’一起使用
  • ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容。 与{{}}类似，解决了网速慢显示了{{丑陋的表达式}}的问题，一般用于首页代替{{}}
  • ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
  • ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。
    • ng-switch-when
  • ng-clack 等数据加载完成再显示数据模板，避免数据加载未完成出现{{XX}}现象

controller

  • $script 一个对象
  • 特性
    • 作用域，父子作用域对象按引用传递，变量（属性）按值传递。
      • $scope.data={}; $scope.data.x=hello //引用传递
      • $scope.data=123; //按值传递
    • $scopr.x其中{{x}}找不到会向上父级controller找

自定义指令

  • restrict 限制使用,默认值是：AE
    • E 作为元素名使用
    • A 作为属性使用
    • C 作为类名使用
    • M 作为注释使用
    • 坑:指令名字含有大写，使用的标签就必须加-符号，如指令名字“headerDemo” 标签名字就要header-demo
  • 指令scope:{}绑定策略
    • @ 把当前属性作为字符串传递。你还可以绑定来自外层scope的值。在属性值中插入{{}}即可
      • scope:{属性名字:”@”} === $scope.属性名字 === {{属性名字}}
      • 与link()中的scope.test=iAttrs.test一样效果
    • = 与父scope中的属性进行双向绑定
    • & 传递一个来自父scope的函数，稍后调用
  • link(scope,element,attrs,ctrl) 四个参数分别是

    • scope 与指令中的controller中的$scope相连

      • scope.test()可以执行controller中的test()函数,也可以这样写scope.apply(‘test()’)

    • element 标签对象可以调用jq常用语法如bind(),addClass(),removeClass()对元素操作

    • attrs 包含了指令所在元素的属性的标准化的参数对象 如指令abc中有属性TEST

      • <abc TEST></abc> 就是attrs.test
      • <abc TEST='btn()'></abc> 可以通过使用$apply()来执行属性中的函数$apply(attrs.test.btn)

    • ctrl:指令中可以使用controller来做数据交互 如：

link: function($scope, iElm, iAttrs, controller) {
    controller('myCtrl', ['$scope', function($scope){


    }])
}

compile-link

指令的不同controller中的不同函数之间的复用
<!-- html -->
<div ng-controller="myCtrl">
  <abc-test howtoLoad='btn()'>btn</abc-test>
</div>
<div ng-controller="myCtrl2">
  <abc-test howtoLoad='btn2()'>btn</abc-test>
</div>


<!-- js -->
    angular.module('app',[])
    .controller('myCtrl', ['$scope', function($scope){
      $scope.btn=function(){
        console.log("第一个指令 btn()")
      }
    }])
    .controller('myCtrl2', ['$scope', function($scope){
      $scope.btn2=function(){
        console.log("第二个指令 btn2()")
      }
    }])


    .directive('abcTest', [function(){
      return {
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        template: '<button> <div ng-transclude></div> </button>',
        replace: true,
        transclude: true,
        link: function(scope, iElm, iAttrs, controller) {
          iElm.on('click',function(){
            // $scope.btn()
            // $scope.$apply('btn()')
            scope.$apply(iAttrs.howtoload) //注意坑：这里指令属性是用驼峰法则写的HeadBar在这里都要写成小学
          })
        }
      };
    }]);
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
注意 ：使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

第三方指令库 angular-ui

  • 服务Service

    • $location
    • $http 向服务器发送请求
    • $timeout 对应了 JS window.setTimeout 函数。
      • 取消定时器 $timeout.cancel(t)
    • $interval 服务对应了 JS window.setInterval 函数。
      • 取消定时器 $interval.cancel(t)

自定义服务

app.service('hexafy', function() {
   this.myFunc = function (x) {
       return x.toString(16);
   }
});

过滤器 filter |

  • currency 格式化字符串为大写。
  • lowercase 格式化字符串为小写。
  • currency 过滤器将数字格式化为货币格式：
  • orderBy 排序
    • orderBy:‘id’:true 根id降序排
    • orderBy:‘id’ 根据id升序排
  • filter 过滤输入，也可以自定义过滤
  • date 格式化成时间，可以自定义一下格式
    • date:“yyyy-MM-dd HH:mm:ss”
  • number:2 保留两位小数
  • limitTo :6 从前面开始截取6位

自定义过滤器 filter |

app.filter("myFilter",function(){
      return function(input){
        return input+"#"
      }
    })

依赖注入（只执行一起，实现多数据共享）

factory——简单

app.factory(xx, function (){
  return {a:"xxx"};
});

provider——强大：可配置的

app.provider(xx, function (){
  this.$get=function (){
    return {a:"xxx"};
  };
});

service——类似于构造函数

app.service(xx, function (){
  this....
});

修改依赖 *会修改原始的依赖，原来的依赖就变了 (用不了可能废弃了)

app.decorator('依赖的名字', function ($delegate){
  $delegate  依赖项的东西
  return 修改后的依赖;
});

变量||常量

  • constant——常量(不可装饰，不能改)

  • value——变量（可以改）

###消息机制(事件)：

  • $scope.$emit(‘名字’, 数据); 触发：自己+父级，向上发送
  • $scope.$broadcast(‘名字’, 数据); 触发：自己+子级，向下放松
  • $scope.$on(‘名字’, 数据); 接收

$HTTP 通用方法实例

var app = angular.module('myApp', []);


app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });


});

其他函数

  • $scope.$apply() 强制刷新（一般不用）
    • 当AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery UI空间等）调用了AngularJS函数之后，必须调用$apply。在这种情况下，你需要命令AngularJS刷新自已（模型、视图等），$apply就是用来做这件事情的。
  • $scope.$watch() 监控
  • $scope.$watch(谁，做什么，是否监控他的内容和属性变化)

路由 ui-router

路由 ui-router2 官方中文文档

懒加载 $ocLazyLoad

懒加载 $ocLazyLoad 官方文档

使用方法+参考资料

    //定义模板，并注入ui-router
    var app = angular.module('myApp', ['ui.router']);
    //对服务进行参数初始化，这里配stateProvider服务的视图控制
    app.config(["$stateProvider","$urlRouterProvider",  function ($stateProvider,$urlRouterProvider) {
        $stateProvider
        .state("home", {
            url: '/',   //注意url这里一定要以/开头不然不显示
            template:'<div>模板内容......</div>'
        })
        $urlRouterProvider.otherwise('main'); //默认路径为main
    }]);

ui-sref和ui-view指令都是ui-router自带的，有三种方法来激活状态：
1.调用$state.go()方法，这是一个高级的便利方法。
2.点击包含ui-sref指令的链接。
3.导航到与状态相关联的 url。

模板

template: '<h1>My Contacts</h1>'
templateUrl: 'contacts.html'
templateUrl: function (stateParams){
    return '/partials/contacts.' + stateParams.filterBy + '.html';
} //templateUrl的值可以通过函数放回

ui-grid

注意

  • 带ng开头的指令“”里面都可以写表达式，如ng-show="0>1"
  • 不带ng开头的指令也可以用{{}}里面写表达式，如class="{{0>1 ? 'active':''}}"
angular
上次更新: 2022/05/15, 14:14:16