前端开发

 首页 > 前端开发 > AngularJS > AngularJS基础教程之简单介绍_AngularJS_自学php网

AngularJS基础教程之简单介绍_AngularJS_自学php网

分享到:
【字体:
导读:
          本教程旨在帮助你尽可能快速而有效地学习AngularJS。通过该教程你会学习到AngularJS的一些基本特性,例如指令、表达式、过滤器、模块和控制器等。以及其它所有你需要知道的有关Angu...

  AngularJS是一个JavaScript框架。它可以通过

AngularJS扩展了HTML

  AngularJS通过一系列ng-directives指令对HTML进行扩展。

  ng-app指令定义了AngularJS application。

  ng-model指令将HTML控件的值与数据模型绑定到一起。

  ng-bind指令将模型数据绑定到HTML视图。



Name:

示例说明:

  当页面加载完成时AngularJS自动开始执行。

  ng-app指令告诉AngularJS它所在的

元素是AngularJS Application的根元素。

  ng-model指令将input标签的值绑定给变量name。

  ng-bind指令将变量name的值绑定给

元素的innerHTML属性。

 AngularJS指令

  就如你所看到的,AngularJS指令就是一组以ng开头的HTML属性。

  通过ng-init指令可以将AngularJS Application的变量进行初始化。

The name is

等效的代码:

The name is

Note 你可以使用前缀data-ng-来代替ng-,这样可以确保页面上的HTML是有效的(valid)。
  在后面的章节中你将会学习到更多的AngularJS指令。

AngularJS表达式

  AngularJS表达式写在双大括号中:{{ 表达式语句 }}。

  AngularJS会准确地将表达式“输出”为计算的结果,例如:






My first expression: {{ 5 + 5 }}

  AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。






Name:

{{name}}

  在后面的章节中你将会学习到更多有关AngularJS表达式的内容。

AngularJS Application

  AngularJS模块定义了AngularJS Applications。

  AngularJS控制器则控制着AngularJS Applications的行为。

  ng-app指令用于指定application,而ng-controller指令则用来指定控制器。

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

  AngularJS模块定义applications:

var app = angular.module('myApp', []);
  AngularJS控制器控制AngularJS Applications的行为:

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

  在后面的章节中你将会学习到更多有关模块和控制器的内容。

分享到:
浅谈angular.js中实现双向绑定的方法$wat...
Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',...
angularjs学习笔记之双向数据绑定_Angula...
这次我们来详细讲解angular的双向数据绑定。 一.简单的例子     这个例子我们在第一节已经展示过了,要看的移步这里     这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容。这就实现了数据双向绑定。 二.取值表达式与ng-bind的使用     我们再看一个例子,点击这里,文中出现的第一个例...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……