当前位置:趣知科普网>游戏数码>IT技术>

angularJS怎样用呢

IT技术 阅读(1.03W)

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

操作方法

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

angularJS怎样用呢

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

angularJS怎样用呢 第2张

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

angularJS怎样用呢 第3张

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

angularJS怎样用呢 第4张

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

angularJS怎样用呢 第5张

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

angularJS怎样用呢 第6张

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

angularJS怎样用呢 第7张

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

angularJS怎样用呢 第8张

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

angularJS怎样用呢 第9张

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

angularJS怎样用呢 第10张

特别提示

指令是angularjs的一个特点,学习angularjs必须掌握这些基本的指令哦。后续我会分享更多关于angularJS的指南。