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。

AangularJS入门总结一的更多相关文章

  1. AangularJS入门总结三

    (参考的资料) 1. 数据绑定的原理: (1)  $watch 队列: 在DOM中每次绑定一些东西,就会往$watch队列中插入一条$watch: 每一个绑定到了DOM上的数据都会生成一个$watch ...

  2. AangularJS入门总结二

    双向数据绑定:在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model ...

  3. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  4. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  5. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  6. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

随机推荐

  1. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  2. 4.4基于switch语句的译码器

    Q:已知前缀码如右图所示,求0/1字符串“001011101001011001”相对应的译码. a b c 1 01 001 #include<iostream> #include< ...

  3. mq(1):简介

    1.mq的使用场景 以前的我,一直都没太搞明白,为什么我们那么需要消息队列,直到我看到了网友scienjus.的这个例子. 例子:假设用户在你的软件中注册,服务端收到用户的注册请求后,它会做这些操作: ...

  4. python全栈开发笔记-----------概要

    Python开发 开发: 开发语言: 高级语言:python.Java.php  .C#   .Go .ruby . C++ .... ===>字节码 低级语言:C.汇编            ...

  5. MariaDB的线程及连接

    转自 linux公社 今天在这里介绍一下确认mariaDB(和MySQL一样)的链接数及线程数的方法.MariaDB和MySQL有什么不一样,现在还没有弄清楚. 这是减少数据库的负载,并能提高数据库运 ...

  6. [转]如何远程连接运行OpenGL/Cuda 等GPU程序

    发现一篇神文,解决了困扰许久的远程桌面OpenGL/GPU 等问题... 原地址在这:http://www.tanglei.name/how-to-run-gpu-programs-using-rem ...

  7. docker 安全性问题

    最近项目组成员要在k8s中引入类似于docker --privileged 的功能.显示通过api查询在container和pod层面做了securityContext的设置. 但是没有起到效果.于是 ...

  8. HTML 表单中的验证

    凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...

  9. [AOP] 之让人一脸蒙哔的面向切面编程

    最近接触到了面向切面编程,看来很多的文档,算是有一点点了解了,趁自己还有点印象,先把它们给写出来 什么是AOP AOP(Aspect-Oriented Programming), 即 面向切面编程. ...

  10. python文件和文件流操作

    f = open(r'C:\Users\wangxue2\Desktop\somefile.txt', 'w') #r'C:\Users\wangxue2\Desktop\somefile.txt'中 ...