Angular JSを使用するための基本的なガイド

私のアプリを作成するときはまず混乱していました。Angular JSを使用するための基本的なガイド

追加ボタンをクリックすると、フォームを表示したいとき - そのボタンにdivを追加しますか？

これをどのように攻撃しますか？

コード：

<body> 
<div id="wrap"> 

    <!-- Begin page content --> 
    <div classa="container"> 
    <div class="page-header"> 
     <h1>Birthday Reminders</h1> 
    </div> 
     <p>Data Here</p> 
    </div> 

    <div id="push"></div> 
</div> 

<div id="footer"> 
    <div class="container"> 
    <a href="#">Add</a> 
    </div> 
</div> 
    <script type="text/javascript" src="js/cordova-2.5.0.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body>

出典

2013-03-15 Jess McKenzie

私は少し混乱しています。 AngularJSコードは表示されません。あなたは手動であなたのアプリをブートストラップしていますか？ –

@JoshDavidMiller私はまだコードが書かれていません。私はTwitter BSを使用しています –

スタートするには素晴らしい場所です。 – charlietfl

さて、上から！ :-)

まず、AngularJSにあなたが使用していることを伝える必要があります。 bodyタグは、<body ng-app="myApp">と同じくらい良い場所です。 Thisは、アプリケーションのルートとしてmyAppというモジュールを使用するようにAngularJSに指示します。だからここで定義しましょう：

// app.js 

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

第2引数は依存関係の配列です。私たちは今それについて心配しません。だから我々はmoduleを持っています。 AngularJSはMVCフレームワークなので、コントローラをどこかに定義する必要もあります。私たちのapp.jsファイルにこれを追加してみましょう：

app.controller('MainCtrl', function($scope) { 
    // we control our app from here 
});

$scope変数は、我々はビューに、当社のコントローラロジックを接着する方法です。ビューについて言えば、AngularJSにこのコントローラを使用するように指示する必要があります。もう一度bodyタグを編集してみましょう：

<body ng-app="myApp" ng-controller="MainCtrl">

ブーム！私たちのアプリは動作します。だからAngularJSはすべてセットアップされ、働いているので、あなたの質問に取り組むことができます。

特定の操作に何かを表示したいとします。 ngShowと呼ばれる命令があります。これは、条件が真であるとき、その中に何でも表示されます：visibleある

<form ng-show="visible">

何？それはexpressionです。この場合、それは単なる変数です。定義された場所？私たちの範囲！

app.controller('MainCtrl', function($scope) { 
    $scope.visible = false; 
});

さて、今度はfalseとして始まります。ボタンをクリックすると、どうすればtrueに変わるのですか？この場合

<a class="btn" ng-click="visible = true">Show the Form</a>

は、私たちの式はtrueにvisible変数を変更します。また、式をとると呼ばngClickためのディレクティブがあります。そしてすぐに、フォームが表示されます！完成したプランカーは次のとおりです。http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview

AngularJSへようこそ！

チュートリアル：http://docs.angularjs.org/tutorial
ガイド：ここ

は、あなたが完全に理解すべきいくつかの補足的な資源であるjQueryのからの移行http://docs.angularjs.org/guide/
："Thinking in AngularJS" if I have a jQuery background?

も参加します私たちはMailing Listに！私たちは良い人です。

出典

2013-03-15 21:00:59

よろしくお願いします。ジョシュ - 私はちょうどhttp://www.youtube.com/watch?v=WuiHuZq_cg4を見て、心フレームに入っています。 –

ジョンのビデオは素晴らしいです。また、[AngularJS YouTubeチャンネル]（http://www.youtube.com/angularjs）と[Egghead.io]（http://egghead.io/）チュートリアルもご覧ください。 –

こんにちは私はコンセプトを非常にうまく理解していますが、私のサンプルをテストする方法は何ですか？私のビデオチュートリアルでこれを見つけたことはありません – saikiran

Angularをテストし始めたような音です。私は約1週間しか使用していません。あなたは彼らがどのように動作するかを理解するとき、ものはかなりクールです。しかし、より良い/もっと多くのドキュメントがあったと願っています。私は素早くあなたが探していたように聞こえたものをJSFiddle example作成しました。それがあなたが探していたものかどうか私に教えてください。完全に動作するはずです。

<div ng-controller="bdayCtrl"> 
<h3>Birthday Reminders</h3> 
<table border="1"> 
    <tr ng-repeat="bday in bdays"> 
     <td>{{bday.name}}</td> 
     <td>{{bday.date}}</td> 
    </tr> 
</table> 

<a class="btn" ng-click="visible = true">Add new</a><br> 

<form class="form-horizontal" ng-show="visible" ng-submit="newDate()"> 
    <input type="text" ng-model="bdayname" placeholder="Name"><br> 
    <input type="text" ng-model="bdaydate" placeholder="Birthdate"> 
    <button class="btn" type="submit"><i class="icon-plus"></i>Add</button> 
</form> 
</div>

そして、あなたのスクリプト：あなたはシンプルかつ事前の知識を持つ角度のアプリケーションを作成するためのより複雑な例を見つけることができます

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

function bdayCtrl($scope) { 
$scope.bdays = [{ 
     "name": "Jamal", 
     "date": "Jan 1, 1980" 
}, { 
     "name": "Paula", 
     "date": "Jan 1, 2000" 
}, { 
     "name": "Damon", 
     "date": "Jun 30, 1800" 
}]; 

$scope.newDate = function() { 
    $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate}); 
    $scope.bdayname = ''; 
    $scope.bdaydate = ''; 
}; 
}

出典

2013-03-15 22:40:44 EnigmaRM

：

Formatting an html element

と

Adding a data edit facility

これらは簡単に慣れ親しんでください。

出典

2014-03-17 19:30:40

ようこそ！ここでの回答は自己完結型でなければなりません。つまり、リンクが途切れても意味を持ち、役立つはずです。残念ながら、これらのリンクが壊れた場合、この回答はあまり役に立ちません。 **これを修正するために**編集できますか？後で、あなたがコメントする評判が十分にあるときは、このようなリンクをコメントとして与えることができます。 – hyde

Angular JSを使用するための基本的なガイド

答えて

関連する問題