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.过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

栗子：

结果