您希望在网页上使用 Angular.js。
为了启动并运行您的第一个 Angular.js 应用程序，您需要通过script标记包含 Angular JavaScript 文件，并使用ng-app指令:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/ angularjs/1.0.4/angular.js">
</script>
</head>
<body ng-app>
<p>This is your first angular expression: {{ 1 + 2 }}</p>
</body>
</html>你可以在 GitHub 上查看一个完整的例子。
添加ng-app指令让 Angular 施展魔法。表达式{{ 1 + 2 }}由 Angular 求值，结果3被渲染。请注意，移除ng-app将导致浏览器按原样呈现表达式，而不是对其求值。玩弄表情！例如，您可以连接字符串并反转或组合布尔值。
为了简洁起见，我们将跳过以下食谱中的样板代码。
您希望用户输入用于 HTML 页面的另一部分。
使用 Angular 的ng-model指令将文本输入绑定到表达式:
Enter your name: <input type="text" ng-model="name"></input>
<p>Hello {{name}}!</p>你可以在 GitHub 上找到完整的例子。
为ng-model属性指定“名称”并在表达式中使用名称变量将自动保持两者同步。在文本输入中键入将自动在下面的段落元素中反映这些变化。
考虑如何使用传统的 jQuery 实现这一点:
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
Enter your name: <input type="text"></input>
<p id="name"></p>
<script>
$(document).ready(function() {
$("input").keypress(function() {
$("#name").text($(this).val());
});
});
</script>
</body>
</html>在文档就绪时，我们绑定到文本输入中的 keypress 事件，并在回调函数中替换段落中的文本。使用 jQuery，您需要处理文档就绪回调、元素选择、事件绑定和上下文。相当多的概念需要消化，代码行需要维护！
您希望在按钮点击时隐藏一个 HTML 元素。
将ng-hide指令与控制器结合使用，改变按钮点击时的可见性状态:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app>
<div ng-controller="MyCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p>
</div>
</body>
</html>js/app.js中的控制器:
function MyCtrl($scope) {
$scope.visible = true;
$scope.toggle = function() {
$scope.visible = !$scope.visible;
};
}你可以在 GitHub 上找到完整的例子。
切换按钮时，“你好世界”段落将改变其可见性。
使用ng-controller指令，我们将div元素，包括其子元素，绑定到MyCtrl控制器的上下文。ng-click指令将在按钮点击时调用我们控制器的toggle()功能。请注意，ng-show指令绑定到visible范围变量，并将相应地切换段落的可见性。
控制器实现默认visible属性为真，并在toggle功能中切换其布尔状态。visible变量和toggle函数都是在$scope服务上定义的，该服务通过依赖注入自动传递给所有控制器函数。
下一章将详细介绍 Angular 中控制器的所有细节。现在，让我们快速讨论 Angular 使用的模型-视图-视图模型(MVVM)模式。在 MVVM 模式中，模型是普通的 JavaScript，视图是 HTML 模板，视图模型是模板和模型之间的粘合剂。视图模型使 Angular 的双向绑定成为可能，其中模型或模板中的更改会自动同步。
在我们的例子中，visible属性是模型，但是当例如从后端服务检索数据时，它当然会复杂得多。控制器用于定义表示视图模型的范围。它通过绑定作用域变量visible和函数toggle()来与 HTML 模板交互。
当向用户呈现数据时，您可能需要将数据转换为更加用户友好的格式。在我们的例子中，我们希望将表达式中上一个配方的name值大写。
使用uppercase角度滤镜:
Enter your name: <input type="text" ng-model="name"></input>
<p>Hello {{name | uppercase }}!</p>你可以在 GitHub 上找到完整的例子。
Angular 使用|(管道)字符将过滤器与表达式中的变量组合在一起。计算表达式时，名称变量被传递给大写筛选器。这类似于使用 Unix bash 管道符号，其中一个输入可以被另一个程序转换。还有，试试lowercase滤镜！
您希望呈现一个 HTML 片段，但有条件地隐藏它。
创建一个自定义指令来呈现你好世界片段:
<body ng-app="MyApp">
<label for="checkbox">
<input id="checkbox" type="checkbox" ng-model="visible">Toggle me
</label>
<div show="visible">
<p>Hello World</p>
</div>
</body>show属性是我们的指令，实现如下:
var app = angular.module("MyApp", []);
app.directive("show", function() {
return {
link: function(scope, element, attributes) {
scope.$watch(attributes.show, function(value){
element.css('display', value ? '' : 'none');
});
}
};
});如果复选框被选中，浏览器将只显示“你好世界”段落，否则将隐藏它。
你可以在 GitHub 上找到完整的例子。
让我们暂时忽略app模块的创建，并在后面的章节中更深入地研究它。在我们的示例中，它只是创建指令的手段。注意show字符串是指令的名称，对应于模板中使用的show HTML 属性。
指令实现返回定义指令行为的link函数。它通过了scope、超文本标记语言element,和超文本标记语言attributes。由于我们将visible变量作为属性传递给了我们的show指令，我们可以通过attributes.show直接访问它。但是由于我们想要自动响应visible变量的变化，所以我们必须使用$watch服务，每当值发生变化时，它都会为我们提供一个函数回调。在这个回调中，我们将 CSS display属性更改为空白或none来隐藏 HTML 元素。
这只是对指令能实现什么的一瞥；后面有一整章专门介绍他们，这一章要详细得多。