AngularJS 简介

AngularJS はJavaScript 框架。これは <script> タグを使用して HTML ページに追加できます。

AngularJS 通过指令HTMLを拡張し、表达式データを HTML にバインドします。

AngularJS は JavaScript フレームワークです

AngularJS は JavaScript フレームワークです。JavaScript で書かれたライブラリです。

AngularJS は JavaScript ファイルとして配布されており、script タグでウェブページに追加できます：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

Note スクリプトは <body> 要素の末尾に配置することをお勧めします。
これにより、HTML の読み込みがスクリプトの読み込みに制約されないため、ウェブページの読み込み速度が向上します。

各 angular.js バージョンのダウンロード：https://github.com/angular/angular.js/releases

AngularJS は HTML を拡張します

AngularJS 通过ng-directivesHTML を拡張します。

ng-appディレクティブは AngularJS アプリケーションを定義します。

ng-modelディレクティブは要素の値（入力フィールドの値など）をアプリケーションにバインドします。

ng-bindディレクティブはアプリケーションデータを HTML ビューにバインドします。

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 :<input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> <p ng-bind="name"></p> </div> </body> </html>

尝试一下 »

实例讲解：

ウェブページの読み込みが完了すると、AngularJS が自動的に起動します。

ng-appディレクティブはAngularJSに、<div>要素がAngularJSアプリケーションのコンテナであることを伝えます。应用程序の「所有者」。

ng-modelディレクティブは入力フィールドの値をアプリケーション変数にバインドします。name。

ng-bindディレクティブはアプリケーション変数 name を段落の innerHTML にバインドします。

Note もし削除したらng-appディレクティブにより、HTMLは式の結果を計算せずに直接表示します。

AngularJS とは何ですか？

AngularJS は、モダンなシングルページアプリケーション（SPAs：Single Page Applications）の開発をより容易にします。

  • AngularJS はアプリケーションデータを HTML 要素にバインドします。
  • AngularJS は HTML 要素をクローンして繰り返すことができます。
  • AngularJS は HTML 要素を非表示にしたり表示したりできます。
  • AngularJS は HTML 要素の「背後」にコードを追加できます。
  • AngularJS は入力検証をサポートします。

AngularJS 指令

ご覧のとおり、AngularJS ディレクティブはngプレフィックスとしての HTML 属性。

ng-initディレクティブは AngularJS アプリケーション変数を初期化します。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'"> <p>氏名は<span ng-bind="firstName"></span></p> </div>

尝试一下 »

Note HTML5 では拡張（独自の）属性が許可されておりdata-开头。
AngularJS 属性は、ng-先頭に、ただし使用できるのはdata-ng-ウェブページを HTML5 に対して有効にするため。

有効な HTML5：

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'"> <p>氏名は<span data-ng-bind="firstName"></span></p> </div>

尝试一下 »

AngularJS 式

AngularJS の式は二重中括弧内に記述します：{{ expression }}。

AngularJS の式はデータを HTML にバインドします。これはng-bindディレクティブと似た効果があります。

AngularJS は式が記述された位置でデータを「出力」します。

AngularJS 式很像JavaScript 式：それらにはテキスト、演算子、変数を含めることができます。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>私の最初の式： {{ 5 + 5 }}</p> </div> </body> </html>

尝试一下 »

AngularJS 应用

AngularJS 模块（Module）AngularJS アプリケーションを定義します。

AngularJS コントローラ（Controller）AngularJS アプリケーションの制御に使用されます。

ng-appディレクティブはアプリケーションを指定し、ng-controllerコントローラを指定します。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">名:<input type="text" ng-model="firstName"><br>姓:<input type="text" ng-model="lastName"><br> <br>姓名: {{firstName + " " + lastName}}</div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

尝试一下 »

AngularJS モジュールはアプリケーションを定義します：

AngularJS 模块

var app = angular.module('myApp', []);

AngularJS コントローラはアプリケーションを制御します：

AngularJS コントローラ

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

次のチュートリアルでは、アプリケーションとモジュールについてさらに学ぶことができます。

に Cloud Studio 中使用 AngularJS

  • step1：访问 腾讯云开发者平台，注册/登录账户。

  • step2：に右侧の运行环境菜单选择："ubuntu"

  • step3：に左侧代码目录中新建 html 目录，编写你の HTML 代码，例如 index.html

  • step4：に index.html 文件の中粘贴如下代码、来引入 AngularJS：

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

  • step5：に终端中输入命令sudo vim /etc/nginx/site-enable/default。将配置文件红框部分修改ために如下图所示，然后输入命令：sudo nginx restart 重启 nginx 服务（ nginx 安装完成并启动后默认会监听80端口。我们需要将 nginx の站点目录以及监听の端口号改ために我们需要の）

  • step6：点击最右侧の【访问链接】选项卡，に访问链接面板中填写端口号ために：8080（と刚才 nginx 配置ファイル内の端口号一致），点击创建链接，即可点击生成の链接访问我们刚刚编書いた代码，查看 AngularJS 效果。

现に CODING 正に举办一场基于 Cloud Studio 工作空間の【我最喜爱の Cloud Studio 插件评选大赛】。进入活动官网：https://studio.qcloud.coding.net/campaign/favorite-plugins/index，もっと詳しく活动信息。

其他扩展