简介

  AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
  通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
  类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
  框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
  AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
  使用双大括号{{}}语法进行数据绑定;
  使用DOM控制结构来实现迭代或者隐藏DOM片段;
  支持表单和表单的验证;
  能将逻辑代码关联到相关的DOM元素上;
  能将HTML分组成可重用的组件。

端对端的解决方案

  AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分,而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很“固执”(原文为 opinionated,意指没有太多的其他方式)。但是,尽管它很“固执”,它仍然能确保它的“固执”只是在你构建应用的起点,并且你仍能灵活变动。AngularJS的一些出众之处如下:
  构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
  测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。
  具有目录布局和测试脚本的种子应用作为起点。

AngularJS的可爱之处

  AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
  如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

Hello World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:

  1. 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。
  2. 将下面的源代码复制到您的HTML文件。
  3. 在web浏览器中打开这个HTML文件。

源代码

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>

请在您的浏览器中运行以上代码查看效果。

谢谢观看(此文章仅作记录用途)

angularjs从零开始(一)的更多相关文章

  1. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  2. AngularJS 从零开始学习(一)

    什么是AngularJS? AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架.当模型改变时,页面也能自动随之更新,反之亦然.当某个域的内容发生变化时,与之关联的 ...

  3. AngularJS从构建项目开始

    AngularJS从构建项目开始 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框 ...

  4. [转]如果我有jQuery背景,我应该如何切换到AngularJS的思维模式?

    导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的 ...

  5. 快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angula ...

  6. 使用 AngularJS 从零构建大型应用

    0.导言 1.准备工作 2.构建框架 3.丰富你的directives 4.公用的services 5.用controllers组织业务 导言 纵览线上各种AngularJS教程,大部分都是基础与一些 ...

  7. 从零开始搭建口袋妖怪管理系统(1)-从Angular1.x开始

    开坑,一直喜欢口袋妖怪,想着能写点有关的程序. 最近项目要改写管理系统,所以用Angular1.x搭建一个口袋妖怪管理系统试试. 巩固Ng1.x的知识+学习库的用法,然后算是记录一个系统从零开始到成型 ...

  8. 93.快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    转自:https://www.cnblogs.com/wawahaha/p/3946023.html 前言 Angularjs越用越顺手,不仅代码量比jQuery少很多,而且实现思路特别清晰,构建大型 ...

  9. 转载:Think in AngularJS:对比jQuery和AngularJS的不同思维模式(大漠穷秋)

    导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的 ...

随机推荐

  1. 【LeetCode】【Python解决问题的方法】Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  2. Unreal Engine 4 创建Destructible Mesh(可破坏网格)

    Unreal Engine 4的物理引擎用的是PhysX. 支持网格破坏.布料.物理粒子等,非常强大.曾经须要编码才干完毕的工作,在Unreal Engine 4 中仅仅须要拖拖拽拽就完毕了,非常方便 ...

  3. sails中文文档地址

    http://sailsdoc.swift.ren/ Sails.js是一个Web框架,可以于轻松构建自定义,企业级Node.js Apps.它在设计上类似于像Ruby on Rails的MVC架构的 ...

  4. VS2012 编译程序时报无法载入PDB文件错误解决方式

    VS2012 编译程序时报无法载入PDB文件错误解决方式 "ConsoleApplication1.exe"(Win32): 已载入"C:\Users\hp\Docume ...

  5. Android 随着输入框控件的清除功能ClearEditText,抄IOS输入框

    今天给大家带来一个非常有用的小控件ClearEditText,就是在Android系统的输入框右边增加一个小图标,点击小图标能够清除输入框里面的内容,IOS上面直接设置某个属性就能够实现这一功能.可是 ...

  6. NGUI判断是否点击到UI控件

    注意:UI应加上Box Collider 1.射线检测 UICamera发一条射线,射线碰到了东西就说明点击到了UI Ray ray=UICamera.mainCamera.ScreenPointTo ...

  7. HDU 2012 素性

    素性 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  8. 大约Android 了解权限管理

    如Android应用程序开发人员.为android权限机制一直觉得很奇怪.为什么要这个东西权限?为什么要AndroidManifest里面写的uses-permission 这样的事情?我一直搞不清楚 ...

  9. 正确openvSwitch不同种类port认识

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdm9uemhvdWZ6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  10. 为RadComboBox添加SelectionChanging事件

    代码非标准,仅供参考. using System; using System.Collections.Generic; using System.Linq; using System.Windows. ...