为什么我会准备写这个原创教程系列？

写下这个标题之后，看着屏幕上空白的内容区，不知从何下手，想说的似乎有很多，似乎又没啥说的。有时候就会陷入这种矛盾中，有时候就是这样，于是，我下定决心这一次一定要把这个系列完成。

博客园开了博客也有段时间了，中间有把其他地方写的博客搬家过来的，也有转自大神的，也写过一些文字。然而一直以来都没有一个完整的系统，虽然我心里一直想系统整理下，在这种情况下，我看到了一篇文章《你为什么不分享》。于是乎我本着一颗博爱的心来写下下面的每一个文字。

如果接下来的文字对你有些许帮助，那么恭喜我自己帮助了你；如果接下来的文字对你造成了困扰，那么也希望你能在评论里，或者联系我，进行商讨完善文章；如果你看到了这里，非常感谢你耐着心子看下来了。

此系列教程的面相对象是：

  1. 会html/css/javascript以及JQuery的前端们，并且你想学习Angular；
  2. Angular开发路上的同路人；
  3. 大牛，非常感谢你的到来，且希望能得到你的意见和建议；
  4. 对前端开发感兴趣的。

一、认识Angular。

　　 首先，Angular是什么呢，官网上是这样介绍她的：

　　完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS
和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。

　　AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。

遵从国际惯例，Hello World例子奉上：

<!DOCTYPE html>

<html ng-app>

<head>

<title>Simple app</title>

<script

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">

</script>

</head>

<body>

<input ng-model="name" type="text" placeholder="Your name">

<h1>Hello {{ name }}</h1>

</body>

</html>

虽然这个例子很简单，但是她展示了AngularJs最基本的也是最diao的功能之一：数据绑定。

没有用JavaScript就能实现上面这个功能，是不是感觉很神奇，Angular到底做了什么呢？

1.ng-app指令：

<html ng-app>

ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

2.AngularJS脚本标签：

<script

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">

</script>

这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。

3.双括号绑定的表达式：

<h1>Hello {{ name }}</h1>

这行代码演示了AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}和表达式'name'组成。

这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。

AngularJS表达式仅在AngularJS的作用域里执行，而不是在整个DOM中。

通过ngApp指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。在高级开发中，例如使用脚本装载应用，您也可以使用bootstrap手动引导AngularJS应用。

AngularJS应用引导过程有3个重要点：

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

一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定，其中的模型也是空的。

　

图片来自互联网，如果侵犯了您的权利，请联系我手动删除。

　　

【原创教程】一、Angular教程系列之认识angular的更多相关文章

  1. 推介一个学习JAVA的系列教程-狗鱼IT教程

    介绍一个学JAVA的零基础学习JAVA的网站,推介一个学习JAVA的系列教程-狗鱼IT教程 下面是java的系教程: 1､[java教程]Java 教程 2､[java教程]Java 简介 3､[ja ...

  2. 【vscode高级玩家】Visual Studio Code❤️安装教程(最新版🎉教程小白也能看懂！)

    目录 如果您在浏览过程中发现文章内容有误,请点此链接查看该文章的完整纯净版 下载 Linux Mac OS 安装 运行安装程序 同意使用协议 选择附加任务 准备安装 开始安装 安装完成 如果您在浏览过 ...

  3. Android扫盲教程大全经典教程全分享

    Android扫盲教程大全经典教程全分享,相当于android的简单用户手册下载路径 Android扫盲教程大全经典教程全分享.rar

  4. 来自 Thoughtram 的 Angular 2 系列资料

    Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...

  5. 转帖-[教程] Win7精简教程(简易中度)2016年8月-0day

    [教程] Win7精简教程(简易中度)2016年8月 0day 发表于 2016-8-19 16:08:41  https://www.itsk.com/thread-370260-1-1.html ...

  6. Angular专题系列之一：初识Anjularjs

    Angular作为一个前端的主流框架,以其强大的特性正在被越来越多的程序员们所使用,那么,什么是anjular呢?angularjs是一个javascript framework,一个js的框架,可以 ...

  7. TensorFlow 中文资源全集，官方网站，安装教程，入门教程，实战项目，学习路径。

    Awesome-TensorFlow-Chinese TensorFlow 中文资源全集,学习路径推荐: 官方网站,初步了解. 安装教程,安装之后跑起来. 入门教程,简单的模型学习和运行. 实战项目, ...

  8. Angular单元测试系列

    Angular单元测试系列 - 大纲Angular单元测试系列 - 简介Angular单元测试系列 - 如何使用Jasmine进行Angular单元测试Angular单元测试系列 - Router.C ...

  9. C#游戏开发高速新手教程Unity5.5教程

    C#游戏开发高速新手教程Unity5.5教程 试读文档下载地址:http://pan.baidu.com/s/1slwBHoD C#是微软公布的高级程序设计语言.这门语言和C语言一样,已经成为了大学计 ...

  10. 最全的access2013教程 access 2010教程 access 2007教程 Access 2003教程

    最全的access2013教程 access 2010教程 access 2007教程 Access 2003教程 都在这个access中国网站里 http://www.office-cn.net/o ...

随机推荐

  1. Oracle 单实例 2个service的问题

    [oracle@PD admin]$ ps -ef | grep smon oracle 1917 1 0 Aug21 ? 00:33:51 ora_smon_podinndb oracle 2265 ...

  2. 17.1.1.5 Creating a Data Snapshot Using mysqldump

    一种方式创建一个数据库的快照在一个存在的master 数据库是使用mysqldump 来创建你需要复制的所有数据库的dump. 一旦数据dump 是完成,你然后倒入数据到slave 在开始复制过程前 ...

  3. 读完了简明Python教程(a bite of Python)

    因为学过C/C++,简明教程里很多共通的地方一看就明白. 明天做书最后的练习. <--! 代码占位 -->

  4. -_-#【Better Code】

    i++ 与 ++i 的性能区别 if (true) { console.log('hi') } if (!false) { console.log('hi~') } true && c ...

  5. Light OJ 1060 - nth Permutation(组合数)

    题目大意: 给你一个字符串,问这个字符串按照特定顺序排列之后,第n个字符串是哪个? 题目分析: 首先我们要会求解总个数.也就是共有len个字符,每个字符有ki个,那么总组合方式是多少种? 总组合方式就 ...

  6. An exception occurred during configuration of persistence layer.

    配置文件放在bin文件夹下(注意:hibernate.cfg.xml文件名不要随便改动)

  7. Ubuntu 使用apt-get时提示错误：无法获得锁 /var/lib/dpkg/lock

    推荐博客:http://blog.sina.com.cn/s/blog_5c1450a8010188ju.html Ubuntu 使用apt-get时提示错误:无法获得锁 /var/lib/dpkg/ ...

  8. NodeAsp——像开发NodeJS应用一样玩转ASP

    NodeAsp是一套Classic ASP框架,借鉴了NodeJS的模块化思想,让您可以使用全新的理念愉快地书写ASP程序. NodeAsp使用遵循CommonJS规范的require,完全兼容Nod ...

  9. Android SeekBar 和 draw9patch 的使用

    今天要使用一个SeekBar控件,其实我觉得Android默认样式已经很不错了,无奈设计不同意,而且SeekBar左右两边也有图片,默认样式和图片也确实不协调,因此这里使用图片自定义SeekBar样式 ...

  10. C随便练练手的题

    判断101-200之间有多少个素数,并输出所有素数 #include <stdio.h> int main(){ ; ; ; ){ while(may<cur){ ){ break; ...