Angular JS 学习之简介

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>

时间: 2024-10-01 08:01:06

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

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Angular JS学习笔记

之前的学习方法有点盲目,建议以后只看与工作有关的内容,并且多问那些是只和工作有关联的. 遇到问题的时候,项目不急的话,自己研究,项目急的话,马上问. 方法不对,再努力也没有用. Angular JS学习网站:http://www.zouyesheng.com/angular.html#toc7 [  项目有关的内容 ] ng-model ng-click ng-options ng-repeat ng-if ng-show ng-hide ng-controller ng-href(有印象) {

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636

ptyhon , angular js 学习记录【1】

1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 1996; 96 M Month in year Month July; Jul; 07 w Week in year Number 27 W Week in month Number 2 D Day in year Number 189 d Day in month Number 10 F Day of

Angular JS 学习

学习一个google 的开发的 前端js 框架   Angular JS. 参照的书:  Angular Js  published by O'REILLY. 第二个小例子:  有一个textbox 文本框,当输入内容,placeholder 中的内容会跟着变化. 因为把ng-model 拼错了,所以显示的结果中, 文本内容改变了,p的内容没有跟着有相应变化,找了好久没找出原因,原来是ng-model拼错,无语. <html ng-app = "myApp"><hea

angular.js学习的第一天

第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个angular.js的应用程序:ng-model指令则实现把对应的值 绑定到当前的应用程序:ng-bind 指令把应用程序数据绑定到 HTML 视图. <!DOCTYPE html><html lang="en"><head> <meta charset

Angular JS 学习笔记(一)

1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net/

Angular js 学习总结

下面是关于Angular js 实现动态加载表格,根据输入框内容·搜索的例子 <script> var mainApp = angular.module("mainApp",[]); mainApp.controller("MyController",function($scope){ $scope.childrenArry=[ {name:"alice",age:20}, {name:"柳林",age:20},