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>

上一篇:Angular JS学习之表达式


下一篇:【腾讯Bugly干货分享】从0到1打造直播 App