angular框架

阅读量：5166 次

发布时间：2019-06-13

本文共 3947 字，大约阅读时间需要 13 分钟。

什么是angular:

是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScrip框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

Angular 基本介绍

Angular主要分为八大构造块：模块、组件、模板、元数据、数据绑定、指令、依赖注入。

【模板】

模板是在页面中要显示的内容，也就是html文件，以Html的形式告诉Angular如何渲染组件。

【组件】

一个组件控制着屏幕上的一块我们称为视图的区域，也是自定义的一段html代码，我们给他起个名字，就可以当做html的标签使用了。

【服务】

封装业务逻辑。

【模块】

将一系列的组件、指令和服务整合到一起，提供一个完整的功能。

【指令】

指令是包含指令元素的一个类，允许你向html元素中添加自定义行为，根据指令动态渲染页面。

【元数据】

元数据告诉我们如何处理一个类

【依赖注入（DI）】

Angular使用依赖注入来提供新组件以及组件所需的服务。

AngularJS 表达式

AngularJS 表达式写在双大括号内：{

{ expression }}。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

例子：


      
     
      我的第一个表达式: {
   { 5 + 5 }}

效果显示：

Angular指令（有很多可以参考手册）

1.ng-app指令

1.让你浏览器正常的去解析文档，不会去管以ng-开头的东西

2.当碰到ng-app这个属性的时候，后面所有的文档都将由angular来完成

angular中的指令都是由ng-开头,一个页面只能有一个ng-app

2. ng-init 指令

1.ng-init 指令为 AngularJS 应用程序定义了 初始值。

2. 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

3.创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

实例：

    
         自定义指令

Angular控制器和模块

创建模块：你可以通过 AngularJS 的 angular.module 函数来创建模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

添加控制器：你可以使用 ng-controller 指令来添加应用的控制器:

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

指令与模块控制器总实例：

    
         Document    
             
                  
       {
   {name}}今年{
   {age}}岁了
         
                    
        第{
   {key+1}}天，学习{
   {value}}
         
       
         
       
                                                         姓名                            年龄                            性别                            电话                       
                                                 { {key2.name}}                            { {key2.age}}                            { {key2.sex}}                            { {key2.phone}}

姓名	年龄	性别	电话
{ {key2.name}}	{ {key2.age}}	{ {key2.sex}}	{ {key2.phone}}

AngularJS 事件

AngularJS 有自己的 HTML 事件指令：

AngularJS 支持以下事件:

- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change

案例：

    
         事件          
              
              
                
      {
   {count}}
          
              
                
      {
   {count1}}
                
              
      鼠标移入/移开        
      {
   {count2}}
       
      {
   {count3}}
        
      
      
          
              姓名：
        年龄：
        全：{
    {name+""+age}}

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

1. currency (货币处理)默认是美元符号，你可以自己传入所需的符号，例如人民币：￥

2. date (日期格式化)

3.filter (匹配子串)

{

{ childrenArray | filter : 'a' }} //匹配属性值中含有a的

{

{ childrenArray | filter : 4 }} //匹配属性值中含有4的

{

{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的

{

{childrenArray | filter : func }} //参数是函数，指定返回age>4的

4. json(格式化json对象)

5. limitTo(限制数组长度或字符串长度)

6. lowercase(小写)

7.uppercase(大写)

8. number(格式化数字)

9. orderBy(排序)

{

{ childrenArray | orderBy : 'age' }} 按age属性值进行排序，若是-age，则倒序

{

{ childrenArray | orderBy : orderFunc }} 按照函数的返回值进行排序

{

{ childrenArray | orderBy : ['age','name'] }} 如果age相同，按照name进行排序

案例：

    
         过滤器    
            
      {
   {num|currency:'￥'}}
 
             
      {
   {nowdate | date : 'yyyy/MM/dd hh:mm:ss EEEE'}}
                {
    {arr | filter  : {age : '8'} }}  
      
                {
    {arr | json}}
      
   
                    
      {
   { sum | limitTo : 5 }}
                   {
    { sum1 | lowercase  }}
      
                   {
    { sum1 | uppercase }}
      
             {
    { sum2 | number : 2 }}