AngularJs学习第一章（来自angularJS菜鸟教程）

时间 2019-11-12

标签 angularjs 学习第一章来自菜鸟教程栏目 AngularJS 繁體版

原文原文链接

AngularJS是一个JavaScript框架，它能够经过<script>标签添加到HTML页面。是一个JavaScript编写的库html

AngularJS经过指令扩展了HTML，且经过表达式绑定数据到HTMLapp

最好放在<body>元素的底部这样会提升网页加载速度，由于HTML加载不受制于脚本加载。框架

AngularJs扩展了HTML--四大指令spa

1.Angular 经过ng-dircctives扩展了HTMLcode

2.ng-app指令定义一个AngularJs应用程序cdn

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

4.ng-bind指令把应用程序绑定到HTML视图ip

例子：utf-8

<!DOCTYPE html>

<html>

<head>

</head>

<body>

　　<h1>Hello {{name}}</h1> </div>

</body>

实例讲解：

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

　　ng-app 指令告诉ANjularJS<div>元素AnjularJS应用程序的“ 全部者”

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

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

　　注意：若是移除了ng-app指令，HTML将直接把表达式显示出来，不会去计算表达式的结果。

什么是AnjularJS？　　

AnjularJS使得如今的单一页面应用程序(SPAs:Single Page Applications )变得更加容易。

　　AnjularJS把应用程序数据绑定到HTML元素。

　　AnjularJS能够克隆和重复HTML元素

　　AnjularJS能够隐藏和显示HTML元素

　　AnjularJS能够在HTML元素“ 背后”添加代码

　　AnjularJS能够支持输入验证

AnjularJS指令：

　　AngularJS是以 ng做为前缀的 HTML属性

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

<!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-init="furstName = '杨芬'">
<p>姓名为：<span ng-bind = "furstName"></span></p>
</div>
</body>
</html>input

运行结果：

　　姓名为：杨芬

注意：HTML5容许扩展的（自制的）属性，以data开头。

　　AngularJS属性容许以ng-开头可是能够使用data-ng-来让网页对HTML5有效

<!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></body></html>