从 Angular JS 开始的基本指南答案

【问题标题】：A Basic Guide To Starting With Angular JS从 Angular JS 开始的基本指南
【发布时间】：2013-03-04 16:49:02
【问题描述】：

我很困惑在创建我的应用程序时要开始。

当我单击添加按钮时，我想显示一个表单 - 我是否将 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>

【问题讨论】：

我有点困惑；我没有看到任何 AngularJS 代码。您是否手动引导您的应用程序？
@JoshDavidMiller 我还没有编写任何代码，因为我不确定是否要开始。我正在使用 Twitter BS
最好的起点是阅读文档中的教程
检查这个：github.com/jmcunningham/AngularJS-Learning
W3Schools 手册是一个很好的开始方式：w3schools.com/angular

标签： javascript jquery html angularjs

【解决方案1】：

您可以找到一个简单且更复杂的示例来创建没有先验知识的 Angular 应用程序：

Formatting an html element

和

Adding a data edit facility

它们应该有助于轻松熟悉。

【讨论】：

欢迎来到 SO！这里的答案应该是独立的，这意味着即使其中的任何链接中断，它们也应该有意义并且有用。不幸的是，如果这些链接中断，这个答案将不是很有用。也许您可以对其进行编辑以解决此问题？以后，当你有足够的声望发表评论时，你可以将这样的链接作为 cmets 提供。

【解决方案2】：

听起来您才刚刚开始测试 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 = '';
};
}

【讨论】：

【解决方案3】：

好的，从顶部开始！ :-)

首先，你必须在某个地方告诉 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！我们都是好人。

【讨论】：

哇，谢谢乔希 - 我刚刚看了youtube.com/watch?v=WuiHuZq_cg4，所以我进入了思维框架
约翰的视频很棒。另请查看AngularJS YouTube channel 和Egghead.io 教程。
嘿，我非常了解这个概念，但是.. 是以及如何测试我的示例.. 我在视频教程中从未遇到过这个
感谢您的快速入门；特别是对于像我这样的懒人:)