AngularJSAngular 基础入门

简介

什么是AngularJS

  • 一个功效非常齐全的前端框架,通过增强HTML的章程供平等种植便利开发Web应用程序的方
  • 夫基本特点就是是几乎无其他DOM操作,让开发人员的活力与岁月整套汇集吃事情
  • MVC的特色增强了代码的组织及可维护性,应本着急需的成形做出极端小的改变

干什么用AngularJS

  • 又不见的代码实现再强大的力量
  • 提供了无数每当风后端开发中大量行使的盘算及措施,提高前台代码的布局以及可维护性

使用AnuglarJS的流程

  1. 在HTML中引入Angular.js文件
  2. 以大团结的代码中定义一个AngularJS的模块
  3. 拿模块作用及HTML中的之一节点
  4. 据悉模块的功用定义控制器
  5. 依据当前页面原型设计$scope的组织
  6. 由此$scope暴露数据以及行为
  7. 以暴露出的数量和行事经一定的命令绑定到HTML节点中

MVC

  • 平栽应用程序的设计思想,其目的是以对应用程序的整合进行分,让组织更分明可维护性更强,确保每个原件都来明显的单纯任务

AngularJS 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');
    };
    

    }]);

化解方法就是是拿创控制器的老二个参数改吗一个反复组,数组的最终一个分子即使先的控制器函数,前面的分子就是控制器函数需要注入的靶子列表,按照顺序对应

扩张小知识:实现原理

怎么样根据参数名叫传特定目标?

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

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

AngularJS 2

ViewModel

  • $scope 实际上就是MVVM中所谓的VM(视图模型)
  • 正是以$scope在Angular中大量采用还因为了了C(控制器)的概念,所以众多人(包括自己)把Angular称之为MVVM框架
  • 立马一点倒无所谓,具体看怎么用罢了

世家必须控制的饶是如何根据一个原型抽象出相应的视图模型

AngularJS 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 指令用来表明一个 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(注释)

注意:

每当概念指令应该采取驼峰命名法,使用指令时该使用的是全小写字母中划线分割的方

相关文章