AngularJs-前端框架笔记

第1章：AngularJs初识核心特性1.MVC核心概念：数据的管理（Model）、数据的展示（View）和业务逻辑控制（Controller)2.双向数据绑定（MVVM)Angular实现了双向数据绑定机制。所谓双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。3.模块化与依赖注入AngularJS模块是一种容器，把代码隔离并组织成简洁，整齐，可复用的块。可以通过定义其提供的对象构建模块。通过依赖注入将模块连接在一起，构建一个完整的应用程序。依赖注入：定义依赖对象并动态地把它注入另一个对象，使得所有的依赖对象所提供的功能都能使用。4.指令指令可以用来创建自定义的标签。他们可以用来装饰元素或者操作DOM属性。第2章：数据绑定01.ng-appng-app指令是告诉AngularJs应该管理页面中的哪一块，简单来讲就是指的AngularJs的作用域ng-app是定义在html标签的属性上面，属性的值可以为空AngularJs使用双大括号{{}}语法进行数据绑定02.ng-initng-init初始化当前作用域中的模型的值例如：div ng-init=m=1;desc='hehe'        h1{{desc}}/h1        h1{{m}}/h1    /div03.ng-modelng-model指令绑定了HTML表单元素到数据模型中。语法element ng-model=name/elementinput,select,textarea,元素支持该指令。第3章：模块和控制器01.模块的创建语法：angular.module(app,[])；参数说明1.name（字符串）name是模块的名称，字符串变量2.requires（字符串数组）requires包含链路一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载由注入器进行预加载。02.控制器myApp.controller(ctrl,[$scope,function($scope){//function里面的名称可以和服务名称不一致，但是通常是使用一致的console.log(a);        $scope.name=zhangsan;    }]);03.$scope$scope是一个服务，是数据交互的通道。第4章：常用指令101.ng-repeatng-repeat指令用于循环输出指定次数的HTML元素。集合必须是数组或对象。方式1：item in list方式2：（key,value) in list循环内容为实体里的字段 key为字段名，value为字段的值。02.ng-classng-class指令用于给HTML元素动态绑定一个或多个CSS类ng-class指令的值可以是字符串，对象，或者一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用key-value的方式，key为你想要添加的类名，value是一个布尔值。只有在value值为true时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。03.ng-clickng-click指令告诉了AngularJs HTML元素被点击后需要执行的操作。语法：element  ng-click=expression/element所有HTML元素都支持。第5章：常用指令201.ng-click补充ng-click指令的值除了可以填写表达式以外，还可以填写方法，该方法需要在控制器里面定义02.ng-repeat补充$index 循环的索引$first 第一项$last 昀后一项$middle 中间项$odd 奇数项$even 偶数项第6章：练习!DOCTYPE htmlhtml ng-app=apphead    meta charset=UTF-8    title/title    meta name=Author content=lily    meta name=Keywords content=    meta name=Description content=    link href=css/bootstrap.css rel=stylesheet    script src=js/angular.js/script    style type=text/css        .emphasize{            color: red;            font-weight: bold;        }        input{            border: 0;            background: transparent;        }    /style/headbody ng-controller=ctrl    div class=container        table class=table table-bordered            caption class=text-center工资/caption            thead                tr                    th序号/th                    th姓名/th                    th职务/th                    th时薪/th                    th工作时长/th                    th加班时长/th                    th加班时薪/th                    th总薪资/th                    th操作/th                /tr            /thead            tbody                tr ng-repeat=item in list                    td{{$index+1}}/td                    td{{item.name}}/td                    td ng-class={'emphasize':item.position=='经理'}{{item.position}}/td                    td￥{{item.hs}}/td                    td                        input type=number min=0 ng-model=item.t step=1/                    /td                    td ng-class={'danger':item.add==0}                        input type=number min=0 ng-model=item.add step=1/                    /td                    td￥{{item.adds}}/td                    td ng-class={'info':item.hs*item.t+item.add*item.adds5000}￥{{item.hs*item.t+item.add*item.adds}}/td                    td                        a href=# ng-click=deleteRow($index)删除/a                    /td                /tr            /tbody        /table    /div/bodyscript    var myApp = angular.module(app, []);    myApp.controller(ctrl, [$scope, function ($scope) {        $scope.list=[            {name:aa,position:经理,hs:100,t:20,add:10,adds:50,sum:0},            {name:bb,position:职员,hs:70,t:20,add:10,adds:50,sum:0},            {name:cc,position:职员,hs:80,t:20,add:10,adds:50,sum:0},            {name:dd,position:职员,hs:60,t:20,add:10,adds:50,sum:0},            {name:ee,position:职员,hs:50,t:20,add:10,adds:50,sum:0},            {name:ff,position:职员,hs:65,t:20,add:0,adds:50,sum:0},            {name:gg,position:助理,hs:55,t:20,add:0,adds:50,sum:0},            {name:hh,position:经理,hs:200,t:20,add:10,adds:50,sum:0},            {name:ii,position:经理,hs:300,t:20,add:10,adds:50,sum:0}        ]        $scope.deleteRow=function(index){            $scope.list.splice(index,1)        }    }])/script/html第7章：元素的显示和隐藏01.ng-show和ng-hideng-show指令在表达式为true时显示指定的HTML元素，否则隐藏指定的HTML元素。ng-hide功能类似，使用方式相反。指令在表达式为true时隐藏指定的HTML元素，否则显示指定的HTML元素。02.ng-ifng-if指令用于在表达式为false时移除HTML元素。如果if语句执行的结果为true，会添加移除元素，并显示。ng-if指令不同于ng-hide，ng-hide隐藏元素，ng-if是从DOM中 移除元素。03.ng-switchng-switch指令根据表达式显示或隐藏对应的部分。根据选中的值显示对应的部分：对应的子元素使用ng-switch-when指令，如果匹配选中选择显示，其他未匹配的则移除。你可以通过使用ng-switch-default指令设置默认选项，如果都没有匹配的情况，默认选项会显示。第8章：不同控制器的数据共享01.子父级的控制器1.子controller/$scope可以继承父controller的$scope对象2.子controller的$scope的同名字段会替换掉父容器的同名字段3.父级controller里面定义一个方法，操作父级的scope对象，在子级的controller里面调用该方法，实现了子父通讯。02.$rootScopescope是html和单个controller之间的桥梁，数据绑定就靠他了。rootScope是各个controller中的桥梁。用rootScope定义的值，可以在各个controller