angular中的全局方法和指令介绍1

### 复习并总结Angular开发流程 0.下载angular，暴力angular，找到js拖拽过来，npm下载 1.引入 2.在要控制的标签上写上ng-app 3.写controller,告诉angular哪部分dom结构有哪个controller去接管 4.在controller里面处理数据和具体业务逻辑 5.绑定值或文本，ng-model {{}}表达式 ### 复习MVC - MVC是一种设计思想,它是约定了程序的结构应该是怎么。 - 每一个组成原件都会有一个明确的职责。 - 提高代码的结构和可维护性; ### 前端的mvc ## mvvm mv* ### $scope  ### ViewModel - $scope 实际上就是MVVM中所谓的VM（视图模型） - 正是因为$scope在Angular中大量使用甚至盖过了C（控制器）的概念，所以很多人把Angular称之为MVVM框架 ## Angular全局Api使用 - 数据比较API + angular.isArray() 判断给定的对象是否为数组。 + angular.isDate() 判断给定的对象是否为日期类型。 + angular.isDefined() 判断给定的对象是否定义过。 + angular.isElement() 判断给定的对象是否为一个DOM元素。 + angular.isFunction() 判断给定的对象是否为一个函数。 + angular.isNumber() 判断给定的对象是否为数字。 + angular.isObject() 判断给定的对象是否为object类型。 + angular.isString() 判断给定的对象是否为字符串。 + angular.isUndefined() 判断给定的对象是否没有定义过（与angular.isDefined()相反）。 + angular.equals() 判断给定的两个对象是否相等。 - 其他API使用 + angular.lowercase() 将字符串转换为小写形式。 + angular.uppercase() 将字符串转换为大写形式。 + angular.copy() 深拷贝一个对象或数组。 + angular.forEach() 遍历对象或数组中的每一个元素并执行一个函数。

    var values = {name: 'feifei', gender: 'zhuzhu'};
    angular.forEach(values, function(value, key) {
    });

    var objs =[1,2];
    angular.forEach(objs, function(data,index,array){
        console.log(data);
        console.log(index);
        console.log(array);
    });

## 模块 ### 控制器的作用 - 初始化属性 - 暴露属性或者行为 - 监视数据变化 $scope.name=”;$scope.$watch(‘name’,function (newVal,oldVal) { console.log(newVal); console.log(oldVal); }) ### 控制器代码压缩问题 - 当代码进行js压缩时候controller里面的内容会被当成变量替换掉， 为了防止这个问题发生在controller中出现 controller(‘myCtrl’,[‘ $scop',function($scope){}]) ### 控制器的多种写法 - 1.简单写法 app.controller(‘myCtrl’,function(){}) - 2.早期使用 （angular-1.2.29版本） function myController( $scope) { $scope.name=”angular早期使用”; } - 3. fuction写在外面（写在外面不能被压缩） function otherCtrl($scope) { $scope.name=’123’; } app.controller(‘myCtrl’,otherCtrl) - 4. fuction写在外面（写在外面不能被压缩） function otherCtrl(otherscope) { otherscope.name=’123’; } //依赖注入 otherCtrl.$inject=[' $scope’];//这里对方法添加$inject app.controller(‘myCtrl’,otherCtrl) - 5. 面向对象方法使用

{{scope.name}}

- 1.控制器的function不写改为引用function app.controller('myCtrl',demoCtrl);
- 2.创建一个面向对象的function ` function demoCtrl() {
        this.name='123';
    } `
- 3.使用的时候添加 ` as scope ` ng-controller="myCtrl as scope"

#依赖注入 - 没事你不要来找我，有事我会去找你。 - 原理 框架在调用方法的过程中通过获取到传递的参数，然后框架内部将方法toString处理以后， 再通过正则表达式将其获取到然后依次实例化。 ###控制器继承

var app=angular.module('mainApp',[]); app.controller('SelfCtrl', function( $scope) { $scope.foo(); }); app.controller('ParentCtrl', function($scope) { $scope.foo=function(){ console.log(123); } }); ###控制器之间父子通信 1.从父控制器传子控制器

click me

指令

• 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等

• 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作

• ng-bind

  • 用来解决表达式闪烁问题

  • <p ng-bind="数据模型"></p>替代了{{数据模型}}

    {{name}}

  注意：只能够在双标签中使用ng-bind指令

• ng-cloak

  • 用来解决表达式闪烁问题
  • 写一个样式使页面的元素隐藏
    
    .ng-cloak{
    display: none;
    }
    
  • <p class="ng-cloak">{{name}}</p>
  • 利用angular在加载会移除页面上所以名为ng-cloak的样式名的特性。
• 页面安全的问题
  直接编写一些
  
  document.write('

    <div ng-switch="name">
            <div ng-switch-when="小明">我是小明</div>
            <div ng-switch-when="小红">我是小红</div>
            <div ng-switch-when="小月">我是小月</div>
    </div>

其他常用指令

• ng-checked：
  
  • 单选/复选是否选中,是单向数据绑定
• ng-selected：
  
  • 是否选中
• ng-disabled：
  
  • 是否禁用
• ng-readonly：
  
  • 是否只读

常用事件指令

不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：

• ng-blur：失去焦点
• ng-focus：获得焦点
• ng-change：改变事件
• ng-click： ng-click=”add()”
• ng-dblclick：双击事件
• ng-submit： 表单提交事件