在教初学者AngularJs时，你认为最简单最小的AngularJs 'Hello World‘示例是什么？
在教初学者AngularJs时，你认为最简单最小的AngularJs 'Hello World‘示例是什么？
提问于 2013-11-05 20:55:17
对于初学者来说，在AngularJS中最简单的“Hello World”是什么？到目前为止，我有这样的想法：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-ng-app="">
{{'Hello World' }}
</div>
<script src="angular.js"></script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2013-11-05 21:58:59
展示双向数据绑定的最简单的Hello World
<!doctype html>
<html lang="en" ng-app>
<head>
<title> Hello World </title>
</head>
<body ng-controller="MainCtrl">
<h1>{{helloWorld}}</h1>
<input type="text" ng-model="helloWorld"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
function MainCtrl($scope){
$scope.helloWorld = "Hello World";
}
</script>
</body>
</html>编辑：解释一下什么是什么以及为什么(在我看来)这是一个展示AngularJS功能的最小Hello World应用程序
- 需要包含AngularJS库
- 自定义属性ng-app被添加到angular应用程序的kick中。此指令通知控制器自动引导添加了application
- The ng- datababinding
指令，其关联的AngularJS函数显示了通过将对象分配给注入的$scope模型来公开对象。双括号表达式{{ helloWorld }}显示了AngularJS用于输出模型值的约定。
- ng-
- 指令用于绑定helloWorld对象，并显示了AngularJS双向javascript的强大功能
Stack Overflow用户
发布于 2013-11-05 23:40:59
最简单的AngularJS“Hello World”- "The Good Way“
<!doctype html>
<html data-ng-app="myApp">
<head>
<!-- .... -->
</head>
<body>
<div data-ng-controller="MyController">
<input type="text" data-ng-model="name" />
<p>Hello {{name}}</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.name = "World";
}]);
</script>
</body>
</html>Stack Overflow用户
发布于 2014-12-01 07:45:39
在prettycode.org上找到：
<!doctype html>
<html ng-app>
<head>
<title> Hello World </title>
</head>
<body>
Your name: <input type="text" ng-model="name"></input>
<p ng-show="name">Hi, {{ name }}!</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19789493
复制相关文章
相似问题
腾讯云开发者
