AngularJS 1.2版本学习第一弹

最新推荐文章于 2025-08-13 14:16:20 发布

原创最新推荐文章于 2025-08-13 14:16:20 发布 · 798 阅读

CC 4.0 BY-SA版权

本文详细介绍了AngularJS 1.2版本的学习总结，包括controller作为视图层与模型层的桥梁作用，如何使用ng-bind、插值表达式及ng-model进行数据绑定，以及service在控制器与视图层间的间接通信机制。同时，对比了Angular与Vue的实现差异，深入探讨了AMD和CMD规范的区别，并讲解了ng-class和ng-style的用法。

前情提要

其实博客一直有在写，每个工作日都有写，但是涉及到公司信息安全的问题，所以只能设为私密。公司的项目基本为了兼容IE8，都是使用的AngularJS 1.2版本框架，所以要学习一波

angular基础（ 1.2 – 2.0版本）

由于1.2这个版本是14年发布的，过于陈旧，所以很难找到对应的教程，好不容易找到了上面这篇文章，分享下所学知识：

学习总结

1.controller
我的理解是，controller是视图层和模型层沟通的桥梁，类似于vue 的MVVM,只不过vue实例里的任何变量函数都是直接可以插值到视图层的,而angular里面的$scope对象下的成员变量和函数，是可以使用
（1）ng-bind指令
（2）插值表达式
（3）ng-model双向数据绑定
三种方法注入到使用ng-controller对应的视图页面。

    //将控制器写成【name】-Controller 而不是 【name】-Ctrl是一种最佳实践
    angular.module('myApp',[]).controller('myController',function ($scope) {
        $scope.name = 'ion luo';
        $scope.surname = 'luo';
    }).filter('isInclude',function () {
        return function (txt1,txt2) {
            if(txt2.indexOf(txt1)>-1){
                return true;
            }
            else{
                return false;
            }
        }

2.service
我的理解是.service相当于是一个对象，拥有成员方法和变量。不能直接与视图层沟通，但是controller可以获取对象的属性，然后赋值进行沟通。类比VUE的话，我觉得应该算是外部的工具方法类，页面通过引用这个方法，来完成该页面的某种需求

 //定义服务'calcService'，该服务中有个方法square返回一个数字的平方
  app.service('calcService',function(){
    this.square = function(a){
      return a*a;
    }
  });
  //将服务注入控制器
  app.controller('myController',function($scope,calcService){
    $scope.number = calcService.square(5);
  });

3.AMD和CMD规范的区别
JavaScript AMD 与 CMD 规范

4.ng-class 和 ng-style

//字符串方式
function bu($scope) { 
    $scope.ss= true;
}

<div ng-class="{true: 'a', false: 'b'}[ss]"></div>
//根据你的逻辑去切换 ss的true或者false，来显示对应的cass

//对象key/valu处理
function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}"></div>