林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

摘要：主要给大家介绍了AngularJs及其特性，并以3个实例来做说明。

本教程使用AngularJs版本：1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下载地址：https://angularjs.org/

一、AngualrJs简介

AngularJS是由谷歌开发出来的，它是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

（1）使用双大括号{{}}语法进行数据绑定；

（2）使用DOM控制结构来实现迭代或者隐藏DOM片段；

（3）支持表单和表单的验证；

（4）能将逻辑代码关联到相关的DOM元素上；

（5）能将HTML分组成可重用的组件。

AngularJS可以认为是一个MVC模式的框架Model-View-Controller)，其中M代码scope,V代表Html展示元素，C代表Controller.你也可以将它看成是一个MVVW模式的框架（Model-View-ViewModel），其中其中M代码scope中的数据,V代表Html展示元素，VW代表scope.AngularJS和Jquery的设计思想完成不同，你不需要去冗长的代码去控制DOM元素，一些Html上的元素都和scope上的数据进行一个双向绑定，你只需要更新scope上的数据，Html自动会发生改变。同理，你如果修改html上的数据，如input上的输入值 ，对就的scope也会接收到你的改变，从而实时更新。当然，这只是它很小一部份的功能，更多的包括指令、路由、服务等，也可以大大加快开发的速度。下面来看看它有哪些特性

二、特性

1、  数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定使得代码更少，你可以专注于你的应用。

传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。

2、模板

在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。

HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。

我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。

3、MVC

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Model-View-ViewModel)。其中MVC原理图可以看看下面的图片。

4、依赖注入（Dependency Injection，即DI）

AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。

5、Directives（指令）

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

三、实例讲解

（1）入门实例一

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AngularJS入门学习</title>
  6. <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <p><input  type="text" ng-model = "inputValue">请输入内容</p>
  10. <h1>您输入的内容为：{{inputValue}}</h1>
  11. </body>
  12. </html>

结果：

注意事项：
文本输入指令<input ng-model="inputValue" />绑定到一个叫inputValue的模型变量。
双大括号标记将yourname模型变量添加到问候语文本。
你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

这个页面非常简洁，如果用Jquery写，那么就得设置input框 的chang中事件，然后更新内容。这一过程比AngularJS来得繁琐多了。

（2）入门实例2

下面现来看一个带Controller层的：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AngularJS入门学习</title>
  6. <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body ng-controller = "myController">
  9. <p><input  type="text" ng-model = "inputValue">请输入内容</p>
  10. <h1>您输入的内容为：{{inputValue}}</h1>
  11. </body>
  12. <script type="text/javascript">
  13. var app = angular.module('myApp', []);//获得整个angularJS影响的html元素
  14. //控制器
  15. app.controller('myController', function($scope) {
  16. $scope.inputValue = "林炳文Evankaka";
  17. });
  18. </script>
  19. </html>

注意，ng-app="myApp",这个不能少，还有ng-controller=“”也不能少，这两个分别批明了AngularJS有效的范围和Controller层有效的范围。

效果如下：

这里因为我们设置了$scope.inputValue = "林炳文Evankaka";，所以一打开页面，input中就已自动填充 "林炳文Evankaka";

myController——控制器方法的名字和<body>标签里面的ngController指令的值相匹配。
input的数据此时与注入到我们控制器函数的作用域（$scope）相关联。当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有<body ng-controller="myController">标记内部的数据绑定有效。

(3)入门实例3

接下来使用一个带有多种ng指令的实例，这时实现的功能是点击按钮一下，显示内容，再点击一个，隐藏内容

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AngularJS入门学习</title>
  6. <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>
  7. </head>
  8. <body ng-controller = "myController">
  9. <button ng-click= "myClick()" ></button>
  10. <h1 ng-if = "!flag"> 我是林炳文Evankaka</h1>
  11. </body>
  12. <script type="text/javascript">
  13. var app = angular.module('myApp', []);//获得整个angularJS影响的html元素
  14. //控制器
  15. app.controller('myController', function($scope) {
  16. $scope.flag = false;
  17. $scope.myClick = function(){
  18. console.log($scope.flag);
  19. $scope.flag  = !$scope.flag ;
  20. console.log($scope.flag);
  21. }
  22. });
  23. </script>
  24. </html>

