创建你的第一个AngularJS应用的方法

         这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下

 
 

         按以下步骤来创建AngularJS应用
第1步:加载框架

        作为一个纯粹的JavaScript框架,它可以使用<script>标签来添加。

?

1
2

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

第2步:使用ng-app指令定义AngularJS应用

?

1
2
3

<div ng-app="">
...
</div>

第3步:用 ng-model指令定义的模式名称

?

1

<p>Enter your Name: <input type="text" ng-model="name"></p>

第4步:用ng-bind指令将上述模型中的值绑定定义

?

1

<p>Hello <span ng-bind="name"></span>!</p>

按以下步骤来运行AngularJS应用

使用上面提到的三个步骤在HTML页中。
testAngularJS.html

?

1
2
3
4
5
6
7
8
9
10
11

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>我的名字: <input type="text" ng-model="name"></p>
<p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。请输入姓名并看到的结果。

      如何让AngularJS与HTML集成

  • ng-app指令指示AngularJS应用的开始。
  • ng-model指令创建一个名为“name”的模型变量在HTML页面中,并有ng-app指令在div内使用。
  • ng-bind使用模型名称只要在文本框中用户输入的东西显示在HTML span标签。
  • 结束</ div>标记表示AngularJS应用程序的结束。 
时间: 2024-11-03 21:09:15

创建你的第一个AngularJS应用的方法的相关文章

《AngularJS高级程序设计》——第2章 你的第一个AngularJS应用 2.1 准备项目

第2章 你的第一个AngularJS应用 开始使用AngularJS的最好方式就是潜心钻研进去,创建一个Web应用程序.在本章中,我将带你学习一个简单的开发过程,从一个目标应用程序的静态模型开始,使用AngularJS的特性打造出一个动态的Web应用程序,尽管只是一个简单的程序.在第6-8章,我将向你演示如何创建一个更复杂而实际的AngularJS应用程序,但是现在一个简单的例子将足以用于演示一个AngularJS应用的主要组件,并为本书这部分的其他章节做好准备. 2.1 准备项目 在本章中,我

前端-一个AngularJS和ui-bootstrap的问题...

问题描述 一个AngularJS和ui-bootstrap的问题... 这是 http://angular-ui.github.io/bootstrap/ 页面中的一个示例程序,可是运行不了..看了半天也是不知道哪里出了问题.错出在哪里了?代码如下 <!DOCTYPE html><html ng-app=""myApp"" lang=""en""><head> <meta charse

《C语言编程初学者指南》一1.7 创建并运行第一个C程序

1.7 创建并运行第一个C程序 gcc编译器是一个ANSI标准编译器.一个C程序要经过很多的步骤,才能变为一个可运行或执行的程序.gcc编译器为你执行了很多的任务,其中最重要的任务包括以下几个: 预处理程序代码,并查找各种指令: 在适当的时候,生成错误代码和消息: 将程序代码编译成目标代码,并将其临时存储在硬盘上: 将任何必需的库链接到目标代码,创建一个可执行文件,并将其存储到硬盘上. 提示 ANSI是American National Standards Institute(美国国家标准研究院

textview-一个Activity创建数据库,另一个Activity中调用数据库并用TextView显示

问题描述 一个Activity创建数据库,另一个Activity中调用数据库并用TextView显示 第一个Activity(创建数据库): Db db = new Db(this); SQLiteDatabase dbWrite = db.getReadableDatabase(); ContentValues cv = new ContentValues(); cv.put("name", "小张"); cv.put("sex", "

c++-我想创建可以在任何一个OnClick事件中调用的函数,怎么写?

问题描述 我想创建可以在任何一个OnClick事件中调用的函数,怎么写? 现在有一个单文档MFC程序,我想创建一个全局的函数或者类,可以在任何一个OnClick事件中调用,请问应该怎么写? 我是这样做的,定义了一个类A,然后A中的函数比如void b()是public的,在其他onclick事件中创建一个A的对象a,a.b();编译没问题,可是一连接就报错,为什么?我应该怎么写? 解决方案 如果单纯的想将OnClick中的功能分离成一个函数的话,你可以在OnClick这个函数所在的类比如说,CE

把 Nginx 创建为 Windows 的一个服务

把 Nginx 创建为 Windows 的一个服务(一个较好的做法) 多亏了一个叫做 "Windows Service Wrapper" 的小项目,我们有了一个办法来恰当地启动和停止 Nginx. 首先从http://download.java.net/maven/2/com/sun/winsw/winsw/ 下载最新的 exe 程序(Misterdai 写本文时最新的是 "winsw-1.9-bin.exe"). 或者:http://download.java.n

【AngularJS】—— 3 我的第一个AngularJS小程序

首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由于这个框架是Google的工作人员开发的,因此国内访问的时候,会被墙导致无法下载资源文件. 因此,可以使用百度开源的静态链接: http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js 代替原来的国外的资源文件链接:http://code.angularjs.org/angular-1.0.1.min.js 解决了资源文件的下载问题,就可以手动编写小

使用Chrome浏览器调试AngularJS应用的方法

  这篇文章主要介绍了使用Chrome浏览器调试AngularJS应用的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下 当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难.下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用: 1: 访

9种改善AngularJS性能的方法

AngularJS 是目前使用非常广泛的 web app 应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0 诞生了.尽管已经做了很多优化,但几乎每个 Angular 专家仍然在处理使用 AngularJS 中出现的各种各样的问题. 目前,企业使用Web技术用在他们各自项目上,在线业务因此受到了极大影响.因此,有必要深入挖掘影响企业成长的各种因素. 但是,有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名,因此 AngularJS 性能优化成为