AngularJS--菜鸟教程笔记
1.AngularJS是什么?
AngularJS是一个JavaScript框架。它可以通过<script>标签添加到HTML页面。
AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML。
AngularJS是一个JavaScript框架,是一个以JavaScript编写的库。
2.AngularJS需要抛弃什么?
个人理解,angularJS需要抛弃原有的js的dom操作的方法,它比dom操作更加的简便。
3.AngularJ添加属性属性的区别?
angularJS添加属性以ng- 开头,也可以在前面添加data-ng-开头,其他的也不能进行数据绑定操作。
4.AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
5.angular指令:
<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量: <input type="number" ng-model="quantity">价格: <input type="number" ng-model="price"> <p><b>总价:</b> {{ quantity * price }}</p> </div>
这是从菜鸟教程上面copy下面的,以上代码是可以正常运行的,但是我把ng-app属性加个属性值,例如 ng-app="mao",angularjs就不起作用了。在有属性值得情况下,需要在js里面定义这个应用模块。
<script> angular.module("app",[]); </script>
6.创建自定义的指令。
创建自定义指令可以通过.directive函数来添加自定义的指令。要调用自定义指令,HTML元素上需要添加自定义指令名。使用驼峰法来命名一个指令,runoobDirective,但是在使用它的时候要以-分割,runoob-directive
使用方式:
a、
<runoob-directive></runoob-directive>
<script>
var app=angular.module('myApp');
app.directive('runoobDirective',function(){
return{
template:"<h1>自定义指令</h1>"
}
})
</script>
b、通过限制你的指令,只能通过特定的方式进行调用
<script>
var app=angular.module('myApp');
app.directive('runoobDirective',function(){
restrict:"A"
return{
template:"<h1>自定义指令</h1>"
}
})
</script>
7.一个应用程序控制两个控制器
效果图如下:
8.过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
栗子:
结果