Angular JS 学习之简介
Posted 小春熙子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 学习之简介的主要内容,如果未能解决你的问题,请参考以下文章