什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

代码实例：



<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script type="application/javascript" src="../js/angular.min.js"></script>
</head>
<body>

<div >
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name + 55}}</h1>
</div>

<div  ng-init="firstName='John'">

    <p>姓名为 <span ng-bind="firstName"></span></p>

</div>

<div data-ng-app="" data-ng-init="firstName='John'">

    <p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>
</body>
</html>


 






当网页加载完毕，AngularJS 自动开启。


AngularJS 指令是以 ng 作为前缀的 HTML 属性。


ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。


ng-model 指令把输入域的值绑定到应用程序变量 name。


ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。


ng-init 指令初始化 AngularJS 应用程序变量。


HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
												


											
AngularJS1 学习笔记1的更多相关文章
	

    
								
  1. angularjs1学习笔记--持续更新
		
    angularJS使用的MVC为何不属于二十三种设计模式之一? MVC被GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable ...
    
		
    2. 
						
  2. AngularJS1.X学习笔记1-整体看看
		
    听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...
    
		
    3. 
						
  3. js学习笔记：webpack基础入门（一）
		
    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
    
		
    4. 
						
  4. PHP-自定义模板-学习笔记
		
    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图  ...
    
		
    5. 
						
  5. PHP-会员登录与注册例子解析-学习笔记
		
    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
    
		
    6. 
						
  6. 2014年暑假c#学习笔记目录
		
    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
    
		
    7. 
						
  7. JAVA GUI编程学习笔记目录
		
    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
    
		
    8. 
						
  8. seaJs学习笔记2 – seaJs组建库的使用
		
    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
    
		
    9. 
						
  9. CSS学习笔记
		
    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【NOI 2002】 银河英雄传说
			
    [题目链接] https://www.luogu.org/problemnew/show/P1196 [算法] 并查集 [代码] #include<bits/stdc++.h> using ...
    
			
    2. 
						
  2. jetty服务器数据源配置JNDI-Oracle,MySQL,SQLServer,DB2等 (转)
			
    下载jetty 下载jetty服务器(8.1.0.RC2),解压到任意目录下 http://dist.codehaus.org/jetty/jetty-hightide-8.1.0/jetty-hig ...
    
			
    3. 
						
  3. word-break属性和css换行显示
			
    这几天在做项目的时候,遇到了比较棘手的问题,便是在一个标签里边展示内容,如果说展示中文汉字,一点问题都没有,但是只要连续展示英文字母或者中文的标点符号(中间不带空格),那么所渲染的内容就不会换行,而是 ...
    
			
    4. 
						
  4. 自动刷github提交记录
			
    前言 进入自己github主页会看到自己的提交记录,如果某天没有提交记录,那天的小方框就显示灰色.强迫症的我,每次进来看着就感觉不爽, 想着自己每天记得提交点东西,争取像阮一峰大神一样,每天都有提交记 ...
    
			
    5. 
						
  5. 使用DWR实现JS调用服务端Java代码
			
    DWR简介 DWR全称Direct Web Remoting,是一款非常优秀的远程过程调用(Remote Procedure Call)框架,通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用 ...
    
			
    6. 
						
  6. SQL SERVER中的sys.objects和sysobjects的区别
			
    这三个视图都是存在于SQL Server的每个数据库中.在SQL Server 2000中,它们都是系统表,而不是视图. 关于两个版本中系统表和系统的视图的对应关系,参考:http://technet ...
    
			
    7. 
						
  7. The German Collegiate Programming Contest 2017
			
    B - Building 给一个m各面的多边形柱体,每一侧面有n*n个格子,现在对这些格子染色,看有多少种方式使得多面柱体无论如何旋转都不会与另一个一样. #include <bits/stdc ...
    
			
    8. 
						
  8. jtable的用法
			
    一.创建表格控件的各种方式:1)  调用无参构造函数.JTable table = new JTable();2)  以表头和表数据创建表格.Object[][] cellData = {{" ...
    
			
    9. 
						
  9. 操作mysql操作数据库
			
    操作数据库 查询数据库:show databases: 增加数据库:create database student default character set uft-8:(设置默认字符集) 删除数据 ...
    
			
    10. 
						
  10. arttemplate模板引擎里面多层循环
			
    要使用支持原生js的插件: 代码截图: json数据 { "list": [ { "name": "学历层次", "item&qu ...
    
			
    11.