前端开发

 首页 > 前端开发 > AngularJS > 使用JavaScript的AngularJS库编写hello world的方法_Ang

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

分享到:
【字体:
导读:
          这篇文章主要介绍了使用JavaScript的AngularJS库编写hello world的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下...

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

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

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

步骤 1: 在部分包含Angular Javascript

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


步骤 2: 将 ng-app 指令应用到 元素

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


步骤 3: 将 ng-controller 指令应用到 元素

将 ng-controller 指令应用到 元素.  controller 指令可以被应用在任何元素上,比如div。在下面的代码中,, “HelloCtrl” 是控制器的名称,可以被放在元素处中的控制器代码引用.
 


步骤 4: 将ng-model指令应用到输入元素

可以使用ng-model指令将输入同模型绑定在一起.
 


步骤 5: 编写模板代码

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

Hello {{name}}! How are you doing today?

 
步骤 6: 在

完整的代码请看。

分享到:
使用Raygun来自动追踪AngularJS中的异常_...
Angular.js取得的巨大成就之一是实用的异常抛出,因为异常信息经常能够准确的表明你的代码为什么崩溃了。运行于世界各地的众多浏览器的大型客户端web应用会面临异常丢失的问题,而捕获它就有可能修复 bug并赢得用户。 当处理跨浏览器和设备的问题时,接收这些异常信息是很重要的,因为你的应用可能在你的开发机器上运行得...
简介可以自动完成UI的AngularJS工具angul...
我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的上。这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方。它很有意思,也是用AngularJS构建的! 我们希望Smarty能够:     通过用户的给定输入 (一个前缀),通过一个HTTP请求后自动提供建议     显示一个建...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……