Angular基本属性&&功能

---

更多内容 ! 请移步本人博客 ! 点击跳转

---

什么是AngularJs

• AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。

• AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。

AngularJS特性核心

• 模块化
• 双向数据绑定
• 语义化标签
• 依赖注入等

Angular下载方式

• 官网下载 直接点击跳转
• 通过npm下载
  命令为:npm install angular
• 通过bower下载
  命令为:bower install angular

MVVM模式

图解

**MVVM模式**

MVC

• MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成.

• 用一种业务逻辑,数据,界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面.在改进和个性化定制界面及用户交互的同时不需要重新编写业务逻辑.

• 采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。

• M模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。

• V视图（View）一般用来展示数据，比如通过HTML展示。

• C控制器（Controller）一般用做连接模型和视图的桥梁。

• MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV等。*

图解

**MVC**

Angular基本步骤

• 如果你发现自己写的代码没有任何反应那就说明,你可能是没有绑定模块和控制器

• 示例代码:

    // 1.导入文件 




    
    
    
{{msg}}

内置指令

• HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

示例代码:

< ! ---------- HTML ----------- >

// 一般模块和控制器都绑定给body,实际开发中根据需求来


    
    
    // 标签依然存在在页面 只是隐藏 相当于给它设置了display为none
    // 1.第一种写法
    
isShow 控制标签是否显示
    // 2.第二种写法
    
isShow 控制标签是否显示
    
    
    
    
    
isShow 控制标签是否显示
   
    
    
    
    
ng-if 控制标签是否存在
    
    
    
    ![]({{path}})
    ![]({{path}})
    
    
    
{{name}}
    
{{name}}

< ! --------- Style --------------- >

< ! --------- JavaScript ------- >

ng-include

• ng-include:开发中我们需要把一个模块单独写到一个页面当中,以便复用

• 原生HTMl是没法办到的,一般需要通过服务器来完成这个功能

• 本质是发送了一个Ajax请求 把请求的结果放到对应的标签里面

• 示例代码:

// 同级目录下需要创建head\body\footer的html文件引入才行

图解 ---> 你会发现在页面上多了三个复用模块

**ng-include**

表单指令

• 示例代码:

< ! ---------- HTML ----------- >

< ! --------- JavaScript ------- >

ng-switch指令

• 示例代码:

    
    

        
        
{{value}}
    

数据单向绑定

• 单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。

        
        
{{name}}{{age}}

        
        <


        
        

数据双向绑定

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

• 想要将视图的数据绑定到模型当中 必须借助表单标签

登录

事件处理

点我


双击


进入