使用JavaScript的AngularJS库编写hello world的方法
(编辑：jimmy 日期: 2025/7/3 浏览：3 次 )
本文展示了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>完整的代码请看这里。
下一篇：浅谈setTimeout 与 setInterval
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。