Angular 基础入门

简介

什么是AngularJS

  • 八个功能十二分完备的前端框架,通过增强HTML的法门提供一种方便人民群众开发Web应用程序的章程
  • 其基本特点便是大约无任何DOM操作,让开发人士的生命力和时间整套聚齐于工作
  • MVC的表征增强了代码的协会和可维护性,应对须要的转移做出最小的变动

干什么采纳AngularJS

  • 更少的代码完成更强大的服从
  • 提供了无数在观念后端开发中山高校量施用的思想和章程,进步前台代码的结构和可维护性

使用AnuglarJS的流程

  1. 在HTML中引入Angular.js文件
  2. 在友好的代码中定义三个AngularJS的模块
  3. 将模块功效到HTML中的某些节点
  4. 依据模块的职能定义控制器
  5. 基于近年来页面原型设计$scope的布局
  6. 通过$scope暴露数据和作为
  7. 将暴流露来的数额和表现经过特定的授命绑定到HTML节点中

MVC

  • 一种应用程序的安插思想,其指标是为着对应用程序的重组进行分割,让协会更为清楚可维护性更高,确定保障每一个原件都有醒指标纯净义务

图片 1


模块

  • 能够经过angular.module()艺术操作模块
  • 留意:该办法唯有在流传几个参数时才会创制模块,不然为取得已有模块

概念模块

// 第一个参数为模块名,第二个参数为当前这个模块所依赖的模块列表
angular.module('ModuleName', []);

取得已经定义过的模块

var existModule = angular.module('ExistModule');

怎样划分模块

1.基于当下内需成本的应用程序的结合划分必要有个别模块,

比如:

  • 挂号模块
  • 报到模块
  • 用户列表页模块
  • 用户详细页模块
  • etc.

2. 依照文件类型的两样来划分

比如:

  • 负有的控制器
  • 持有的劳务
  • 怀有的命令
  • etc.

控制器

当时的协作社费用,借使使用Angular,主要正是支付相应的控制器和模型

概念控制器

概念控制器能够有三种格局,注意第二种已经被淘汰

价值观艺术(不要再用了)

在最初期的 Angular 代码中或许会看出以大局函数的不二法门定义的控制器:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>早期的控制器定义方式-全局函数</title>
</head>
<body ng-app>
  <div ng-controller="FooController">
    <input type="button" value="clicked me!" ng-click="say()">
  </div>
</body>
</html>

function FooController($scope) {
  $scope.say = function(){
    console.log('hello angular');
  };
}

那种艺术今后一度不被帮助,固然没有淘汰也不应该利用,太low(全局成效域的题材)

常用格局(挂载在某些模块下)(必须控制)

Angular中最广泛的一种接纳方式,通过模块中定义的controller艺术定义控制器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>常用方式(挂载在某个模块下)</title>
</head>
<body ng-app="MyModule">
  <div ng-controller="FooController">
    <input type="button" value="clicked me!" ng-click="say()">
  </div>
</body>
</html>

angular.module('MyModule', [])
  .controller('FooController', function($scope) {
    $scope.say = function(){
      console.log('hello angular');
    };
  });

概念类型的法门(构造函数)

对于喜好通过定义构造函数的不二法门编写面向对象代码的同班能够动用构造函数的格局定义一个控制器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>面向对象的方式</title>
</head>
<body ng-app="MyModule">
  <div ng-controller="FooController as context">
    <input type="button" value="clicked me!" ng-click="context.say()">
  </div>
</body>
</html>

function FooController() {
  this.message = 'hello angular';
}

FooController.prototype.say = function() {
  console.log(this.message);
};

angular.module('MyModule', [])
  .controller('FooController', FooController);

注意事项

  • 在以上的利用格局中,借使急需为控制器函数注入类似$scope等等的参数,必须确认保障参数名为八个特定值
  • 也等于说Angular会依照参数名称自动注入对应的靶子(与参数个数,现身顺序非亲非故),所以参数名一定无法写错
  • 不过,大家对此写完的JS代码平常会在上线之前对代码进行压缩
  • 削减的历程中一经启用混淆压缩的话,就会招致参数名转移
  • 比方变化了参数名,NG就不能够为其注入对应的对象了
  • 所以,最安全的写法就是不要依赖参数名(依赖不会变化的东西):

    angular.module(‘MyModule’, [])
    .controller(‘FooController’, [‘$scope’, function(whatever) {

    whatever.say = function(){
      console.log('hello angular');
    };
    

    }]);

焚林而猎办法就是将创设控制器的第3个参数改为3个数组,数组的终极三个分子便是从前的控制器函数,前面包车型地铁分子即便控制器函数必要注入的指标列表,遵照顺序对应

推而广之小知识:完成原理

哪些依据参数名传入特定目的?

