一、介绍

AngularJS 是google 开发人员设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。

AngularJS特点例如以下：

  • REST Client： RestFul 是主流的接口模式。而AngularJS实现RestFul 接口client仅仅须要一行代码就可以。
  • MVVM（Model-View-ViewModel）模式：  Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法。和View 进行交互。这样的设计模式使得代码解耦合。

  • 数据绑定： AngularJS是数据双向绑定。
  • 依赖注入：AngularJS支持注入方式把须要的对象。方法等注入到指定的对象中。
  • 指令： AngularJS内部自带各种经常使用指令，同一时候也支持开发人员自己定义指令。
  • HTML模板和扩展HTML： AngularJS能够定义与HTML兼容的自己定义模板。

二、開始AngularJS

1. lib 引用，在HTML中引入anjularJS lib，例如以下：

[html] view
plaincopy

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

能够在AngularJS官网(https://angularjs.org/)下载最新的版本号
(1.3.8) 。

2. 简单样例：

[html] view
plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <div ng-app="" ng-controller="personController">
  8. First Name: <input type="text" ng-model="firstName"><br>
  9. Last Name: <input type="text" ng-model="lastName"><br>
  10. <br>
  11. Full Name: {{firstName + " " + lastName}}
  12. </div>
  13. <script>
  14. function personController($scope) {
  15. $scope.firstName = "John";
  16. $scope.lastName = "Doe";
  17. }
  18. </script>
  19. </body>
  20. </html>

该样例将会在兴许解说到。

3.推荐学习站点

http://www.w3schools.com/angular/angular_intro.asp

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

三、经常使用指令

1. Expression: AngularJS 使用双大括号 {{}} 取值。

2. ng-app： 初始化AngularJS应用，ng-app 是用来声明使用AngularJS载入页面。

3. ng-bind: 依据HTML元素的变量名，把HTML 元素的值绑定到指定的元素上。

[html] view
plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <div ng-app="">
  8. <p>Name: <input type="text" ng-model="name"></p>
  9. <p ng-bind="name"></p>
  10. </div>
  11. </body>
  12. </html>

4. ng-init: 初始化应用数据,使用方式例如以下：

[html] view
plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>
  5. </head>
  6. <body>
  7. <div ng-app="" ng-init="firstName='John'">
  8. <p>Name: <input type="text" ng-model="firstName"></p>
  9. <p>You wrote: {{ firstName }}</p>
  10. </div>
  11. <script>
  12. function personController($scope) {
  13. $scope.firstName = "John";
  14. $scope.lastName = "Doe";
  15. }
  16. </script>
  17. </body>
  18. </html>

普通情况下。初始化參数不使用ng-init, 我们会使用model或controller取代它，关于model和controller 会在以下介绍到。

5. ng-model： ng-model 会绑定HTML controller 的值到应用数据，使用方式例如以下：

[html] view
plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>
  5. </head>
  6. <body>
  7. <div ng-app="" ng-controller="personController">
  8. First Name: <input type="text" ng-model="firstName"><br>
  9. Last Name: <input type="text" ng-model="lastName"><br>
  10. <br>
  11. Full Name: {{firstName + " " + lastName}}
  12. </div>
  13. <script>
  14. function personController($scope) {
  15. $scope.firstName="John",
  16. $scope.lastName="Doe"
  17. }
  18. </script>
  19. </body>
  20. </html>

ng-model 还具有下面功能：

a.为应用数据提供类型验证（number。require,emai, 将在第七节介绍）;

b.为应用数据显示状态（invalid, dirty, touched, error, 将在第七节介绍）;

c. 为HTML 元素提供css 样式；

d. 绑定元素到表单中。

6. ng-controller

AngularJS 应用时被controller控制的。

[html] view
plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>
  5. </head>
  6. <body>
  7. <div ng-app="" ng-controller="personController">
  8. First Name: <input type="text" ng-model="firstName"><br>
  9. Last Name: <input type="text" ng-model="lastName"><br>
  10. <br>
  11. Full Name: {{fullName()}}
  12. </div>
  13. <script>
  14. function personController($scope) {
  15. $scope.firstName = "John",
  16. $scope.lastName = "Doe",
  17. $scope.fullName = function() {
  18. return $scope.firstName + " " + $scope.lastName;
  19. }
  20. }
  21. </script>
  22. </body>
  23. </html>

ng-controller="personController" 是指定controller 对象的名称。在controller 对象中。能够定义属性（$scope.firstName）, 方法（$scope.fullName=function(){...}）等。

在上面样例中，在personController 对象中创建了两个属性(变量)， 一个函数（function）。

7. ng-repeat, 是通过遍历集合，循环clone HTML 元素， 类似 for each 功能。

[html] view
plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <pre name="code" class="html"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
[html] view
plaincopy

  1. <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
[html] view
plaincopy

  1. <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>





8. ng-disabled： 禁用元素（text,button, checkbox等）。其值为ture 或false 或者一个返回boolean 的表达式等。







[html] view

 plaincopy










  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    5. 

  5. </head>
    6. 

  6. <body>
    7. 

  7. <div ng-app="" ng-controller="personController">
    8. 

  8. <input type="button" ng-click="toggle()" value="Toggle1"><br>
    9. 

  9. <input type="button" ng-disabled="disabledFlag" value="Toggle2"><br>
    10. 

  10. <br>
    11. 

  11. </div>
    12. 

  12. <script>
    13. 

  13. function personController($scope) {
    14. 

  14. $scope.disabledFlag = false,
    15. 

  15. $scope.toggle = function() {
    16. 

  16. $scope.disabledFlag = !$scope.disabledFlag;
    17. 

  17. return $scope.disabledFlag;
    18. 

  18. }
    19. 

  19. }
    20. 

  20. </script>
    21. 

  21. </body>
    22. 

  22. </html>





9. ng-show: 显示HTML 元素。值为true时显示，否则不显示。


10. ng-hide: 隐藏HTML元素，和ng-show相反。







[html] view

 plaincopy










  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    5. 

  5. </head>
    6. 

  6. <body>
    7. 

  7. <div ng-app="" ng-controller="personController">
    8. 

  8. <button ng-click="toggle()">Toggle</button>
    9. 

  9. <p ng-show="myVar">
    10. 

  10. First Name: <input type="text" ng-model="firstName"><br>
    11. 

  11. Last Name: <input type="text" ng-model="lastName"><br>
    12. 

  12. <br>
    13. 

  13. Full Name: {{firstName + " " + lastName}}
    14. 

  14. </p>
    15. 

  15. </div>
    16. 

  16. <script>
    17. 

  17. function personController($scope) {
    18. 

  18. $scope.firstName = "John",
    19. 

  19. $scope.lastName = "Doe"
    20. 

  20. $scope.myVar = true;
    21. 

  21. $scope.toggle = function() {
    22. 

  22. $scope.myVar = !$scope.myVar;
    23. 

  23. };
    24. 

  24. }
    25. 

  25. </script>
    26. 

  26. </body>
    27. 

  27. </html>





11. ng-click: 类似于click方法，定义AngularJS click 事件。


12. ng-include： 包括指定一个内容（html, jsp, tag等）。







[html] view

 plaincopy










  1. <div ng-include="'myUsers_List.htm'"></div>




												


											
AngularJS 基础入门（指令篇）的更多相关文章
	

    
						
  1. AngularJS基础入门初探
		
    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
    
		
    2. 
								
  2. [php入门] 4、HTML基础入门一篇概览
		
    [php入门] 1.从安装开发环境环境到(庄B)做个炫酷的登陆应用 [php入门] 2.基础核心语法大纲 [php入门] 3.WAMP中的集成MySQL相关基础操作 1.HTML的作用 HTML是超文 ...
    
		
    3. 
						
  3. angularJS基础入门
		
    所用到工具:<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> ...
    
		
    4. 
						
  4. HTML基础入门学习准备篇
		
    在学习前端的开始,让我们一起来了解什么是HTML5时代的大前端开发和全栈开发的定义 传统的前端:切图-标签和样式-实现效果 H5时代的前端: 一.需要各端的兼容开发 二.可以用于APP开发和移动站点的 ...
    
		
    5. 
						
  5. .NET ORM 的 “SOD蜜”--零基础入门篇
		
    PDF.NET SOD框架不仅仅是一个ORM,但是它的ORM功能是独具特色的,我在博客中已经多次介绍,但都是原理性的,可能不少初学的朋友还是觉得复杂,其实,SOD的ORM是很简单的.下面我们就采用流行 ...
    
		
    6. 
						
  6. AngularJS快速入门指南04：指令
		
    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
    
		
    7. 
						
  7. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
		
    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
    
		
    8. 
						
  8. SQLAlchemy 教程 —— 基础入门篇
		
    SQLAlchemy 教程 -- 基础入门篇 一.课程简介 1.1 实验内容 本课程带领大家使用 SQLAlchemy 连接 MySQL 数据库,创建一个博客应用所需要的数据表,并介绍了使用 SQLA ...
    
		
    9. 
						
  9. Linux及Arm-Linux程序开发笔记（零基础入门篇）
		
    Linux及Arm-Linux程序开发笔记(零基础入门篇)  作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/bee ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mysql优化之参数优化（转）
			
    1.优化方式 硬件优化=>系统优化=>mysql配置优化=>SCHEMA优化=>sql优化=>其他解决方案(redis or MongoDB or Cassandra o ...
    
			
    2. 
						
  2. LeetCode （32） Longest Valid Parentheses
			
    题目 Given a string containing just the characters '(' and ')', find the length of the longest valid ( ...
    
			
    3. 
						
  3. 【HDU 6000】Wash（贪心）
			
    Problem Description Mr.Panda is about to engage in his favourite activity doing laundry! He's brough ...
    
			
    4. 
						
  4. C#中如何使用正则表达式
			
    [草稿版本,谨慎阅读] 参考文档:正则表达式30分钟入门教程 如需系统学习正则表达式内容,请移步上述教程. 正则表达式按照指定的规则来匹配字符或字符串.'.' ' \b' ' \d'等等被称为是正则表 ...
    
			
    5. 
						
  5. Android开发——使用ADB Shell命令实现模拟点击（支付宝自动转账实现）
			
    首先声明,本人反对一切利用技术的违法行为 本文的实现代码已经销毁,本文以介绍流程为主 1.这里所说的模拟点击不是在自己的APP里点击,点自己APP上的控件没什么好说的 不仅是支付宝转账,其他的获取别人 ...
    
			
    6. 
						
  6. SHELL十三问[转载自CU论坛]
			
    原文地址:http://bbs.chinaunix.net/thread-218853-1-1.html 一.为什么称作shell? http://bbs.chinaunix.net/viewthr  ...
    
			
    7. 
						
  7. 使用MyBatista----上传图像
			
    使用MyBatis上传图像,使用的是Oracle的数据库表,有一个TEACHER表,有7列,有1列是存储图片的,类型用BLOB,最大容量是4G,以二进制的形式写入数据库表. 建立这个表的对应实体类Te ...
    
			
    8. 
						
  8. 大数据学习——hadoop安装
			
    上传centOS6.7-hadoop-2.6.4.tar.gz 解压 tar -zxvf centOS6.7-hadoop-2.6.4.tar.gz hadoop相关修改配置 1 修改 /root/a ...
    
			
    9. 
						
  9. XV6第一个进程
			
    第一个进程 本章通过第一个进程的创建来解释 xv6 是如何开始运行的,让我们得以一窥 xv6 提供的各个抽象是如何实现和交互的.xv6 尽量复用了普通操作的代码来建立第一个进程,避免单独为其撰写代码. ...
    
			
    10. 
						
  10. [Istioc]Istio部署sock-shop时rabbitmq出现CrashLoopBackOff
			
    因Istio官网自带的bookinfo服务依赖关系较少,因此想部署sock-shop进行进一步的实验. kubectl apply -f <(istioctl kube-inject -f so ...
    
			
    11.