Angular js 简介

---恢复内容开始---

1:通过 <script> 标签添加一个anjular.js 文件到 HTML 页面 ,(建议把脚本放到body元素的底部)

AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

2:常用的 angular js 的Directives(指令)

ng-app:指令定义一个angular js  的应用程序。如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

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

ng-bind:指令吧应用程序数据绑定到html视图 :绑定数据直接输出 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-init:指令初始化angular js应用程序变量

ng-controller,

ng-show:

3: Angular js 的表达式

Angular JS 的表达式写在双大括号内{{ expression}}

Angular JS 表达式把数据绑定到html,这与ng-bind 指令相似

Angular JS 将在表达式书写的位置“输出”数据

Angular JS表达式与 javascript 表达式:他们可以包含文字,运算,和变量。例如  {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

 4:Angular JS 应用

Angular JS模块(Module)定义了Angular JS 的应用

Angular JS  控制器(controller)用于控制angular 就是应用

ng-npp指令定义了应用,ng -controller 定义了控制器

HTML5 允许扩展的(自制的)属性,以 data- 开头

pasting

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 <p>名字 : <input type="text" ng-model="name"></p>
 <h1>Hello {{name}}</h1>
</div>

</body>
</html>

<div ng-app="" ng-init="firstName=‘John‘">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

angular js 的应用

<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‘, []);//anggular js 的模块
app.controller(‘myCtrl‘, function($scope) { //anjular js 的控制器
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

时间: 2024-11-09 22:41:51

Angular js 简介的相关文章

Angular.js初步认知

第一部分  Angular.js简介 Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足. 注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,但是两者却不是一个概念. 类库: 指一些函数的集合,封装一些可复用的代码块,但是类库本身需要开发者主动调用各种方法才能实现功能,如jQuery等. 框架: 指一种特殊的,已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码

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 第一天——Angular 之禅

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a

Vue.js简介

Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 简单 下面看一段Angular的实

Angular JS开发秘籍——互动出版网

这篇是计算机类的优质预售推荐>>>><Angular JS开发秘籍> 使用AngularJS革新MVC方式实现精彩的Web应用,扩展 HTML的AngularJS指令,20多年企业应用和Web界面开发经验作者Brad Dayley 最新作品 内容简介 快速掌握AngularJS Web开发技术 AngularJS是Web开发领域最激动人心的创新技术之一,它为整个开发过程提供结构,旨在简化Web应用的开发和测试. 网站已不再是简单的静态内容--相反,网站更趋动态化,通常单

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

使用angular.js获取form表单中的信息

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <script src="./node_modules/angular/angular.js"></script> </head> <body ng-app="s1

activiti自定义流程之整合(二):使用angular js整合ueditor创建表单

注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义的表单不谈,通过之前的了解,我们知道一个新的流程开始,是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition),流程定义又依赖于流程模型(model). 我们用到的自定义表单需要在创建模型,画模型图的时候就指定表单的名称formKey,需