javascript 从 Angular JS 开始的基本指南
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15441438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A Basic Guide To Starting With Angular JS
提问by Jess McKenzie
I am confused to were to start when creating my app.
我很困惑要在创建我的应用程序时开始。
When I click the add button I am wanting to show a form - Do I append a div to that button?
当我单击添加按钮时，我想显示一个表单 - 我是否在该按钮上附加了一个 div？
How do I attack this?
我如何攻击这个？
Code:
代码：
<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>
回答by Josh David Miller
Okay, from the top! :-)
好的，从上往下！:-)
First, you have to tell AngularJS somewhere that you're using it. The bodytag is as good a place as any: <body ng-app="myApp">. Thistells AngularJS to use a module called myAppas the root of your application. So let's define that now:
首先，您必须在某处告诉 AngularJS 您正在使用它。该body标签是一个很好的地方一样：<body ng-app="myApp">。这告诉 AngularJS 使用一个称为myApp应用程序根的模块。所以让我们现在定义：
// app.js
var app = angular.module( 'myApp', [] );
The second argument is an array of dependencies. We won't worry about that now. So now we have a module. AngularJS is an MVCframework, so we also need to define a controller somewhere. Let's add this to our app.jsfile:
第二个参数是依赖项数组。我们现在不会担心这个。所以现在我们有一个模块。AngularJS 是一个MVC框架，所以我们还需要在某处定义一个控制器。让我们将其添加到我们的app.js文件中：
app.controller( 'MainCtrl', function( $scope ) {
// we control our app from here
});
The $scopevariable is how we glue our controller logic to the view. Speaking of the view, we have to tell AngularJS to use this controller someplace. Let's edit the bodytag once more:
该$scope变量是我们如何胶水我们的控制器的逻辑视图。说到视图，我们必须告诉 AngularJS 在某个地方使用这个控制器。让我们body再次编辑标签：
<body ng-app="myApp" ng-controller="MainCtrl">
Boom! Our app works. So now AngularJS is all set up and working, so we can tackle your question.
繁荣！我们的应用程序有效。所以现在 AngularJS 已经全部设置好并且可以工作了，所以我们可以解决您的问题。
You want to make something appear on a certain action. There's a directive for that called ngShow. It will show whatever's inside of it when the condition is true:
你想让某些东西出现在某个动作上。有一个指令叫做ngShow. 当条件为真时，它将显示其中的内容：
<form ng-show="visible">
What is visible? That's an expression. In this case, it's just a variable. Defined where? On our scope!
什么是visible？那是一种表达。在这种情况下，它只是一个变量。定义在哪里？在我们的范围内！
app.controller( 'MainCtrl', function( $scope ) {
$scope.visible = false;
});
Okay, so now it starts out as false; how do we change it to truewhen we click a button? There's a directive for that called ngClickthat also takes an expression:
好的，现在它开始为false; true当我们点击一个按钮时，我们如何将其更改为？有一个被调用的指令ngClick也需要一个表达式：
<a class="btn" ng-click="visible = true">Show the Form</a>
In this case, our expression changes the visiblevariable to true. And immediately, the form is shown! Here's a completed Plunker: http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview
在这种情况下，我们的表达式将visible变量更改为true。并立即显示表格！这是一个完整的 Plunker：http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview
Welcome to AngularJS!
欢迎使用 AngularJS！
Here are some supplemental resources you should grok:
以下是您应该了解的一些补充资源：
- The Tutorial: http://docs.angularjs.org/tutorial
- The Guide: http://docs.angularjs.org/guide/
- Migrating from jQuery: "Thinking in AngularJS" if I have a jQuery background?
- 教程：http: //docs.angularjs.org/tutorial
- 指南：http: //docs.angularjs.org/guide/
- 从 jQuery 迁移：如果我有 jQuery 背景，“在 AngularJS 中思考”？
And also join us on the Mailing List! We're good people.
并加入我们的邮件列表！我们是好人。
回答by EnigmaRM
Sounds like you're just starting to test out Angular. I've only been using it for about a week now. Things are pretty cool when you get realize how they work. Wish there were better/more documentation on it though. I drew up a quick JSFiddle examplewhat it sounded like you were looking for. Let me know if that's somewhat of what you were looking for. Should work completely.
听起来您刚刚开始测试 Angular。我现在才使用它大约一个星期。当你意识到它们是如何工作的时候，事情就变得很酷了。但希望有更好/更多的文档。我草拟了一个快速的JSFiddle 示例，它听起来像是您在寻找什么。让我知道这是否是您正在寻找的内容。应该完全工作。
<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>
And your script:
还有你的脚本：
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 = '';
};
}
回答by Neil Moffatt
You can find a simple and a more involved example of creating Angular applications with no prior knowledge:
您可以找到一个简单且更复杂的示例，用于在没有先验知识的情况下创建 Angular 应用程序：
and
和
They should help provide easy familiarisation.
他们应该帮助提供容易的熟悉。
