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。

  • 相关阅读:
    【Language】 TIOBE Programming Community Index for February 2013
    【diary】good health, good code
    【web】a little bug of cnblog
    【Git】git bush 常用命令
    【web】Baidu zone ,let the world know you
    【diary】help others ,help yourself ,coding is happiness
    【Git】Chinese messy code in widows git log
    【windows】add some font into computer
    SqlServer启动参数配置
    关于sqlserver中xml数据的操作
  • 原文地址:https://www.cnblogs.com/liaolei1/p/6840672.html
Copyright © 2011-2022 走看看