AngularJSエントリの基本

著者：Eve Cole 更新時間：2025-06-14 16:00:03

角度

使用されたすべてのライブラリ、使用されたCDN：

コードコピーは次のとおりです。

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

.Angularのデータバインディングインスタンス、これは最も基本的で、ここから角度開始のすべての枝と葉です。

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

Angularの最も強力なことは、データバインディングバインディングです

</div>

<div>

<入力型= "text" ng-model = "data" />

<スクリプト>

App.Controller（ "BF"、function（$ scope）{

$ scope.data = "testData";

// $ scope。$ apply（）;

}）;

</script>

</div>

</body>

</html>

Angularを介して、配列の対応するデータを表示します。

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

Angularを介して、配列の対応するデータを表示します。

</div>

<div>

<style>

.s {

色：＃f00;

}

li {

カーソル：ポインター;

}

</style>

<ul>

{{i.name}} ---- {{i.age}}

</li>

</ul>

<スクリプト>

//ANGULAR.MODULE("arr-app "、[]）;

function arrcon（$ scope）{

$ scope.flag = 0;

$ scope.bered = function（i）{

$ scope.flag = i;

};

$ scope.lists = [

{名前： "Hehe"、

年齢：10}、

{

名前：「xx」、

年齢：20

}、

{

名前：「YY」、

年齢：2

}、

{

名前：「JJ」、

年齢：220

}

]

};

</script>

</div>

</body>

</html>

データフィルターのデモ：

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

データフィルター;

</div>

<br>

</div>

<スクリプト>

関数フィルター（$ scope）{

$ scope.sourcode = "hehe lala dudu oo zz";

};

app.filter（ "up"、function（）{

return function（ipt）{

return ipt.replace（/（/w）/g、function（$ 0、$ 1）{

return ""+$ 1.touppercase（）;

}）;

}

}）;

</script>

</div>

</body>

</html>

ファクトリーファクトリー、$プロバイダー、サービスなどはすべて同じです。難しいと感じないでください。実際、それはデータモデルまたはインスタンスを見るためだけです;：

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

Angularの工場は、複数のコントローラーが使用できる関数として理解できる共通のインスタンスメソッドと同等です。

</div>

<スクリプト>

app.Factory（ "ff"、function（）{

戻る {

「noting」：「json」

};

}）;

App.Controller（ "Factory"、function（$ scope、ff）{

$ scope.json = ff;

}）;

</script>

</div>

<div>

角度指令;

</div>

<div>

<heh>あなたはコンテンツをしますか？</heh>

<スクリプト>

app.directive（ "heh"、function（）{

戻る {

制限：「AE」、

交換：本当、

transclude：本当、

テンプレート： '<div> <button ng-transclude> </button> </div>'

};

}）

</script>

</div>

</body>

</html>

.ng-switchディレクティブの使用（このテンプレートが本当に必要です。これは、最初にタブプラグインを非表示にして表示するための一般的なクリックの角度です）::

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

Ng-Switchの使用

</div>

</ul>

</div>

<div>

<ボタンng-click = "a = 3"> test </button>

</div>

App.Controller（ "SW"、function（$ scope）{

}）;

</script>

</div>

</body>

</html>

ng-srcおよびng-href;

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

NG-SRCおよびNG-HREFの使用（SRCまたはHREFを使用する場合、HTMLは初期化時にロードされますが、これは絶対に不可能です）

</div>

</a>

</div>

App.Controller（ "Srccon"、function（$ scope）{

$ scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

}）;

</script>

</div>

</body>

</html>

ページスタイルを操作する方法、バウンドデータモデルを直接変更するだけです。

コードコピーは次のとおりです。

<div>

Angularはスタイルで動作します。（JQは、要素スタイルで動作する要素を手動で選択することです。Angularは、要素の属性を変数に割り当てるためのより多くの方法を提供します。この変数を変更するだけです）

</div>

<div>

hehe - o（^^）o wow;

</hehe>

</div>

