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

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

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

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

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

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

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

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

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

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

按以下步骤来运行AngularJS应用

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

<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应用程序的结束。
赞 (0)

相关推荐

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • 分享使用AngularJS创建应用的5个框架

    分享使用AngularJS创建应用的5个框架

    如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS.这些框架都有事先安装的Web组件,使用它们可以帮助你快速进行项目开发.这里列举5个这样的框架,帮助你使用AngularJS构建Web应用. 1. AngularUI Bootstrap 这一框架是基于目前非常流行的前端框架Bootstrap的,它包含了一系列的Bootstrap组件,比如Carousel.Alert.Collapse.Rating

  • AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="

  • AngularJs入门教程之环境搭建+创建应用示例

    AngularJs入门教程之环境搭建+创建应用示例

    本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用

  • 使用AngularJS创建单页应用的编程指引

    概述 单页应用现在越来越受欢迎.模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉.Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,关于和联系我们页面.虽然Angular是为创建比这更复杂的应用而生的,但是本教程展示了许多我们在大型项目中需要的概念. 目标 单页应用 无刷新式页面变化 每个页面包含不同数据 虽然使用Javascript和Ajax可以实现上述功能,但是在我们的应用中,Angular可以使我们处理更容易. 文档结构 - scri

  • Angularjs---项目搭建图文教程

    Angularjs---项目搭建图文教程

    开发工具采用WebStorm,没破解,使用了过期策略:安装之后不着急打开程序,先设置系统日期为未来的某个日期,比如2020年.然后再打开程序,试用.然后再改回来系统日期.虽然每次打开WebStorm都会提示: 不过不影响使用,点击"OK"继续吧. 项目采用anguarjs seed项目作为基础框架,搭建完成之后如下: .bowerrc的配置如下: { "directory": "app/lib"} 3. app中的各view拆分成不同的目录存放,

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

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

     按以下步骤来创建AngularJS应用 第1步:加载框架 作为一个纯粹的JavaScript框架,它可以使用<script>标签来添加. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> 第2步:使用ng-app指令定义AngularJS应用 <div ng-app=""> ...

  • angularJS 中$attrs方法使用指南

    这里给大家分享的是一个angularJS 中$attrs方法的使用示例: 复制代码 代码如下: <!doctype html> <html>     <head>         <meta charset="utf-8">         <title>             无标题文档         </title>         <script src="http://localhost

  • 利用VS Code开发你的第一个AngularJS 2应用程序

    利用VS Code开发你的第一个AngularJS 2应用程序

    前言 之前已经给大家介绍了Angular2开发环境搭建教程之VS Code,本文将详细介绍利用VS Code如何开发AngularJS2应用程序的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 运行环境: 1.Windows 10 2.Node 6.7.0 3.npm 3.10.8 4.TypeScript 2.0.3 创建项目 1.创建文件夹:angular2-quickstart,启动VS Code,打开刚创建的文件夹:angular2-quickstart. 2

  • 使用命令行工具npm新创建一个vue项目的方法

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程. 只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project $ vue init webpack test //输入命令 ? Project

  • Angularjs 根据一个select的值去设置另一个select的值方法

    html: <div ng-controller="mySelectController"> <select ng-model="myField" ng-options="Field.label for Field in names" ng-change="mySelectControllerChange()"> <option value=''>{{'SELECT.LABEL.VXI.CU

  • Node.js创建一个Express服务的方法详解

    Node.js创建一个Express服务的方法详解

    本文实例讲述了Node.js创建一个Express服务的方法.分享给大家供大家参考,具体如下: 1.创建一个HttpServer服务端 在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件.首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数.在回调函数内对请求req进行处理,并返回res结果. 利用url的parse方法将req请

  • 如何创建自己的第一个React 页面

    目录 Rract是啥? 背景 React脚手架 JSX是什么 Rract是啥? React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface,对咱们前端来说,简单理解为:HTML 页面 javscrtipt库.不是框架,是库, react 全家桶才是框架 react 全家桶: react: 核心库react-dom: dom操作react-router:路由,redux:集中状态管理 背景 Rract最牛逼!全球使用最多 特点 声明式 用类似于html

  • 9种改善AngularJS性能的方法

    9种改善AngularJS性能的方法

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

  • AngularJS中run方法的巧妙运用

    前言 AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.网上关于AngularJS中run方法的介绍也比较少,本文就主要总结了关于AngularJS中run方法的巧妙运用,感兴趣的朋友们可以一起来学习学习. 一.浏览器判断 在angular做微信应用的时候,有时候我们也想把相同一份代码运行在非微信的浏览器上,这时候我们可以在angular的run上写点东西实现~ 例如asw.run函数里执行定义一个$rootScope.i

  • AngularJS封装指令方法详解

    本文实例讲述了AngularJS封装指令方法.分享给大家供大家参考,具体如下: 引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足: 1.类库:类库是一类函数的集合,它能帮助你写web应用.这里起主导作用是你的代码,由你来决定何时使用类库.典型的类库,例如prototype.jQuery等. 2.框架:框架式一种特殊的.已经实现的web应用,你只需

随机推荐