一、介绍

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. 如何用纯 CSS 创作条形图，不用任何图表库
			
    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/XqzGLp 可交互视频教 ...
    
			
    2. 
						
  2. 五分钟掌握 for...in 和 for...of 区别
			
    GitHub 地址,欢迎star,查看更多整理的前端知识 for...in for...in 语句以任意顺序遍历一个对象的可枚举属性. for...in 遍历对象本身的所有可枚举属性,以及对象从其构造 ...
    
			
    3. 
						
  3. Postman插件如何安装
			
    我们chrome插件网热门推荐的软件之一就是postman.但是postman的适应平台分为:postman chrome应用程序,postman应用程序,postman插件.谷歌应用商店从2018年 ...
    
			
    4. 
						
  4. Spring Boot 返回Html界面
			
    @Controller public class HelloController { @RequestMapping("/") public String index(){ ret ...
    
			
    5. 
						
  5. 在java中获取Map集合中的key和value值
			
    
			
    6. 
						
  6. 【ITOO 1】SQLBulkCopy实现不同数据库服务器之间的批量导入
			
    导读:在做项目的时候,当实现了动态建库后,需要实现从本地服务器上获取数据,批量导入到新建库的服务器中的一个表中去.之前是用了一个SQL脚本文件实现,但那时候没能实现不同的数据库服务器,现在用了SqlB ...
    
			
    7. 
						
  7. python中的“坑”—持续更新
			
    1.判断是否是回文 def is_back(s): ]==(s if s.strip() else False) print(is_back('上海自来水来自海上')) print(is_back(' ...
    
			
    8. 
						
  8. HDU 3973 线段树+字符串hash
			
    题目大意: 不断修改字符串中的字母,然后询问区间字符串是否处于已给定的字符串集合中 这里将原来的字符串集合保存到hash表中,当然用map,set都没有问题 修改查询都用线段树实现,自己的query函 ...
    
			
    9. 
						
  9. mybatis查询返回null解决方案
			
    mybatis查询返回null解决方案: 问题:查询出的列与javabean中的字段名不一致. 解决方案: 1.将javabean中的字段改为和查询出的列名一致: 2.将sql加入as改变列名,和ja ...
    
			
    10. 
						
  10. hdu 4045 Machine scheduling [ dp + 斯特林数]
			
    传送门 Machine scheduling Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...
    
			
    11.