工具/材料
电脑
webstorm
angularJS
操作方法
- 01
第一步，新建一个html页面，然后引入angularJS插件，注意路径一定要对哦。不会路径的，请学好JS再来学习angularJS哦。
- 02
之后我们定义一个div元素，然后给这个div元素添加指令ng-app，引号里面可以没有内容（学习而已，不需要太严格）。ng-app就是定义angularJS的范围，在div里面定义说明div里面是angularJS的范围，外面不是。
- 03
接着定义一个表单元素input，然后用ng-module绑定一个变量，变量名随便，这样，我们往表单里面输入的内容就会绑定到ng-module里面的变量name了。需要特别注意的是，ng-module只对表单元素有效哦。
- 04
之后，我们另设一个p元素，然后用两个花括号加变量名来显示数据，这是一个表达式。
- 05
接着我们打开浏览器，然后在input输入框里面输入数据。
- 06
如图，我们在输入框里面输入什么数据，下面就会解析成同样的数据，这就是数据双向绑定，只要一个变，另外一个也会变的。
- 07
花括号加变量名所代表的表达式，比如这个{{name}}，只有在ng-app范围内才会被解析。比如我在div外面设置了一个p，并且p 里面有表达式。
- 08
然后在浏览器里面观察，可以看到，表达式被原样输出了，没有被解析成功。这是因为第二个表达式不在div里面，也就是说不属于angularJS的范围。
- 09
而我们再把ng-app放置到body标签上面，其他不变，然后保存。
- 10
这时候，就可以看到，所有的表达式都可以被解析成对应的数据了哦。这就说明，了解angularJS范围是非常重要的哦。
- End
特别提示
指令是angularjs的一个特点，学习angularjs必须掌握这些基本的指令哦。后续我会分享更多关于angularJS的指南。
