1.Angular JS是一个JavaScript框架，它是一个以JavaScript编写的库，它可以通过<script>标签添加到HTML页面：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

2.Angular JS通过指令扩展了HTML，且通过表达式绑定数据到HTML

3.Angular JS扩展了HTML：

（1）Angular JS通过ng-directives扩展了HTML；

（2）ng-app指令定义了一个Angular JS应用程序；

（3）ng-model指令把元素（比如输入域的值）绑定到应用程序；

（4）ng-bind指令把应用程序数据绑定到HTML视图；

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src=http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js></script>

</head>

<body>

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

　　<p>名字：<input type="text" ng-model="name"></p>        //ng-model指令把输入域的值绑定到应用程序变量name

　　<h1>Hello {{name}}</h1>                   //ng-bind指令把应用程序变量name绑定到某个段落的innerHTML

</div>

</body>

</html>

4.AngularJS使得开发现代的单一页面应用程序变得更加简单；

**AngularJS把应用程序数据绑定到HTML元素

**AngularJS可以克隆和重复HTML元素

**AngularJS可以隐藏和显示HTML元素

**AngularJS可以在HTML背后添加代码

**AngularJS支持输入验证

5.AngularJS指令：AngularJS指令是以ng作为前缀的HTML属性，ng-init指令初始化AngularJS应用程序

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

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

</div>

6.AngularJS表达式：

**AngularJS表达式写在双大括号内：{{expression}}

**AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙；

**AngularJS将在表达式书写的位置"输出"数据；

**AngularJS表达式很像JavaScript表达式：它们可以包含文字，运算符和变量；

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src=http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js>

</script>

</head>

<body>

<div ng-app="">

　　<p>我的第一个表达式：{{5+5}}</p>

</div>

</body>

</html>

7.AngularJS应用：

**AngularJS模块（Module）定义了AngularJS应用;

**AngularJS控制器（Controller）用于控制AngularJS应用;

**ng-app指令定义了应用，ng-controller定义了控制器;

<div ng-app="myApp" ng-controller="myCtrl">

名：<input type="text" ng-model="firstName"><br>

姓：<input type="text" ng-model="lastname"><br>

<br>

姓名：{{firstName+""+lastName}}

</div>

<script>

var app=angular.module('myApp',[]);            //AngularJS模块定义应用

app.controller('myCtrl',function($scope){       //AngularJS控制器控制应用

　　$scope.firstName="John";

　　$scope.lastName="Doe";

});

</script>

Angular JS 学习之简介的更多相关文章

  1. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  2. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  3. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  4. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  5. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  6. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  7. Angular JS学习之表达式

    1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...

  8. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  9. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

随机推荐

  1. 查看Linux内核

    方法一: 命令: uname -a 作用: 查看系统内核版本号及系统名称 方法二: 命令: cat /proc/version 作用: 查看目录"/proc"下version的信息 ...

  2. IOS - 多态

    1. 多态性 多态性是个生物名词,用来表示生物体在生命周期中的不同形态,用在编程语言中则表示相同的方法名,但是却有不同的实现方式.或者说相同的名字,不同的类.我们来看一个书上的示例: #import  ...

  3. Does the OpenSceneGraph have a native file format?

    From OpenSceneGraph-3.0 onwards we have new native file formats based on generic serializers that ar ...

  4. java 设置允许ajax XMLHttpRequest 请求跨域访问

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest...  异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...

  5. php 删除文件夹

    <?php // ./tp // ./tp/Public function deldir($dirname) { if(!file_exists($dirname)) { die("文 ...

  6. MVC – 7.Razor 语法

    7.1 Razor视图引擎语法 Razor通过理解标记的结构来实现代码和标记之间的顺畅切换. @核心转换字符,用来 标记-代码 的转换字符串. 语境A: @{ string rootName=&quo ...

  7. oracle数据库出现“批处理中出现错误: ORA-00001: 违反唯一约束条件”解决方法

    最近使用oraclede impdp工具全库导入数据库时,在数据库里面使用出现如下情况. SQL state : 违反唯一约束条件 (GDXAORCL.SYS_C0055359) ; nested e ...

  8. C#委托(Action、Func、predicate)

    Predicate 泛型委托:表示定义一组条件并确定指定对象是否符合这些条件的方法.此委托由 Array 和 List 类的几种方法使用,用于在集合中搜索元素. public delegate boo ...

  9. 【Java EE 学习 19】【使用过滤器实现全站压缩】【使用ThreadLocal模式解决跨DAO事务回滚问题】

    一.使用过滤器实现全站压缩 1.目标:对网站的所有JSP页面进行页面压缩,减少用户流量的使用.但是对图片和视频不进行压缩,因为图片和视频的压缩率很小,而且处理所需要的服务器资源很大. 2.实现原理: ...

  10. SSH入门简单搭建例子

    因为公司涉及项目使用SSH,为了解SSH搭建方式和运作原理,就自己搭建了一个. 采用尽量以最少的JAR包,搭建一个简单的struts2+spring+hibernate环境,希望像我这样的入门者都能理 ...