参考文章：http://www.apjs.net/

from: http://blog.csdn.net/evankaka/article/details/51078043

跟我学AngularJs:AngularJs入门及第一个实例的更多相关文章

  1. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  2. 【React Native开发】React Native For Android环境配置以及第一个实例(1)

    年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...

  3. Djangoday1 入门及第一个apphelloworld

    1 Django基础指令新建一个django project新建app创建数据库表,更新数据库表或字段使用开发服务器清空数据库创建超级管理员导出数据 导入数据Django 项目环境终端数据库命令行更多 ...

  4. Spring Boot入门及第一个案例

    一:SpringBoot是什么 springboot是对spring的缺点进行改善和优化,约定大于配置  开箱即用  没有代码生成 也无需xml 文件配置   可以修改属性值来满足需求 1) Spri ...

  5. Mybatis入门及第一个Mybatis程序

    Mybatis笔记整理 所需要的基础知识 JDBC Mysql Java基础 Maven Junit 框架:是有配置文件的.最好的方式:看官网文档 1.简介 1.1.什么是MyBatis 简介 什么是 ...

  6. 配置OpenGL及第一个实例

    Windows环境下安装GLUT的步骤:1.将下载的压缩包解开,将得到5个文件2.在“我的电脑”中搜索“gl.h”,并找到其所在文件夹(如果是VS,则应该是其安装目录下面的“VC\PlatformSD ...

  7. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  9. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

随机推荐

  1. MFC+WinPcap编写一个嗅探器之五（过滤模块）

    这一节主要介绍如何获设置捕获过滤,这里的过滤是指在捕获前过滤 设置捕获过滤主要是在CFilterDlg中完成,也就是对应之前创建的设置过滤规则对话框,如图: 首先要根据用户的选择来生成一个合法的过滤规 ...

  2. MyBatis-Plus 3.0.7.1

    1 .分页配置 <plugins> <plugin interceptor="com.baomidou.mybatisplus.plugins.PaginationInte ...

  3. Matlab 也很强大！

    一.实时编辑器 所创建的脚本不仅可以捕获代码,还可以讲述与人分享的故事.自动化的上下文提示可让您在编程时快速推进,并且将结果与可视化内容和您的代码一起显示. 一般以 .mlx 为后缀. 二.App D ...

  4. @Resource与@Autowired注解的区别（转）

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解.如:@Resource.@PostConstruct及@PreDestroy 1.@Autowired ...

  5. CentOS 7下MySQL5.7.23的服务配置参数测试

    CentOS 7默认安装MySQL5.7.23,服务管理发生了变化,从sysvinit(service mysql start)变化为systemd(systemctl start mysqld.se ...

  6. MySQL Insert语句单个批次数量过多导致的CPU性能问题分析

    [问题] 最近有台服务器比较频繁的CPU报警,表现的特征有CPU sys占比偏高,大量慢查询,大量并发线程堆积.后面开发对insert的相关业务限流后,服务器性能恢复正常. [异常期间线程处理情况] ...

  7. Keras/tensorflow出现‘Loaded runtime CuDNN library: 7.0.5 but source was compiled with: 7.1.14’错误的解决办法

    从tensorflow1.10 升级到1.12版本后,对依赖的CuDNN不兼容产生的问题.鉴于一直使用的是Keras,未使用新版本tensorflow的功能,故果断回退到旧版本. 方法为:pip3 i ...

  8. Java 中的异常处理机制

    生活中的异常:  不能够完整而顺利的完成一些工作 根据不同的异常进行相应的处理,而不会就此终端我们的生活 引出:  异常处理: 方式:  1.选择结构(逻辑判断)避免 demo:if逻辑处理异常 im ...

  9. 移动端meta标签

    现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewpor ...

  10. Django-url反向解析与csrf-token设置

    url反向解析 在使用Django 项目时,一个常见的需求是获得URL 的最终形式,以用于嵌入到生成的内容中(视图中和显示给用户的URL等)或者用于处理服务器端的导航(重定向等). 人们强烈希望不要硬 ...