一、介绍

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. HTML中复选框的使用方法
			
    <select id="question"> {# 常见问题.ajax用editor.html('1231254')填充#} <option value=&quo ...
    
			
    2. 
						
  2. Java学习之并发多线程理解
			
    1.线程简介: 世间万物会同时完成很多工作,如人体同时进行呼吸.血液循环.思考问题等活动,用户既可以使用计算机听歌也可以使用它打印文件,而这些活动完全可以同时进行,这种思想在Java中称为并发,而将并 ...
    
			
    3. 
						
  3. 谷歌浏览器修改CSS和js后同步保存到文件中 （译）
			
    本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-m ...
    
			
    4. 
						
  4. 理解js的几个关键问题（1）：全局变量new和关于hasOwnPropery和PropertyIsEnumerable 等
			
    一.作用域和全局变量 var test=function(){ var a=1; setTimeout(function(){ console.log(a); a=2; },1000); a=3; s ...
    
			
    5. 
						
  5. xtu read problem training  A - Dividing
			
    A - Dividing Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Descri ...
    
			
    6. 
						
  6. BNU 13174 Substring Frequency
			
    3C. Substring Frequency Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %lld      ...
    
			
    7. 
						
  7. SPOJ LCS 后缀自动机找最大公共子串
			
    这里用第一个字符串构建完成后缀自动机以后 不断用第二个字符串从左往右沿着后缀自动机往前走,如能找到,那么当前匹配配数加1 如果找不到,那么就不断沿着后缀树不断往前找到所能匹配到当前字符的最大长度,然后 ...
    
			
    8. 
						
  8. bzoj 1251序列终结者 splay 区间翻转，最值，区间更新
			
    序列终结者 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 4594  Solved: 1939[Submit][Status][Discuss] De ...
    
			
    9. 
						
  9. 假面舞会（codevs 1800）
			
    题目描述 Description 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会. 今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择 一个自己喜欢的面具.每个面具都有一 ...
    
			
    10. 
						
  10. ST 表学习
			
    作用:ST算法是用来求解给定区间RMQ的最值,本文以最小值为例 举例: 给出一数组A[0~5] = {5,4,6,10,1,12},则区间[2,5]之间的最值为1. 方法:ST算法分成两部分:离线预处 ...
    
			
    11.