Angular 基础教程(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(注释)

注意:

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

 

 

 

本博客:转自图片 1

Let’s Rock

相关文章