Angularjs Hello World示例
时间：2020-02-23 14:29:35 来源:igfitidea点击:
AngularJS是一个主要由Google维护的开源Web应用程序框架。
它旨在通过为客户端模型 - 视图 - 控制器(MVC)和Model-View-ViewModel(MVVM)架构提供框架来简化这些应用的开发和测试，可以使用单个Web解决主要问题页面应用程序。
我们需要编写非常少的代码来实现复杂功能。
在本教程中，我们将看到如何创建Angular JS示例。
我们需要在页面中包含Angular .js。
这可以通过两种方式完成。
- 转到https://angularjs.org/，然后单击下载Angular JS 1并复制CDN链接
- 我们可以从上面的链接直接下载它.js文件到文件夹。
例子
复制以下文本，打开记事本，粘贴并将其保存为Angularjsexample.html并在浏览器中打开它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-app>
10+40 ={{ 10 + 40 }}
</br>
1===2 ? : {{ 1==2 }}
</div>
</body>
</html>
解释：
- 我们在第6行中包含了Angular JS CDN的链接。
- 如果我们仔细观察，我们将使用div元素使用ng-app属性。它被称为角度指令(我们将了解这封信)。我们只需要知道它告诉角度的起点角度。所以在这个div元素中，我们将有角js相关代码。
- 我们可以在Java中了解NG-App作为Main()方法
- {{}}定义角表达式，因此将评估内部内部。我们可以看到{{10 + 40}}在这里变为50。
如果我们没有放置ng-app和使用角表达式怎么办：
- 它不会简单评估表达式。
让我们创建另一个没有NG-App的div，看看它是如何工作的角js没有ng-app
AngularJS没有评估第二个Div的表达，因为它不适合它。
让我们把ng-app放在body标签上
Angular JS NG-App在BIDY标记上，我们可以看到，Angular JS对两个DIV标记进行了评估的表达式。
更多例子：
让我们拿另一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-app>
Name: <input type="text" ng-model="helloWorld"
</br>
Hello {{ helloWorld}} !!!
</div>
</body>
</html>
解释 ：
在此示例中，我们使用了TextBox，因此无论我们在TextBox中写作，都会通过Hello反映。
- 我们使用与前一个例子相同的NG-App。
- 如果我们注意到，我们此次也使用了NG模型。它也是角度指令，它绑定了模型和视图状态，所以无论我们在文本框中写作，它都会反映在{{helloworld}}中。
