AngularJSAngular 基础教程(1)

 

简介

什么是AngularJS

  • 一个功用非凡齐全的前端框架,通过升高HTML的办法提供一种便民开发Web应用程序的点子
  • 其大旨特点就是大约无其他DOM操作,让开发人士的活力和岁月整套会聚于事情
  • MVC的天性增强了代码的构造和可维护性,应对急需的扭转做出最小的改观

干什么选拔AngularJS

  • 更少的代码落成更强劲的效果
  • 提供了好多在观念后端开发中大量行使的思索和办法,进步前台代码的构造和可维护性

使用AnuglarJS的流程

  1. 在HTML中引入Angular.js文件
  2. 在投机的代码中定义一个AngularJS的模块
  3. 将模块功用到HTML中的某个节点
  4. 依据模块的职能定义控制器
  5. 依据当前页面原型设计$scope的社团
  6. 通过$scope揭破数据和作为
  7. 将暴光出来的多少和表现经过一定的授命绑定到HTML节点中

MVC

  • 一种应用程序的筹划思想,其目标是为了对应用程序的三结合举行划分,让社团更为清楚可维护性更高,确保每一个原件都有可想而知的纯粹职分

 


模块

  • 可以通过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');
    };
    

    }]);

化解方法就是将创立控制器的第三个参数改为一个数组,数组的最终一个分子即便在此以前的控制器函数,前面的分子就是控制器函数要求注入的靶子列表,依据顺序对应

壮大小知识:达成原理

怎么着依据参数名传入特定目的?

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

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

 

ViewModel

  • $scope 实际上就是MVVM中所谓的VM(视图模型)
  • 幸好因为$scope在Angular中多量施用仍旧盖过了C(控制器)的概念,所以重重人(包涵自作者)把Angular称之为MVVM框架
  • 那一点倒是无所谓,具体看怎么用罢了

我们必须精通的就是怎样依据一个原型抽象出相应的视图模型

 


表达式

类似于模版引擎的语法

作用:

运用表明式把多少绑定到 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 指令用来表飞鹤个 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,提供额外的效应
  • 以上的授命基本上已经得以满意我们的大多数亟待了
  • 个别情状下大家有一些新鲜的急需,可以透过自定义指令的章程已毕:

组件式指令Demo

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

功用型指令Demo

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(注释)

注意:

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

 

 

 

本博客:转自AngularJS 1

Let’s Rock

相关文章