一、介绍

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. UVa-1585-得分
			
    #include <stdio.h> #include <string.h> int main() { char s[100]; int T; scanf("%d&q ...
    
			
    2. 
						
  2. 分享下自己的EmpireofCode进攻策略 https://empireofcode.com/     https://empireofcode.com/game/#
			
    # 没什么用,该游戏的模块调用不友好,取数据难import queue from battle import commander # import math unit_client = command ...
    
			
    3. 
						
  3. 大数据学习——服务器定期上传nginx日志到hdfs
			
    需求:按照所学知识完成如下: 服务器定期上传nginx日志到hdfs 提示: Hdfs的创建文件夹命令: Hadoop fs -mkdir /文件夹名称 Hdfs的上传命令: Hadoop fs -p ...
    
			
    4. 
						
  4. python--如何在线上环境优雅的修改配置文件?
			
    1.如何在线上环境优雅的修改配置文件? 原配置文件 #原配置文件 global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 ...
    
			
    5. 
						
  5. 什么是Service  Mesh？
			
    转至大佬宋净明的博客:https://jimmysong.io/posts/what-is-a-service-mesh/ Service mesh 又译作 “服务网格”,作为服务间通信的基础设施层. ...
    
			
    6. 
						
  6. 1010. Radix (25)（出错较多待改进）
			
    Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...
    
			
    7. 
						
  7. 数列分段Section II（二分）
			
    洛谷传送门 输入时处理出最小的答案和最大的答案,然后二分答案即可. 其余细节看代码 #include <iostream> #include <cstdio> using na ...
    
			
    8. 
						
  8. 静态工具类中使用注解注入service实例
			
    一般需要在一个工具类中使用@Autowired 注解注入一个service.但是由于工具类方法一般都写成static,所以直接注入就存在问题. 使用如下方式可以解决: /** * */ package ...
    
			
    9. 
						
  9. msp430项目编程20
			
    msp430中项目---超声波测距系统 1.定时器工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习
    
			
    10. 
						
  10. linux下库文件的编程
			
    编程到了一定的时候,总喜欢追求新的东西.将代码尽量模块化就是我的追求之一,原来只是满足于将代码从单文件中分离,通过头文件和实现文件实现模块化,后来发现最好的方法是打包成库文件,使用更加方便.尽管在li ...
    
			
    11.