从头开始学习angular.js----001(尽量每天一篇)

angularjs实现helloworld(双向绑定)


1.首先介绍一下angular是个什么东西(题主也刚看的)
angularjs是一个很不错的前端框架,喜欢前端的朋友可以跟我一起做
angular通过指令 扩展了HTML,然后通过表达式绑定数据到HTML

2.首先在头部标签引入angular(我是在线引用,你可以下载到你的本地,然后在引用你本地的angular就可以了)

<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">script>
head>

3.下面就是开始使用angular了,解释一下里面的ng-app、ng-model、{{}}等,首先根据官方文档显示ng-app表示的意思是定义这个div为angular应用的了,属于这个应用的所有者,ng-model更好理解,就是把输入框的值绑定到name上,{{}}叫做表达式,后期会讲解

<body>
    <div ng-app="">
        <p><input type="text" ng-model="name">p>
        <h1>{{name}}h1>
    div>
body>

4.实现的效果如下:不停地变换input中的内容,下面输出也会相应的改变,说明实现了他俩的双向绑定
从头开始学习angular.js----001(尽量每天一篇)_第1张图片

5.最后,希望大家一点点敲代码,不要以为会,会也要敲,今天的内容比较简单,就是入门(后续会加快,跟不上的盆友可以留言,我看情况减慢速度)

你可能感兴趣的:(前端)