`

AngularJs简介

js 
阅读更多

AngularJs 简介

AngularJs是一个JavaScript框架,它是一个JavaScript编写的库

AngularJs是以一个JavaScript文件形式发布的

 

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 AngularJs通过ng-directives扩展了HTML

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

ng-model指令是吧元素值(比如输入域的值)绑定到应用程序.

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>


 AngularJs表达式

 AngularJs将在表达式书写的位置输出数据

AngularJs表达式可以包含文字,运算符和变量

<div ng-app="">
     <p>计算值: {{ 5 *5 }}</p>
</div>
//计算值:25

 

 ng-init指令初始化应用程序数据

 

<div ng-app="" ng-init="firstName='John'">
     <p>姓名:<input type="text" ng-model="firstName"></p>
     <p>你输入的为: {{ firstName }}</p>  //{{firstName}}表达式是一个AngularJs数据绑定表达式
 
</div>
 

 

数据绑定

AngularJs中的数据绑定,同步了AngularJs表达式与AngularJs数据.

{{firstName}}是通过ng-model="firstName"进行同步

<div ng-app="" ng-init="quantity=1;price=5">
数量: <input type="number"    ng-model="quantity">
价格: <input type="number" ng-model="price">
 
<p><b>总价:</b> {{ quantity * price }}</p>
 
</div>

AngularJs 指令绑定数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 <span ng-bind="points[2]"></span></p>
 
</div>
//第三个值为19

 AngularJs 指令绑定对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓为 <span ng-bind="person.lastName"></span></p>
 
</div>
//姓为Doe

 ng-model指令可以将输入域的值与AngularJS创建的变量绑定

 

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";   
});
</script>

 scope(作用域)是应用在html(视图)和JavaScript(控制器)之间的纽带

 scope可应用在视图和控制器

AngularJS创建控制器时,可以将$scope对象当作一个参数传递

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    AngularJs简介及例子

    AngularJS,是由Google维护的一个开源JavaScript框架,主要用于构建单页应用程序(Single-Page Applications, SPA)。这个框架将MVC(模型-视图-控制器)架构模式引入到前端开发中,极大地提高了开发效率和代码可...

    AngularJS高级程序设计

    第1部分为第1章到第8章,包括AngularJS简介,以及HTML、CSS和JavaScript的基础知识。第2部分为第9章到第17章,引导读者熟悉AngularJS库的各种特性,从对一个AngularJS应用程序中各种不同组件的概览开始,然后依次...

    angularjs-intro:angularjs简介

    **AngularJS简介** AngularJS,通常简称为Angular,是由Google维护的一个开源JavaScript框架,用于构建单页应用程序(SPA)。这个框架极大地简化了前端开发,尤其是处理动态内容和数据绑定。AngularJS的核心理念是...

    什么是 AngularJS?AngularJS简介

    AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件,需要的朋友可以...

    Angularjs_in_action

    #### 一、AngularJS简介 AngularJS是一款由Google维护的开源JavaScript框架,旨在通过HTML扩展来解决单页面应用(SPA, Single Page Application)开发中的常见问题。它允许开发者以声明式的方式编写代码,使得前端...

    angularJSBasicsHandout10:angularJS简介-100行代码

    在"angularJSBasicsHandout10:angularJS简介-100行代码"中,我们将深入理解这个框架的基本概念和核心特性。 首先,AngularJS的核心特性之一是数据绑定。它允许开发者在视图和模型之间建立直接的连接,使得当模型...

    Learning AngularJS.pdf (0分下载网)

    ### AngularJS简介 AngularJS是一个开源的前端JavaScript框架,用于构建动态Web应用程序。它由Google维护和支持,首次发布于2010年。AngularJS通过扩展HTML来提供一种更为简洁的方式来表达应用逻辑,并且它还通过...

    angularJSBasicsHandout05:angularJS简介-100行代码

    **AngularJS基础知识手册05:AngularJS简介-100行代码** AngularJS,由Google维护的开源JavaScript框架,是构建动态Web应用的强大工具。它通过MVC(模型-视图-控制器)架构模式简化了前端开发,尤其在处理数据绑定...

    AngularJS-intro:AngularJS 简介中使用的材料。 在 Unitec SPS 设施中进行。 2月6日和2月13日

    **AngularJS 简介** AngularJS 是一个强大的前端JavaScript框架,由Google维护,用于构建动态Web应用程序。它通过提供数据绑定和依赖注入等特性,极大地简化了开发过程,使得开发者能够更高效地构建功能丰富的单页...

    angularjs+boorstrap视频教程

    1. **AngularJS简介**: - **定义**:AngularJS是一种开源的JavaScript框架,由Google维护,用于简化Web应用的开发过程。 - **版本**:AngularJS通常指的是1.x版本,与后来的Angular 2+有所不同。 2. **核心特性*...

    AngularJS 中文版

    #### 一、AngularJS简介 - **定义与特点**:AngularJS是一种开源的JavaScript框架,由Google维护。它主要用于简化Web应用程序的开发过程,提供了一种更加灵活和智能化的方式来构建动态网页。AngularJS支持客户端...

    AngularJS的tree控件

    1. **AngularJS简介** AngularJS由Google维护,它通过双向数据绑定、依赖注入和指令等特性简化了Web开发。在这个项目中,我们利用AngularJS的指令系统来构建自定义的tree控件。 2. **自定义指令** 在AngularJS中...

    AngularJS 学习资料

    #### 一、AngularJS简介与重要性 AngularJS是一种广泛使用的开源前端JavaScript框架,由Google维护。它主要用于构建单页面应用(SPA),通过简化客户端和服务器之间的交互来提高用户体验。AngularJS的核心优势在于...

    angular-978-1-7835-5421-8:AngularJS 简介 [视频]

    **AngularJS简介 [视频]**\n\nAngularJS,作为一个强大的前端JavaScript框架,由Google维护,是Web开发领域的重要工具之一。这个【视频】教程将深入介绍AngularJS的基础知识及其核心特性,帮助开发者快速掌握这一...

    《AngularJS即学即用》【书本源码下载】

    #### 一、AngularJS简介 AngularJS是一种广泛使用的JavaScript框架,它由Google维护,主要用于构建动态网页应用。通过AngularJS,开发者可以利用HTML作为模板语言,并扩展HTML的标签功能来表达应用的组件结构。...

    angularjs前端框架

    #### 一、AngularJS简介 AngularJS是一个开源的JavaScript框架,由Google维护和支持。它旨在通过HTML扩展来解决Web应用开发中的难题,并简化客户端应用的开发过程。AngularJS的核心特性包括数据绑定、依赖注入、...

    MovieCat用angularjs写的一个前端网页

    一、AngularJS简介 AngularJS是由Google维护的开源JavaScript框架,它通过MVC(Model-View-Controller)架构模式,使得前端开发更加高效。其核心特性包括数据双向绑定、依赖注入、指令系统以及模块化等,极大地简化...

    AngularJS学习笔记

    #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库,虽然在本文档中作者将其称为“工具”,但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念在于提供一种全新的应用组织与开发方式...

Global site tag (gtag.js) - Google Analytics