`

angularJS

    博客分类:
  • js
阅读更多

一。AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

例如:

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

 这是通过网址自动加载的,也可以去下载文件,然后用上面的方式加载进去。

下载地址:https://github.com/angular/angular.js/releases

说明:AngularJS只有一个主页面,其他的页面都是通过加载在主页面里面的,通俗点说就是只有一个页面,多个页面的效果是通过局部进行加载的。

 

二。AngularJS表达式:是以 {{ 表达式 }}  双大括号的形式进行书写的。

 

三。AngularJS 指令:

ng-app 指令初始化一个 AngularJS 应用程序。

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

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

ng-bind 指令绑定 HTML 元素到应用程序数据

ng-repeat 指令会重复一个 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 ng-app>                     //ng-app:定义AngularJS跟元素
<div ng-init="names=[            //ng-init:用来赋予names值
{name:'apple',price:'3'},
{name:'orange',price:'2.5'},
{name:'banana',price:'3.5'}]">
<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">   //ng-repeat:指令对于数组中的每个项会克隆一次HTML元素
  {{ x.name + ' : ' + x.price }}</li>
</ul>
<h2 ng-init='quantity=0;price=0'>价格计算器</h2>
数量: <input type="number" ng-model="quantity">  //ng-model:绑定 HTML 元素 到应用程序数据
价格: <input type="number" ng-model="price">
<p><b>总价:</b> {{quantity * price}}</p>
</div>
</body>
</html>

 

四。Angular模型:ng-model指令。

双向绑定。     例如:

<!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="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "大神";
});
</script>
<p>修改输入框的值,标题的名字也会相应修改。</p>
</body>
</html>

 上面就是Angular最基本的知识。如果只是想了解AngularJS,希望这篇文章能够让大家有个基础的理解。

分享到:
评论

相关推荐

    AngularJS书两本

    AngularJS,作为一款由Google维护的前端JavaScript框架,自2010年发布以来,一直在Web开发领域占据重要地位。这两本书《AngularJS_权威教程》和《AngularJS_深度剖析与最佳实践》将帮助我们深入理解并掌握这一强大的...

    AngularJS开发ASP.NET MVC

    ### AngularJS 开发 ASP.NET MVC #### 知识点概览 - **AngularJS与ASP.NET MVC结合的优势** - **AngularJS的特点与优势** - **AngularJS的基本概念(如数据绑定、指令等)** - **如何在ASP.NET MVC项目中引入...

    Mastering Web Application Development with AngularJS

    《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...

    AngularJS1.x快速入门

    ### AngularJS1.x快速入门知识点总结 #### 一、AngularJS概述 - **定义**:AngularJS是一款由Google维护的开源JavaScript框架,主要用于构建动态Web应用程序。它采用MVC(Model-View-Controller)设计模式,并实现...

    angularJs demo 各种基本用法

    AngularJS 是一个强大的JavaScript框架,主要用于构建动态web应用。它通过数据绑定和依赖注入机制,极大地简化了前端开发。在"angularJs demo 各种基本用法"中,我们可以深入探讨以下几个关键概念:路由(router)、...

    ssm+bootstrap+angularJs案例

    【标题】"ssm+bootstrap+angularJs案例"是一个整合了Spring、SpringMVC、MyBatis、BootStrap和AngularJS技术的实践项目。这个案例主要针对初学者,旨在帮助他们快速理解并掌握这些技术在实际开发中的应用。 ...

    AngularJS Eclipse 1.2.0 插件下载

    AngularJS Eclipse 1.2.0 插件是专为开发者设计的一款强大的工具,它将AngularJS框架与Eclipse集成,极大地提升了开发AngularJS应用程序的效率。Eclipse是一款广泛使用的开源集成开发环境(IDE),而AngularJS则是一...

    Learning AngularJS.pdf (0分下载网)

    ### AngularJS概览 《Learning AngularJS》一书由Ken Williamson编写,于2015年由O'Reilly Media出版。本书旨在帮助读者深入了解AngularJS框架的核心概念和技术细节,适用于那些希望利用AngularJS进行Web应用程序...

    angularjs下拉树控件

    在本文中,我们将深入探讨如何在AngularJS框架中实现下拉树控件,这是一种结合了树形结构和下拉选择功能的用户界面组件。AngularJS是Google开发的一个强大的前端JavaScript框架,它允许开发者构建可维护、可扩展的...

    Pro AngularJS 英文版 源代码

    《Pro AngularJS》是AngularJS框架的一本权威指南,它深入介绍了这个强大的JavaScript框架,旨在帮助开发者充分利用AngularJS构建高效、可维护的Web应用程序。这本书的英文版源代码提供了书中实例和练习的完整实现,...

    AngularJS模块化开发--增删改查

    AngularJS是一款强大的JavaScript框架,由Google维护,主要用于构建单页应用程序(SPA)。在这个"AngularJS模块化开发--增删改查"的项目中,我们将会深入探讨如何利用AngularJS进行高效且结构化的应用开发,同时结合...

    Professional.AngularJS.1118832078

    A comprehensive guide to AngularJS, Google's open-source client-side framework for app development. Most of the existing guides to AngularJS struggle to provide simple and understandable explanations...

    angularjs ui.router嵌套路由demo

    AngularJS UI.Router是一个强大的路由模块,它为AngularJS应用程序提供了更复杂的导航结构和状态管理功能。这个"angularjs ui.router嵌套路由demo"是展示如何在AngularJS项目中使用UI.Router进行多级路由配置和页面...

    angularJs权威和精通angularjs

    AngularJS,作为一款由Google维护的前端JavaScript框架,自2010年发布以来,一直在Web开发领域占据着重要的地位。它以其强大的双向数据绑定、依赖注入和模块化设计,极大地提高了开发效率,使得构建复杂的单页应用...

    AngularJS详细使用说明从零到高

    ### AngularJS详细使用说明从零到高手 #### 一、AngularJS概述 AngularJS是一个用于构建动态Web应用程序的开源框架,由Google维护和支持。AngularJS的设计理念是将HTML作为模板语言,并通过扩展其语法来更好地定义...

    Angularjs 合集 Angularjs 合集

    这个合集包含了三本书籍,分别是《AngularJS by Example》、《AngularJS Web Application Development Cookbook》以及《Apress.Pro.AngularJS》,它们分别从不同的角度深入探讨了AngularJS的使用和开发。 ...

    AngularJS学习 chm 文件

    AngularJS,是由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它极大地扩展了HTML的功能,使得在客户端能够更高效地处理数据和逻辑,提供了丰富的开发工具和API,帮助开发者构建动态、交互性强的...

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

    ### AngularJS基础知识与实战应用 #### 一、AngularJS简介 AngularJS是一种广泛使用的JavaScript框架,它由Google维护,主要用于构建动态网页应用。通过AngularJS,开发者可以利用HTML作为模板语言,并扩展HTML的...

Global site tag (gtag.js) - Google Analytics