Angular的新手教程

    这次给大家带来Angular的新手教程，Angular新手教程的注意事项有哪些，下面就是实战案例，一起来看一下。什么是UI对于一个用户界面，它实际上包括三个主要部分：内容：你想展现哪些信息？包括动态信息和静态信息。
  注意，这里的内容不包括它的格式，比如生日，跟它显示为红色还是绿色无关，跟它显示为年月日无关外观：这些信息要展示为什么样子？这包括格式和样式。  样式还包括静态样式和动画效果等。
  交互：用户点击了加入购物车按钮时会发生什么？还要更新哪些显示？在前端技术中，这三个部分分别由三项技术负责：HTML负责描述内容，CSS负责描述外观，JavaScript负责实现交互。如果进一步抽象，它们分别对应MVC的三个主要部分：内容 -- Model,外观 --- View,交互 -- Controller。
    对应到angular中的概念，静态内容 --> 对应模板，动态内容 --> scope,交互对应 --controller，外观部分复杂点：CSS决定样子式，过滤器决定格式。
  模块angular。module(abc'') 引用模块abcangular。  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()。