ホームページ >ウェブフロントエンド >htmlチュートリアル >Angular Basics の概要_html/css_WEB-ITnose

Angular Basics の概要_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:22:561206ブラウズ

はじめに

AngularJS とは

AngularJS を使用する理由

AnuglarJS を使用するプロセス

MVC

Module

モジュールを定義します

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

定義済みのモジュールを取得します

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

モジュールの分割方法

1. 必要なモジュールの数を、必要なアプリケーションの構成に応じて分割します。

例: - 登録モジュール - ログインモジュール - ユーザーリストページモジュール - ユーザー詳細ページモジュール - など

2. 異なるファイルタイプに応じて分割します

例: - すべてのコントローラー - すべてのサービス -すべての命令 - など

コントローラー

現在のエンタープライズ開発でAngularを使用する場合、主なことは、対応するコントローラーとモデルを開発することです

コントローラーを定義する

コントローラーを定義するには3つの方法があることに注意してください。最初のものは Eliminate です

従来のメソッド (もう使用しないでください)

最も初期の 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');  };}

このメソッドは、たとえサポートされていてもサポートされなくなりました。排除されない。低すぎるため使用すべきではない (グローバルスコープの問題)

一般的な方法 (特定のモジュールの下にマウントされる) (マスターする必要がある)

で定義されたコントローラーメソッドを通じて定義される、Angular の最も一般的な使用方法。モジュールコントローラー

<!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);

メモ

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

解決策はコントロールを作成することです。コントローラーの 2 番目のパラメーターは配列に変更されます。配列の最後のメンバーは前のコントローラー関数です。前のメンバーはオブジェクトのリストです。コントローラー関数が順番に対応して注入する必要があるもの

拡張された知識: 実装原理

パラメーター名に基づいて特定のオブジェクトを渡す方法?

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

Angularでは$scopeが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");    });  }});

自定义指令的类型

E：Element（元素）
A：Attribute（属性）
C：Class（类名）
M：Comment（注释）

注意：

在定义指令应该使用驼峰命名法，使用指令时应该使用的是全小写字母中划线分割的方式

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Sass と Compass を組み合わせて CSS_html/css_WEB-ITnose を記述する次の記事：Sass と Compass を組み合わせて CSS_html/css_WEB-ITnose を記述する

続きを見る