zoukankan      html  css  js  c++  java
  • AangularJS入门总结一

    CRUD(增加Create、查询Retrieve、更新Update、删除Delete)

    一、angularjs是为了克服HTML在构建应用上的不足而设计的;

    二、AngularJS的出众之处:

          构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。

          测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。
     
           AngularJS的最重要特性:
    1. 数据的双向绑定;
    2. 模板;在AngularJS中,一个模板就是一个HTML文件;HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,directive(指令)。所有的指令都负责针对view来设置数据绑定;
    3. MVC: AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel);

                Model

          model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特别的setter/getter方法来访问。

          事实上我们处理vanilla javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。

         ViewModel

          viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

          viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。

         Controller

          controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

         View

          view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。

          $scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。

      4.服务和依赖注入:

          AngularJS服务:作用就是对外提供某个特定的功能;

          AngularJS拥有内建的依赖注入(DI)子系统,DI允许你请求你的依赖,而不是自己找寻它们

      5.指令: 指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用

     
    三、并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用,90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,
          就得了解什么 不适合用AngularJS构建;
      最适于开发客户端的单页面应用;
          如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。
          像这种情况用一些更轻量、简单的技术如jQuery可能会更好;

    四、代码解释:

         <html ng-app

         ng-app :指令标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域;

           angular.js脚本运行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域;

         使用双大括号标记{{}}的内容是绑定的表达式;

    五、指令

          ng-model=" ";用于数据的双向绑定;

      ng-controller=" "; 个控制器的作用域对所有<body ng-controller=" ">标记内部的数据绑定有效;

      ng-repeat="array in Array"; 是一个AngularJS迭代器;

      ng-repeat="array in Array | filter:name"; 迭代器过滤; <input ng-model="name">这样用户输入一个搜索条件,立刻就能看到搜索结果;

      ng-bind-template=" "; 使用ng-bind或者ng-bind-template指令,它们在页面加载时对用户是不可见的;如下

      <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

    六、AngularJS应用程序的三个组成部分:模型-视图-控制器;

       模板:模板是用HTML和CSS编写的文件,展现应用的视图;

      应用程序逻辑和行为:应用程序逻辑和行为是用JavaScript定义的控制器;

      模型数据:模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,他们都属于AngularJS作用域对象。

      AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中;

    七、AngularJS提供的服务特性:

    1. 底层服务包括依赖注入,XHR、缓存、URL路由和浏览器抽象服务;
    2. 您还可以扩展和添加自己特定的应用服务。

    八、AngularJS应用引导过程有3个重要点:

    1. 注入器将用于创建此应用程序的依赖注入;
    2. 注入器将会创建根作用域作为我们应用模型的范围;
    3. AngularJS将会链接根作用域中的DOM,从用ngApp标记的HTML标签开始,逐步处理DOM中指令和绑定。

    九、对于AngularJS应用,鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点;

    十、AngularJS是MVC框架吗?还是MVVM框架?

         官网有提到AngularJS的设计采用了MVC的基本思想,而又不完全是MVC,因为在书写代码时我们确实是在用ng-controller这个

         指令(起码从名字上看,是MVC),但这个controller处理的业务基本上都是与view进行交互,这么看来又很接近MVVM。

  • 相关阅读:
    php Windows系统 wamp集成环境下redis的使用
    IO流文件拷贝
    IO流框架
    Map集合
    泛型
    Deque(队列)
    List接口
    Iterator接口(迭代器)
    Java中的异常详解
    Java中的正则表达式
  • 原文地址:https://www.cnblogs.com/liaolei1/p/6840672.html
Copyright © 2011-2022 走看看