function getFnParams(fn) {
  if (typeof fn == 'function') {
    var mathes = /.+\((.+)\)/.exec(Function.prototype.toString.call(fn));
    if (mathes[1]) {
      var args = mathes[1].replace(/\s/g, '').split(',');
      return args;
    }
  }
}

function foo(id, name, a1ge) {}

console.log(getFnParams(foo));

$scope

  • 视图和控制器之间的多少桥梁
  • 用以在视图和控制器之间传递数据
  • 用来暴光数据模型(数据,行为)

图片 2

ViewModel

  • $scope 实际上正是MVVM中所谓的VM(视图模型)
  • 幸而因为$scope在Angular中山大学量利用依旧盖过了C(控制器)的定义,所以广大人(包蕴本人)把Angular称之为MVVM框架
  • 那或多或少倒是无所谓,具体看怎么用罢了

世家必须了然的正是怎么根据贰个原型抽象出相应的视图模型

图片 3


表达式

恍如于模版引擎的语法

作用:

使用表明式把数量绑定到 HTML。

语法:

  • 表明式写在双大括号内:{{ expression }}。
  • AngularJS 表明式很像 JavaScript 表达式
  • 它们得以分包文字、运算符和变量
  • 如 {{ 5 + 5 }} 或 {{ firstName + ‘-‘ + lastName }}

支撑的品种

  • 数字 {{ 100 + 100 }}
  • 字符串 {{ ‘hello’ + ‘angular’ }}
  • 对象 {{ zhangsan.name }}
  • 数组 {{ students[10] }}

与JS的比较:

相同点:

  • AngularJS 表明式能够涵盖字母,操作符,变量。

不同点:

  • AngularJS 表明式能够写在 HTML 中。
  • AngularJS 表达式不扶助条件判断,循环及那一个。
  • AngularJS 说明式帮助过滤器。

指令

  • 在 AngularJS 军长前缀为 ng- 那种属性称之为指令,其职能便是为 DOM
    成分调用方法、定义行为绑定数据等
  • 简简单单说:当三个 Angular 应用运行,Angular 就会遍历 DOM 树来分析
    HTML,依据指令分歧,完毕区别操作

命令标准属性的题目

  • ng-xxx 的质量本人并不是行业内部中定义的性质
  • 无数情景下语法校验是不能够透过的
  • HTML5 允许扩张的(自制的)属性,以 data- 早先。
  • 在 AngularJS 中能够使用 data-ng- 来让网页对 HTML5 有效。
  • 二者成效一样。

置于指令

ng-app

  • ng-app 指令用来表美赞臣(Dumex)个 AngularJS 应用程序
  • 标志在贰个 AngularJS 的功效范围的根对象上
  • 系统执行时会自动的履行根对象范围内的别样指令
  • 能够在同二个页面创设八个 ng-app 节点(不引进)
  • 创造两个ng-app时,默许只可以执行第一个,前边的内需手动教导:angular.bootstrap()
  • 标记的限制尽恐怕小,质量

ng-model

  • 用来建立界面上的成分到数据模型属性的双向数据绑定
  • 诚如意况绑定到成分的value属性上
  • 而是在checkbox之类的表单成分会有两样

ng-bind

ng-bind-html

ng-repeat

ng-class

ng-cloak

ng-show/ng-hide/ng-if

ng-src

ng-switch

任何常用命令

  • ng-checked:
  • 单选/复选是还是不是选中,只是单向绑定数据
  • ng-selected:
  • 是否选中,只是单向绑定数据
  • ng-disabled:
  • 是或不是禁止使用
  • ng-readonly:
  • 是不是只读

常用事件指令

不一样于以上的成效性指令,Angular还定义了有些用于和事件绑定的下令:

  • ng-blur:
  • 错过宗旨
  • ng-change:
  • 发生改变
  • ng-copy:
  • 拷贝完结
  • ng-click:
  • 单击
  • ng-dblclick:
  • 双击
  • ng-focus:
  • 得到难题
  • ng-blur:
  • 失去主题
  • ng-submit:
  • 表单提交

自定义指令

  • 指令无外乎增强了 HTML,提供额外的法力
  • 如上的指令基本7月经足以满意大家的大部内需了
  • 少数情形下大家有一对非正规的必要,能够经过自定义指令的不二法门达成:

组件式指令德姆o

myModule.directive('hello', function() {
  return {
    restrict: 'E',
    template: '<h1>Hello world</h1>',
    replace: true
  };
});

作用型指令德姆o

myApp.directive("ngHover", function() {
  return function(scope, element, attrs) {
    element.bind("mouseenter", function() {
      element.css("background", "yellow");
    });
    element.bind("mouseleave", function() {
      element.css("background", "none");
    });
  }
});

自定义指令的体系

  1. E:Element(元素)
  2. A:Attribute(属性)
  3. C:Class(类名)
  4. M:Comment(注释)

注意:

在概念指令应该运用驼峰命名法,使用指令时应该采用的是全小写字母中划线分割的措施

相关文章