一、介绍

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. 条款10：令operator=返回一个reference to * this(Have assignment operators return a reference to *this)
			
    NOTE: 1.令赋值(assignment)操作符返回一个reference to *this. 2.此协议适用于所有赋值相关的运算比如:+= -= *=....
    
			
    2. 
						
  2. python 学习总结1
			
    计算机与程序设计 一.计算机的概念 1.计算机是根据指令操作数据的设备. 2.计算机主要包括两个功能性一个是功能性另一个是计算性 功能性是对数据的操作,表现为数据计算,输入输出处理和结果存储 可编程性 ...
    
			
    3. 
						
  3. Spring Boot Web开发中Thymeleaf模板引擎的使用
			
    这里使用的是idea 1.新建Spring Boot项目 File-->New-->Project...,然后选择左边的Spring Initializr-->Next,可根据自己的 ...
    
			
    4. 
						
  4. scrollLeft属性设置无效的一个记录
			
    首先应该明确scrollLeft这个属性,只有当div中的内容长度大于当前div的长度是才能working,根据这个我我找到了一个很神奇的地方,而且我注意到这个${}连注释里面都能替换过来! 以下是正 ...
    
			
    5. 
						
  5. JSP表达式语言（EL）
			
    JSP表达式语言(EL)使得访问存储在JavaBean中的数据变得非常简单.JSP  EL既可以用来创建算术表达式也可以用来创建逻辑表达式.在JSP  EL表达式内可以使用整数型.浮点型.字符串.常量 ...
    
			
    6. 
						
  6. Git 二进制文件冲突解决
			
    Git 二进制文件冲突解决 在我们合并分支的时候,如果两个分支都进行了修改那么就会产生合并冲突.对于非二进制文件的冲突解决,git会给出冲突的位置我们可以手动修改然后再commit.但是对于非二进制文 ...
    
			
    7. 
						
  7. rsync 同步文件重复拷贝问题
			
    rsync 是同步文件的利器,一般用于多个机器之间的文件同步与备份,同时也支持在本地的不同目录之间互相同步文件.在这种场景下,rsync 远比 cp 命令更加合适,它只会同步需要更新的文件,默认情况下 ...
    
			
    8. 
						
  8. bzoj 1701 [Usaco2007 Jan]Cow School牛学校
			
    [Usaco2007 Jan]Cow School牛学校 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 175  Solved: 83[Submit][S ...
    
			
    9. 
						
  9. PHP中的字符串替换(str_replace)
			
    /*替换 字符串处理  str_replace() */ $num = 0; $str = "http://www.phpbrother.net/php/demo.php";$st ...
    
			
    10. 
						
  10. SDWebImage实现分析
			
    该博文来自南峰子的技术博客,文章从下载和缓存俩个大的组件分析到里面一些核心方法的实现,条理清晰,相对于一些一上来就通篇分析实现思路的技术文章, 这篇的讲解思路明确,框架架构也讲的比较清楚.看完这篇再去 ...
    
			
    11.