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 学习之简介的主要内容,如果未能解决你的问题,请参考以下文章

Angular JS 学习之控制器

AngularJS学习之模块

前端学习之JavaScript的框架

Angular js 简介

Angular JS赶快学起来(上)

Angular 框架学习笔记