從角度JS開始的基本指南

我很困惑要在創建我的應用程序時開始。從角度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代碼。你是否手動引導你的應用程序？ – 2013-03-15 20:31:34

@JoshDavidMiller我還沒有寫任何代碼，因爲我不知道要開始。我正在使用Twitter BS – 2013-03-15 20:37:15

偉大的地方開始是通過教程在文檔 – charlietfl 2013-03-15 20:46:34

好了，從上面！ :-)

首先，你要的地方，你使用它告訴AngularJS。 body標籤與任何地方一樣好：<body ng-app="myApp">。 This告訴AngularJS使用稱爲myApp的模塊作爲您的應用程序的根。現在讓我們來定義：

// app.js 

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

第二個參數是一個依賴關係數組。我們現在不會爲此擔心。所以現在我們有一個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。它會顯示它內部的一切的時候條件爲真：

<form ng-show="visible">

什麼是visible？這是一個expression。在這種情況下，它只是一個變量。定義在哪裏？在我們的範圍內！

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

好吧，現在它開始爲false;當我們點擊一個按鈕時，我們如何將其更改爲true？有用於調用ngClick也需要一個表達一個指令：

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

在這種情況下，我們的表達visible變量變爲true。並立即顯示錶格！這裏有一個完成Plunker：http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview

歡迎AngularJS！

這裏有一些補充的資源，你應該神交：

教程：http://docs.angularjs.org/tutorial
指南：http://docs.angularjs.org/guide/
從jQuery的遷移："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，所以我進入思維框架 – 2013-03-15 21:02:41

約翰的視頻很棒。還請查看[AngularJS YouTube頻道]（http://www.youtube.com/angularjs）和[Egghead.io]（http://egghead.io/）教程。 – 2013-03-15 21:20:36

嘿，我理解這個概念非常好，但..是和如何測試我的例子..我從來沒有在我的視頻教程中遇到這個 – saikiran 2013-08-07 18:34:08

聽起來就像你剛開始測試Angular。我現在只用了一個星期左右。當你意識到自己的工作方式時，事情會非常酷。希望那裏有更好/更多的文檔。我制定了一個快速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

歡迎來到SO！這裏的答案應該是自包含的，這意味着即使它們中的任何鏈接中斷，它們也應該是有意義的並且是有用的。不幸的是，如果這些鏈接中斷，這個答案將不會很有用。也許你可以**編輯它來解決這個**？稍後，當您有足夠的評論聲望時，您可以將這樣的鏈接作爲評論。 – hyde 2014-03-17 20:27:39

從角度JS開始的基本指南

回答

相關問題