app.directive（ "hehe"、function（）{

関数compile（）{

};

戻る {

リンク：function（$ scope、$ element）{

var obj = angular.element（$ element）;

//obj.findは使いやすいことではありません。

var add = obj [0] .getelementsbyclassname（ "add"）[0];

var reduce = obj [0] .getelementsbyclassname（ "reduce"）[0];

angular.element（add）.bind（ "click"、function（）{{

$ scope.h = $ scope.h+10;

適用する（）;

}）

angular.element（reduce）.bind（ "click"、function（）{{

$ scope.h = $ scope.h-10;

適用する（）;

}）;

function apply（）{

$ scope。$ apply（）;

}

コンパイルを返します。

}、

コントローラー：function（$ scope）{

$ scope.w = 200;

$ scope.h = 50;

// $ scope。$ apply（）;

}、

制限：「AE」、

交換：本当、

範囲：「= ngスタイル」、

transclude：本当、

テンプレート： '<div> <div ng-transclude> </div> <butth>+</button> <butth> - </button> </div>'

}

}）

</script>

</div>

Angularでテンプレートを使用する方法は？これはルーターで使用する必要があります。

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

テンプレートを使用します

</div>

<！---このタイプは正確に宣言する必要があります - >

</script>

<！--- TPLは変数ではなく固定値であり、変数はスコープで定義する必要があります--->

<div>

<button ng-click = "chan（）"> change </button>

</div>

App.Controller（ "ngtpl"、function（$ scope）{

関数hehe（str）{

str = _.shuffle（str）;

return str.join（ ""）

};

$ scope.ver = "var-ver--heehe";

$ scope.chan = function（）{

$ scope.ver = hehe（$ scope.ver）;

};

}）;

</script>

</div>

</body>

</html>

$ scopeを使用する方法。$ watchバインドインターフェイスのテンプレートをリアルタイムで変更する：

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

<span> update </span> angular通知データ更新3つの方法で$ scope。$ digest（）、$ scope。$ apply（）、および$ scope。$ watchリスニング;

</div>

<入力型= "text" ng-model = "m0" />

<div>

$ scopeで設定された値。$ watch == >> {{wat}}

</div>

<br>

適用する;

</button>

</div>

App.Controller（ "Apply"、function（$ scope）{

$ scope.hehe = "lll________xxx";

$ scope.m0 = 1;

ss = $ scope;

$ scope.up = function（）{

$ scope.hehe = $ scope.m0;

//はい、しかし、プロンプトが与えられたときにエラーが報告されました。誰がその理由を知っていますか？

// $ scope。$ apply（）;

$ scope。$ digest（）;

};

// $ scope.m0変数を無効にします。

$ scope。$ watch（ "m0"、function（va）{

$ scope.wat = va;

}）

}）;

</script>

</div>

</body>

</html>

自分をAngularで定義するツール方法

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

Angularのツールメソッドのリスト

</div>

<div>

<ul>

<liロール= "プレゼンテーション"> <a href = "###"> angular.bind </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.bootstrap </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.copy </a> </li>

<li chole = "Presention"> <a href = "###"> angular.element </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.equals </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.extend </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.foreach </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.fromjson </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.identity </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.injector </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isarray </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isdate </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isdefined </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.iselement </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isfunction </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isnumber </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isobject </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isstring </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.isundefined </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.lowercase </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.module </a> </li>

<li chole = "Presention"> <a href = "###"> angular.noop </a> </li>

<li chole = "Presention"> <a href = "###"> angular.reloaddebuginfo </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.tojson </a> </li>

<liロール= "プレゼンテーション"> <a href = "###"> angular.uppercase </a> </li>

</ul>

<div>

これらのツールと方法は、他のライブラリに似ています。

Angular.Elementは、Anguarlite選択要素のための小さなJQです。

<br>

Angular.moduleはモジュール要素の方法です。

</div>

</body>

</html>

ng-transcludeの使用（これは公式ケースです）、コードは次のとおりです。

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

Ng-Transcludeの使用（これは公式ケースです）：

</div>

<div>

<入力ng-model = "title"> <br>

</div>

app.directive（ 'pane'、function（）{

戻る {

制限： 'e'、

transclude：本当、

スコープ：{title： '@'}、

テンプレート： '<div style = "border：1px solid black;">' +

'<div style = "background-color：gray"> {{title}} </div>' +

'<ng-transclude> </ng-transclude>' +

'</div>'

};

}）

.Controller（ 'Examplecontroller'、['$ scope'、function（$ scope）{

$ scope.title = 'lorem ipsum';

$ scope.text = 'nequ porno quisquam est qui dolorem ipsum quia dolor ...';

}]）;

</script>

</div>

</body>

</html>

メールボックスの精度を確認する例は次のとおりです。

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

ngpaste、ngmouseup、ngkeyup、ngmodeloptionsなど、公式使用を参照してください。CheckAPIを使用するだけです（公式ニーズFQ;）

</div>

<スクリプトsrc = "https://yearofmoo.github.io/ngmessages/angular-messages.js"> </script>

NGメッサージコンポーネントを使用しない場合、エラープロンプトは次のとおりです。

<div>

<label for = "emailAddress">メールアドレスを入力：</label>

<入力タイプ= "email" name = "emailaddress" ng-model = "data.email" reby />

<！ - このようなものははるかに複雑すぎます - >

あなたはあなたのメールアドレスを入力するのを忘れました...

</div>

<div ng-if = "！userform.emailaddress。$ error.required &&

userform.emailaddress。$ error.email ">

あなたはあなたのメールアドレスを正しく入力しませんでした...

</div>

<入力型= "submit" />

</form>

<br>

<a href = "https://yearofmoo.github.io/ngmessages/">外国人によって書かれたデモ</a>

</div>

App.Controller（ "FromVaild"、function（$ scope）{

//$SCOPE.MYFIELD.VETERROR = {MINLENGTH：true、必須：false};

}）

</script>

</div>

</body>

</html>

SetimeOutとSetIntervalはどちらもAngularで包まれており、遅延オブジェクトのインスタンスを返します。

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title> angular </title>

<スクリプトsrc = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>

<スクリプトsrc = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javascript"> </script>

</head>

var app = angular.module（ "app"、[]）;

</script>

<div>

$タイムアウトと$間隔、これら2つのサービス。

</div>

<div>

<h4> setinterval </h4>

<p>

$ interval（fn、delay、[count]、[invokeapply]）;

</p>

</a>

<h4>タイムアウト</h4>

<p>

$ Timeout（fn、[delay]、[invokeapply]）;

</p>

</a>

</div>

<div>

0％

</div>

始める

</button>

</div>

App.Controller（ "St"、function（$ scope、$ element、$ interval）{

var $ el = $（$ element [0]）。find（ "。progress-bar"）;

console.log（arguments）;

// Angular.Elementで選択された要素を使用して、見つけることなく何かを見つけます。

$ scope.prog = function（）{

var df = $ interval（function（）{

var val = parseint（$ el.html（））+4;

if（val> = 104）$ interval.cancel（df）;

$ el.html（val+"％"）.width（val+"％"）;

}、100）;

console.log（df）

//console.log(aa = $ interval）

};

}）;

</script>

</div>

</body>

</html>