ウェブフロントエンド
jsチュートリアル
angularjs について初めて知るときに知っておくべきことは何ですか? 2018 年に angularjs を始めるために必ず学ぶべきチュートリアル (例付き)
angularjs について初めて知るときに知っておくべきことは何ですか? 2018 年に angularjs を始めるために必ず学ぶべきチュートリアル (例付き)
この記事では、angularjs を学びたい学生がより良い入門コースを受講できるように、angularjs の基本的な理解を紹介します。では、この記事を見てみましょう。
AngularJS の紹介
AngularJs はフロントエンド フレームワークであり、JavaScript で書かれたライブラリです。ユーザーはこのフレームワークを使用してフロントエンドで双方向のデータバインディングを実行し、フロントエンドでの MVC データ表示を実現できます。
AngularJs フレームワークを使用する場合、必要なのは AngularJs ファイルをフロントエンド HTML に導入することだけです。とても使いやすいです。
AngularJsの基本操作
基本的な手順を説明する前に、いくつかの基本概念を紹介します。ユーザーが AngularJs ファイルをページに導入した後、WebApp とコントローラーを作成できます。 AngularJs では、各ページは独立した WebApp とみなされます。各 WebApp には、コントローラーと呼ばれる複数の独立した処理部分を含めることができます。各コントローラーには、独自の独立した処理コンテキストとロジックがあります。 AngularJs は、ng-app 命令を通じてこの WebApp の範囲を区切ります。通常、この ng-app は html タグまたは要素に直接記述することができます。例:
html:<p ng-app="myApp">
<p ng-controller="myController">
<h3>{{data}}</h3>
</p></p>アプリケーションの初期化: ng-app ディレクティブは、
要素が AngularJS アプリケーションの「所有者」であることを AngularJS に伝えます。
データのバインド: ng-model ディレクティブは、入力フィールドの値をアプリケーション変数名にバインドします。 ---プロパティにバインドします。こちらも利用可能: アプリケーション データのタイプ検証を提供します (番号、電子メール、必須)。アプリケーション データのステータス (無効、ダーティ、タッチ、エラー) を提供します。 HTML要素のCSSクラスを提供します。 HTML 要素を HTML フォームにバインドします。
HTML でデータをバインドする: ng-bind ディレクティブは、アプリケーション変数名を段落の innerHTML にバインドします。 HTML で {{変数名}} を記述するのと同等——————テキストにバインド
初期化データ: ng-init ディレクティブは、AngularJS アプリケーション変数を初期化します。
データのクローン: ng-repeat ディレクティブは、コレクション (配列) 内の項目ごとに HTML 要素のクローンを 1 回作成します。例:ng-repeat=”x in arrays”
カスタム ディレクティブ: .directive 関数を使用してカスタム ディレクティブを追加します。カスタム ディレクティブを呼び出すには、HTML 要素にカスタム ディレクティブ名を追加する必要があります。ディレクティブに runoobDirective という名前を付けるにはキャメルケースを使用しますが、使用する場合は runob-directive で区切る必要があります。
eg:<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return { //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
restrict : "A",//限制使用--E 作为元素名使用。A 作为属性使用。C 作为类名使用。M 作为注释使用
template : "<h1>自定义指令!</h1>"
};
}); </script></body>Controllers: ng-controller ディレクティブはアプリケーション コントローラーを定義します。
フィルター: フィルターは、パイプ文字 (|) とフィルターを使用して式に追加できます。
サービス: AngularJS では、独自のサービスを作成したり、組み込みサービスを使用したりできます。サービスは、AngularJS アプリケーションで使用できる関数またはオブジェクトです。 AngularJS には 30 を超える組み込みサービスがあります。一般的に使用される組み込みサービスをいくつか紹介します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアル にアクセスして学習してください)
1，$location:类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。2，$http:AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。3,$timeout:AngularJS $timeout 服务对应了 JS window.setTimeout 函数。4,$interval:AngularJS $timeout 服务对应了 JS window.setInterval 函数。5,用户可以根据自己的需求来创建自定义服务。
http: angularJS のコア サービスで、リモート サーバーからデータを読み取るために使用されます。 $http の成功メソッドとエラー メソッドは v1.5 で非推奨になったことに注意してください。
格式：/ 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});select(select) の代わりに then メソッドを使用します。AngularJS では、配列またはオブジェクトを使用してオプションのドロップダウン リストを作成できます。
1,使用ng-options来创建一个对象<p ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select></p><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});</script>2,使用ng-repeat来创建对象，<select ng-model="selectedSite">
<option ng-repeat="x in names">{{x}}</option></select>3,区别：ng-options，选择的值是一个对象：也就是当select获取值selectedSite时候，得到的是一个对象。ng-repeat，选择的值是一个字符串:也就是当select获取值selectedSite时候，得到的是一个字符串Table: AngularJs の ng-repeat ディレクティブはテーブルを完全に表示できます。テーブルを表示するときにフィルターを使用することもできます。
<p ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names | orderBy : 'Name'">
<td>{{ $index + 1 }}</td>//显示序号 <td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table></p><script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});</script>HTML DOM： AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
1,ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
2,ng-show 指令隐藏或显示一个 HTML 元素。ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。你可以使用表达式来计算布尔值（ true 或 false）:
3,ng-hide 指令用于隐藏或显示 HTML 元素。注意在页面中如果使用input type=hidden来做表单传值的时候，是不支持的。
4,ng-click 指令定义了 AngularJS 点击事件。
模块： 模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
注意： 对于 HTML 应用程序，通常建议把所有的脚本都放置在 元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 区域被加载。在我们的实例中，AngularJS 在 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。另一个解决方案是在 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
表单： AngularJS 表单是输入控件的集合。
1,Input 控件使用 ng-model 指令来实现数据绑定。
2,checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中。举个例子：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业: <input type="checkbox" ng-model="user.jobs.engineer">工程师 <input type="checkbox" ng-model="user.jobs.designer">设计师 <input type="checkbox" ng-model="user.jobs.teacher">教师 </p>
<input type="submit" value="提交">
<input type="button" value="选中教师" ng-click="select_teacher()">
</form></body><script>
var app = angular.module("myApp", []);
app.controller("person", function($scope) {
$scope.user = {
jobs: {
engineer: true,
designer: false,
teacher: false
}
};
$scope.submit = function() {
alert(JSON.stringify($scope.user));
};
$scope.select_teacher = function() {
$scope.user.jobs.teacher = true;
}
});</script> 3,radio：我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
4,下拉菜单上面已经写过。在此不再复述。
输入验证： AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
});
</script>注意： 我们使用了 ng-show指令， color:red 在邮件的
invalid 都为 true 时才显示。
属性 描述$dirty 表单有填写记录$valid 字段内容合法的$invalid 字段内容是非法的$pristine 表单没有填写记录
API： AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：比较对象,迭代对象,转换对象,全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：
angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串，如果是返回 true。 angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
注意点：
1，HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
2，类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。AngularJS 表达式不支持条件判断，循环及异常。AngularJS 表达式支持过滤器。
好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
以上がangularjs について初めて知るときに知っておくべきことは何ですか? 2018 年に angularjs を始めるために必ず学ぶべきチュートリアル (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7554
15
1382
52
83
11
24
96
入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル
Jun 15, 2017 pm 05:50 PM
Javascript は、コードの構成、コードのプログラミング パラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。
PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供します
Jun 27, 2023 pm 07:37 PM
今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツール ライブラリ、開発効率など、多くの利点があります。
PHP と AngularJS を使用して Web アプリケーションを構築する
May 27, 2023 pm 08:10 PM
インターネットの継続的な発展に伴い、Web アプリケーションは企業情報構築の重要な部分となり、最新化作業に必要な手段となりました。 Web アプリケーションの開発、保守、拡張を容易にするために、開発者は開発ニーズに合った技術フレームワークとプログラミング言語を選択する必要があります。 PHP と AngularJS は非常に人気のある 2 つの Web 開発テクノロジであり、それぞれサーバー側とクライアント側のソリューションであり、これらを組み合わせて使用すると、Web アプリケーションの開発効率とユーザー エクスペリエンスを大幅に向上させることができます。 PHPPHPの利点
Flask と AngularJS を使用してシングルページ Web アプリケーションを構築する
Jun 17, 2023 am 08:49 AM
Web テクノロジーの急速な発展に伴い、シングル ページ Web アプリケーション (SinglePage Application、SPA) は、Web アプリケーション モデルとしてますます人気が高まっています。従来の複数ページの Web アプリケーションと比較して、SPA の最大の利点は、ユーザー エクスペリエンスがよりスムーズであり、サーバーのコンピューティング負荷も大幅に軽減されることです。この記事では、FlaskとAngularJSを使って簡単なSPAを構築する方法を紹介します。 Flask は軽量の Py です
PHP と AngularJS を使用してオンライン ファイル管理プラットフォームを開発し、ファイル管理を容易にする
Jun 27, 2023 pm 01:34 PM
インターネットの普及に伴い、ネットワークを使用してファイルを転送したり共有したりする人が増えています。ただし、さまざまな理由により、FTP などの従来の方法をファイル管理に使用しても、現代のユーザーのニーズを満たすことができません。したがって、使いやすく、効率的で安全なオンライン ファイル管理プラットフォームを確立することがトレンドになっています。この記事で紹介するオンライン ファイル管理プラットフォームは、PHP と AngularJS をベースにしており、ファイルのアップロード、ダウンロード、編集、削除などの操作を簡単に実行でき、ファイル共有、検索、検索などの一連の強力な機能を提供します。
PHP プログラミングで AngularJS を使用するにはどうすればよいですか?
Jun 12, 2023 am 09:40 AM
Web アプリケーションの人気に伴い、フロントエンド フレームワーク AngularJS の人気も高まっています。 AngularJS は、Google が開発した JavaScript フレームワークで、動的な Web アプリケーション機能を備えた Web アプリケーションの構築に役立ちます。一方、バックエンド プログラミングの場合、PHP は非常に人気のあるプログラミング言語です。サーバーサイド プログラミングに PHP を使用している場合、PHP と AngularJS を使用すると、Web サイトにさらに動的な効果がもたらされます。
フロントエンド開発に PHP と AngularJS を使用する方法
May 11, 2023 pm 05:18 PM
インターネットの普及と発展に伴い、フロントエンド開発の重要性がますます高まっています。フロントエンド開発者として、私たちはさまざまな開発ツールとテクノロジーを理解し、習得する必要があります。その中でも、PHP と AngularJS は非常に便利で人気のあるツールです。この記事では、これら 2 つのツールをフロントエンド開発に使用する方法を説明します。 1. PHP の概要 PHP は、人気のあるオープン ソースのサーバー側スクリプト言語であり、Web 開発に適しており、Web サーバーやさまざまなオペレーティング システム上で実行できます。 PHP の利点は、シンプルさ、スピード、利便性です。
