angular.js随记

01. angular的创建步骤：

• 0.先导入angular.js框架
• 1.创建模块
• 2.创建控制器
• 3.绑定模块
• 4.绑定控制器
• 5.展示数据

module：模块

Controller：控制器

scope：范围

app:应用

示例：

0.先导入angular.js框架


1.创建模块。  创建完成后，返回的是一个对象。

var app = angular.module('app',[]);

2.创建控制器 xmgController就是创建的控制器 $scope就是模型

app.controller('xmgController',['$scope',function($scope){
                $scope.name = 'xmg';
}]);

3.绑定模块 
一个页面可以绑定多个模块，但是模块之间是不能嵌套的。
通常一个html里面只应对一个模块。 app.

//绑定模块

4.绑定控制器  一个模块可以绑定多个控制器
 
//绑定数据
       5.展示数据
      
{{name}}
 
 

      
{{name}}
 

02. 创建模块详解

course：课程，过程

students：学生

repeat：重复

图解

//它的做法，其他就是把样式display:none;
ng-show 控制标签是否显示

ng-hide 控制标签是否隐藏， 取值为bool （true/false/1/0）

ng-hide控制标签是否隐藏 取值为bool（true/false/1/0）

ng-if 控制标签是否存在 取值为boll（true/false/1/0）
ng-if控制标签是否存在，取值为bool（true/false/1/0）

使用ng-src加载图片
![]({{path}})

使用ng-src跳转


ng-class指令，控制是否添加某个类，如果是true为添加，为false是不添加

ng-class指令，控制是否添加某个类

给当前标签手动添加样式
ng-style 控制样式

04. ng-include：（包括，包含）

ng-include:包括 包含

在我们开发过程中有时候需要把一个模块单独写到一个页面当中
以便复用，使用原生html是没有办法达到这种要求，一般都是通过
服务器来完成此功能。
我可以使用angular当中的指令ng-include来完成。
ng-include 他的本质是发送了一个Ajax请求，把请求的结果
放入对应标签里边。

ng-include 他的本质是发送了一个Ajax请求，把请求的结果
放入对应的标签里边





head.html
body.html
foot.html
为三个不同的文件

05.表单指令

disabled：禁用

readonly：只读的

checkbox：复选框

checked：选中的

控制表单是否可用 值为bool（布尔）类型


控制表单为只读属性


设置复选框为选中状态

06.ng-switch指令

switch:开关，转换

when：当

course：课程，过程

repeat：重复

进行ng-switch指令为条件筛选指令。
格式为：
ng-switch="筛选对象"
ng-switch-when="筛选对象的值。如果筛选对象的值与该值相同
那么该值所在的标签就显示，否则就隐藏"

    


        对{{value}} 进行判断，when就是条件，满足条件就显示出来，否则就隐藏
        
        
{{value}}

    

07.数据单向绑定

• 数据单向绑定：把模型的数据展示到视图当中绑定方式有三种

  • 1.使用插值语法：{{模型属性}} 加载时，-->会造成闪烁， 可以使用ng-cloak来避免闪烁。

  • 2.使用ng-bind:ng-bind="模型属性" -->不会造成闪烁， 但只能绑定一个属性

  • 3.使用ng-bind-template="{{模型属性}}，{{模型属性}}"可以绑定多个值，且不会闪烁

cloak:斗篷（遮掩，避免）

bind：绑定

template：模板，样板

 



    使用{{}}可以把模型的数据绑定到视图当中,但加载时会造成闪烁。  
    
{{name}}{{age}}
    
{{name}}{{age}}

    数据绑定，不会造成闪烁，没有办法绑定多个属性
    


    可以绑定多个数据，不会造成闪烁
    

08.数据双向绑定

• 数据双向绑定：视图的数据可以绑定到模型当中，模型的数据可以绑定到视图当中。

• 想要实现视图的数据绑定到模型当中，必须得要借助表单才行。

• 在表单当中使用ng-model指令，在input标签当中绑定属性。

bind:绑定

userName：用户名

password：密码

login：登录

模型的数据绑定到视图当中，使用ng-bind指令


数据的双向绑定必须得要借助表单才行。
视图的数据绑定到模型当中，使用ng-model



监听按钮的点击，使用方法ng-click="事件名称（）"
登录

09.事件处理

可以使用angular来进行事件处理
使用方法为：ng-事件名称 = "事件响应方法名称（参数）"
参数可以自己指定，也可以传入事件对象$event
使用$scope来实现事件定义的方法
$scopr.事件名称 = function（参数）{ }

dblclick:双击，鼠标双击

mouseenter：鼠标移入

单击事件ng-click="click($event,'p')"
单击我

双击事件ng-dblclick="dblclick('db1')"
双击我

鼠标移入移出事件
鼠标移入

10.使用angular实现tab切换功能

type:类型

mouseenter：鼠标移入

content：内容

switch：开关，转换

when：当

• 给每一个li添加鼠标移入事件，移入时，把对应的type值传入。

• 给每个li添加ng-class指令，如果模型当中的type等于指定的值，就添加cur的类，否则不添加。

    
前端学院
    
ios学院
    
java学院
    
UI精品学院


使用ng-switch进行筛选
去判断type有值，与type相等就显示，不相等的就隐藏。



    

        ![](image/01.png)
    

    

        ![](image/02.png)
    

    

        ![](image/03.png)
    

    

        ![](image/04.png)
    

11.备忘录

• taskList:任务列表

• finishTaskList：完成/任务/列表

• preventDefault: 阻止/默认的

• taskItem:任务项

• task:任务

• push：推，增加

• splice：拼接

• check：检查

• delete：删除

• repeat：重复

• bind：绑定

• item：项

• content：内容

//    1.使用angular监听表单提交 ng-submit= "submit（）"到控制器模型当中实现submit方法

//    ng-model= "task"绑定任务



    ng-model="task"双向绑定数据

    

    


2.遍历已完成任务


    

    


        
       

        

        
        删除

        详情
    


3.遍历已完成任务 finishTaskList


    

    

    删除

    详情