欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Angular的新手教程

程序员文章站 2022-05-25 17:23:57
...
这次给大家带来Angular的新手教程,Angular新手教程的注意事项有哪些,下面就是实战案例,一起来看一下。

什么是UI

对于一个用户界面,它实际上包括三个主要部分:

内容:你想展现哪些信息?包括动态信息和静态信息。注意,这里的内容不包括它的格式,比如生日,跟它显示为红色还是绿色无关,跟它显示为年月日无关

外观:这些信息要展示为什么样子?这包括格式和样式。样式还包括静态样式和动画效果等。

交互:用户点击了加入购物车按钮时会发生什么?还要更新哪些显示?
在前端技术中,这三个部分分别由三项技术负责:HTML负责描述内容,CSS负责描述外观,JavaScript负责实现交互。
如果进一步抽象,它们分别对应MVC的三个主要部分:内容 -- Model,外观 --- View,交互 -- Controller.
对应到angular中的概念,静态内容 --> 对应模板,动态内容 --> scope,交互对应 --controller,外观部分复杂点:CSS决定样子式,过滤器决定格式。

模块

angular.module(abc'') 引用模块abc
angular.module('abc',[]) 定义模块abc

作用域

凡是上级scope拥有的属性,都可以从下级scope读取,但是当需要对这些继承下来的属性进行写入的时候,问题就来了:写入会导致在下级scope上创建一个同名属性,而不会修改上级scope上的属性。

展示动态信息有两种:

绑定表达式 指令

指令相当于一个自定义的HTML元素,在angular官方称它为HTML语言的DSL扩展
按照指令的使用场景和作用可以分为两种类型的指令:组件型和装饰型。

组件型相当于把一个页面按功能点拆分成多个模块。

装饰型指令是为DOM添加行为,使其具有某种能力,如自动聚焦、双向绑定、可点击(ngClick)、条件显示、隐藏(ngShow,ngHide)等能力。同时它也是链接Model和View之间的桥梁,保持view和Model的同步。在angular中的大部分的指令属于装饰型指令,它们负责收集和创建$watch,然后利用angular脏检查机制保持view的同步。

组件型指令

angular.module('com.ngnice.app').directive('jobCategory',function(){    return {
        restrict:'EA',
        scope:{
            configure:'='//独立作用域
        },
        templateUrl:'a.html',        //声明指令的控制器
        controller:function($scope){
            
        }
    }
});

restrict属性用来表示这个指令的应用方式,它的取值可以是E(元素)、A(属性)、C(类名)、M(注释)这几个字母的任意组合,工程实践中常用的是E、A、EA这三个,对于C、M不建议使用。

scope有三个取值:不指定(undefined)/false/true或一个哈希对象。
不指定或者为false时,表示这个指令不需要一个新的作用域。它直接访问现有的作用域上的属性和方法,也可以不访问作用域。同一节点上有新作用域或独立作用域指令,则直接用它,否则直接使用父级作用域。
为true时,表示它需要一个新作用域。
为哈希对象时,表示它需要一个独立作用域。

{    name:'@',//绑定字面量
    details:'=',//绑定变量
    onUpdate:'&'//绑定事件
}

使用方法如下:

<user-details name='test' details='details' on-update='updateIt(times)'></user-details>

对于组件型指令,更重要的是内容信息的展示,所以一般不涉及到指令的link函数,而是应该尽可能的将业务逻辑放置在controller中。

angular
    .module('com.ngnice.app')
    .directive('twTitle',function(){        return {            //作用域
            restrict:'A',            link:function(scope,element,attrs){
                
            }
        }
    });

装饰器型指令主要用于添加行为和保持View和Model的同步,所以它不同于组件型指令,我们经常需要进行DOM操作。其restrict属性通常是A,也就是属性声明方式,这比较符合装饰器的语义:它并不是一个内容的主体,而是附加行为能力的连接器。

理解 MVVM

$scope可以看作ViewModel,而controller则是装饰、加工处理这个ViewModel的JavaScript函数。

Angular的新手教程

在angular中MVVM模式主要分为四部分:

View 它专注于界面的显示和渲染,在angular中则是包含一堆声明式directive的视图模板

ViewModel:它是View和Model的粘合体,负责View和Model的交互与协作,它负责给View提供显示的数据,以及供View操作Model的途径。在angular中$scope充当了这个ViewModel的角色,ViewModel上有两种不同来源的数据:一种是展示信息的业务数据,另一种是描述交互的派生数据,如:表格中的复选框,如果点击全选则会选中所有有列表中的复选框,在这里就需要一个类似isSelectAll的派生数据放置在ViewModelh .

Model:它是与业务逻辑相关的数据封装载体,也就是领域对象。Model并不关心自己会被如何显示或操作,也就不应该包含任何与界面显示有关的逻辑。在web页面中,大部分Model都是来自ajax的服务端返回数据或者全局配置对象。angular中的service正是封装和处理这些与Model相关的业务逻辑的最佳方式,这些领域对象可以被controller或其他service复用。

controller 这并不是MVVM模式中的核心元素,但它负责ViewModel对象的初始化。它将调用一个或者多个service来获取领域对象,并把结果放在ViewModel对象的初始化。它将调用一个或多个service来获取领域对象,并把结果放在ViewModel对象上。这样,应用界面在启动加载时候,就可以达到一种最初的可用状态。它可以在ViewModel上加入用于描述交互的行为函数,如用于响应ng-click事件的addItemToShopCart()

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

Node.js的新手教程(二)

Node.js的新手教程(一)

以上就是Angular的新手教程的详细内容,更多请关注其它相关文章!