angularJS怎样用呢

angularJS目前是前端超级火的框架,通过ng-指令,可以用来开发webAPP,它的特点就是有很多指令,今天咪咪我就来给大家讲讲怎样使用angularJS。注意,学习angularJS必须要会html,css和JS哦。

操作方法

  • 01

    第一步,新建一个html页面,然后引入angularJS插件,注意路径一定要对哦。不会路径的,请学好JS再来学习angularJS哦。

  • 02

    之后我们定义一个div元素,然后给这个div元素添加指令ng-app,引号里面可以没有内容(学习而已,不需要太严格)。ng-app就是定义angularJS的范围,在div里面定义说明div里面是angularJS的范围,外面不是。

  • 03

    接着定义一个表单元素input,然后用ng-model绑定一个变量,变量名随便,这样,我们往表单里面输入的内容就会绑定到ng-model里面的变量name了。需要特别注意的是,ng-model只对表单元素有效哦。

  • 04

    之后,我们另设一个p元素,然后用两个花括号加变量名来显示数据,这是一个表达式。

  • 05

    接着我们打开浏览器,然后在input输入框里面输入数据。

  • 06

    如图,我们在输入框里面输入什么数据,下面就会解析成同样的数据,这就是数据双向绑定,只要一个变,另外一个也会变的。

  • 07

    花括号加变量名所代表的表达式,比如这个{{name}},只有在ng-app范围内才会被解析。比如我在div外面设置了一个p,并且p 里面有表达式。

  • 08

    然后在浏览器里面观察,可以看到,表达式被原样输出了,没有被解析成功。这是因为第二个表达式不在div里面,也就是说不属于angularJS的范围。

  • 09

    而我们再把ng-app放置到body标签上面,其他不变,然后保存。

  • 10

    这时候,就可以看到,所有的表达式都可以被解析成对应的数据了哦。这就说明,了解angularJS范围是非常重要的哦。

(0)

相关推荐

  • 5个前端工程师必备的最佳开发工具

    原文作者 Arnaud Breton 为前端工程师,特别专注于前端和使用者经验,这篇文章出自于mention blog。以下内容由作者以第一人称撰写。 过去几年一直不断地提到 Web 应用新世代的成长 ...

  • 十八款各有千秋的精选设计开发工具

    相比于在每月设计圈干货 里面漫无目的的"碰",不如试试 CodeGeekz 推荐的精选工具合集.这些精选的工具同样不拘泥于受众,不论你是设计师还是开发者,同样可以从中发掘出不少正好 ...

  • Angular.JS中指令的命名规则

    命名规范 同一个AngularJS指令,在js文件和html文件中有着不同的命名规范:在js文件中使用标准的小驼峰命名法,在html文件中使用"小写字母+连接符"的命名法.如下表所 ...

  • Windows下Visual Studio Code 快捷键大全

    Visual Studio Code 是一款优秀的编辑器,非常适合编写 TS 以及 React .最近在学习 AngularJs 2,开始使用 VSCode,特意整理翻译了一下官网的快捷键.因为已经习 ...

  • 值得网页设计师和前端收藏的实用工具列表

    无论你是丰富的前端,还是刚刚起步的设计师,这些为真正的网页设计师和开发者所准备的实用工具.在线服务.资源和代码片段,都是为你而生的,合理的运用能够让你的网页设计与开发事半功倍. 这次总结的工具总计有4 ...

  • 如何安装最新版64位WebStorm并新建Web项目

    WebStorm是一款JavaScript开发高级工具,可以用来创建HTML5.AngularJS.NodeJS.React等项目.下面详细介绍WebStorm安装过程和新建Web项目,操作如下: 操 ...

  • 菜鸟怎么自学web前端编程

    web前端学习路线是怎么样的?让过来人我来告诉你 操作方法 01 首先呢,得学习一下html,主要是学习一下html标签的使用方法.推荐一个学习平台,W3C 菜鸟教程.这个教程简单易用,适用于初学入门 ...

  • 微信小程序开发入门

    微信小程序在2016年9月21日邀请内测,这里是开发的一些入门知识. 操作方法 01 当你准备开发一个微信小程序的时候,你首先需要一个小程序的 APPId ,在微信公众号官网可以获得.(暂时只有官方邀 ...

  • 前端开发要学什么?

    了解答案之前,首先我们要分清前端这部分的分工,一般来讲分为:设计和开发.工作过的人都很清楚,设计是设计师的工作,设计师按照用户需求的功能设计出图片,他们使用的工具一般是fireworks和photos ...