使用JavaScript的AngularJS库编写hello world的方法

网络编程 2024/11/14 佚名

3 2 1

本文展示了AngularJS框架实现的hello world代码示例.

如下是一些你在看Hello World 示例和接下来的代码示例时需要重点关注的方面.

ng-app, ng-controller, ng-model 指令
带有两个大括弧的模板

步骤 1: 在<Head>部分包含Angular Javascript

将下面的代码包含入 <head></head> 中，以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库获得最新的代码.

<script
src="/UploadFiles/2021-04-02/angular.min.js">

步骤 2: 将 ng-app 指令应用到 <Html> 元素
如下将ng-app指令应用到 <html> 元素. 可以选择给app指定名称. 它可以被简单的写作<html ng-app>. 这一指令被用来标记Angular会识别作为我们应用程序的根元素的html元素. 这给了应用程序开发者告诉Angular整个html页面或者只是其中一部分应该作为Angular应用程序来对待的自由.

 




<html ng-app="helloApp">



步骤 3: 将 ng-controller 指令应用到 <Body> 元素
将 ng-controller 指令应用到 <Body> 元素.  controller 指令可以被应用在任何元素上，比如div。在下面的代码中，, “HelloCtrl” 是控制器的名称，可以被放在<head>元素处<script></script>中的控制器代码引用.

 




<body ng-controller="HelloCtrl">



步骤 4: 将ng-model指令应用到输入元素
可以使用ng-model指令将输入同模型绑定在一起.

 




<input type="text" name="name" ng-model="name"/>



步骤 5: 编写模板代码
下面是展示名称为“name”的模型的模型值的模板代码. 注意名称为“name”的模型被绑定到了步骤四中的输入上.

 




Hello {{name}}! How are you doing today"htmlcode">

<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>



完整的代码请看这里。

AngularJS

标签：

AngularJS

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“使用JavaScript的AngularJS库编写hello world的方法”

使用JavaScript的AngularJS库编写hello world的方法

暂无“使用JavaScript的AngularJS库编写hello world的方法”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

使用JavaScript的AngularJS库编写hello world的方法

AngularJS

使用Raygun来自动追踪AngularJS中的异常

浅谈setTimeout 与 setInterval

评论“使用JavaScript的AngularJS库编写hello world的方法”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接