Angular的新手教程

这次给大家带来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中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的新手教程的详细内容，更多请关注其它相关文章！