简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  Angular Basics の概要_html/css_WEB-ITnose

Angular Basics の概要_html/css_WEB-ITnose

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

はじめに

AngularJS とは

    HTML を拡張することで Web アプリケーションを開発するための便利な方法を提供する非常に完成度の高いフロントエンド フレームワーク
    • 中心的な機能は、DOM 操作がほとんどなく、開発者がすべての操作を実行できることです。担当者のエネルギーと時間がビジネスに集中します
    • MVC 機能は、コードの構造と保守性を強化し、要件の変更に応じて最小限の変更を加えます
AngularJS を使用する理由

    より強力な機能を実現するためにコードを削減します
    • を提供しますフロントエンド コードの構造と保守性を向上させるために、従来のバックエンド開発で広く使用されている多くのアイデアと手法
AnuglarJS を使用するプロセス

    HTML で Angular.js ファイルを導入する
    2. 独自のコード内の AngularJS モジュール
    3. HTML 内の特定のノードにモジュールを適用します
    4. モジュールの機能に従ってコントローラーを定義します
    5. 現在のページのプロトタイプに従って $scope の構造を設計します
    6. $ を通じてデータと動作を公開します
    7. スコープ
    8. 公開されたデータと動作を、特定の命令を通じて HTML ノードにバインドする

MVC
    • アプリケーションのコンポーネントを分割し、構造をより明確で見やすくすることを目的としたアプリケーション設計のアイデアオリジナルには明確な単一の責任があります

Module

    • angular.module() メソッドを通じてモジュールを操作できます
    • 注: このメソッドは、2 つのパラメーターが渡された場合にのみ使用できます。モジュールが作成されます。それ以外の場合は、既存のモジュールを取得します

モジュールを定義します

// 第一个参数为模块名，第二个参数为当前这个模块所依赖的模块列表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);

メモ
    • 上記の使用方法では、コントローラー関数に $scope などのパラメーターを挿入する必要がある場合、パラメーター名が特定の値であることを確認する必要があります
    • つまり、Angular は、パラメーター名 (およびパラメーターの数。出現順序は関係ありません) なので、パラメーター名を間違って記述してはなりません
    • ただし、オンラインになる前に、記述された JS コードを圧縮することがよくあります
    • 圧縮処理によりパラメータ名が変更されます
    • パラメータ名が変更されると、NG はそれに対応するオブジェクトを挿入できなくなります
    • したがって、最も安全な書き方はパラメータ名に依存しないことです（パラメータに依存します）変更されないもの): 

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
    • $scope は実際にはMVVMのいわゆるVM(ビューモデル)
  • 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");    });  }});

自定义指令的类型

  1. E：Element（元素）
  2. A：Attribute（属性）
  3. C：Class（类名）
  4. M：Comment（注释）

注意：

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

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

関連記事

続きを見る