AngularJS官网:https://angularjs.org

AngularJS是开发动态Web应用程序的客户端JavaScript MVC框架。AngularJS最初是作为Google的一个项目启动的,但现在是开源框架。AngularJS完全基于HTML和JavaScript,所以不需要学习其他语法或语言。(HTML+JS的升级版)

AngularJS的优势:

  1. 开源的JavaScript MVC框架。
  2. Google支持
  3. 不需要学习另一种脚本语言。这只是纯粹的JavaScript和HTML。
  4. 通过使用MVC设计模式支持关注的分离。
  5. 内置的属性(指令)使HTML成为动态的。
  6. 易于扩展和定制。
  7. 支持单页面应用程序。
  8. 使用依赖注入。
  9. 易于单元测试。
  10. REST友好。

安装AngularJS:

①新建一个web空项目

②添加NuGet程序包

③安装

一个简单的列子来看AngularJS的优势:

JQuery:

AngularJS:

上面的例子看起来像HTML代码,带有一些奇怪的属性和大括号,如ng-app,ng-model和{{}}。AngularJS中的这些内置属性被称为指令。

模板:

在AngularJS中,模板是带有额外标记的HTML。AngularJS编译模板并呈现结果HTML。

指示:

指令是DOM元素上的标记(属性),告诉AngularJS将特定的行为附加到该DOM元素,甚至转换DOM元素及其子元素。

AngularJS中的大部分指令都以ng开头。它代表Angular。在上面的例子中,我们已经应用了ng-app和ng-model指令。

ng-app:ng-app指令是一个起点。如果AngularJS框架在HTML文档中的任何地方找到ng-app指令,那么它自行引导(初始化)自己并编译HTML模板。

ng-model:ng-model指令将HTML元素绑定到 $ scope 对象上的一个属性。稍后了解该模型,但现在让我们将其视为模型属性。

在上面的例子中,我们已经将ng-model指令包含在名称为Num1和Num2的文本框中。AngularJS框架将在范围内创建两个名为Num1和Num2的属性,并将分配一个我们输入到文本框中的值。

表达:

表达式就像JavaScript代码,通常包含在{{表达式}}之类的双括号中。AngularJS框架评估表达式并产生一个结果。在上面的例子中,{{Num1 * Num2}}将只显示Num1和Num2的乘积。

AngularJS 一 简介以及安装环境的更多相关文章

  1. 【angularJS】简介

    简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑 ...

  2. AngularJS:简介

    ylbtech-AngularJS:简介 1.返回顶部 1. AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HT ...

  3. AngularJS - 服务简介

    服务是AngularJS中非常重要的一个概念,虽然我们有了控制器,但考虑到其生命实在脆弱,我们需要用到服务. 起初用service时,我便把service和factory()理所当然地关联起来了. 确 ...

  4. AngularJS结构简介

    AngularJS是MVC架构,M是C里面的属性-值,C是js的class,V是DOM 各个关键特性的结构如下图所示: http://my.oschina.net/tommyfok/blog/2970 ...

  5. AngularJs -- 指令简介

    整理书籍内容(QQ:283125476 发布者:M [重在分享,有建议请联系->QQ号]) HTML文档 HTML文档是一个纯文本文件,包含了页面的结构以及由CSS定义的样式,或者可以操作样式的 ...

  6. angularjs bootstrap 简介

    1.angular特色 数据双向绑定 模块化  var myapp=angular.module... 控制器  myapp.controller(){} 2.bootstrap特色 栅格结构  cs ...

  7. Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

    1.下载angularjs 进入其官网下载:https://angularjs.org/‎,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angular ...

  8. AngularJS入门 & 分页 & CRUD示例

    一.AngularJS 简介 ​ AngularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. ...

  9. angularJS开发环境搭建和启动

    本文目录:1.angularJS框架简介 2.angularJS环境搭建 3.启动一个项目 1.angularJS框架简介 AngularJS是一个开发动态Web应用的框架.它让你可以使用HTML作为 ...

随机推荐

  1. Oracle服务器重命名

    转载自:http://www.codesec.net/view/120387.html 因工作需要准备了一台服务器专门按照oracle数据库,并且服务器上安装了windows 2008R2操作系统,在 ...

  2. HAProxy advanced Redis health check---ref

    http://blog.exceliance.fr/2014/01/02/haproxy-advanced-redis-health-check/ HAProxy advanced Redis hea ...

  3. 一、IP地址

    IP地址 1)网络地址 IP地址由网络号(包括子网号)和主机号组成,网络地址的主机号为全0,网络地址代表着整个网络. 2)广播地址 广播地址通常称为直接广播地址,是为了区分受限广播地址. 广播地址与网 ...

  4. mysql 查两个表相同的值

    比如一个数据库 表A和表B 都有一个username字段, 现查出与表A中username值相同的表B的username和password数据 select B.username,B.password ...

  5. 当Activity出现Exception时是如何处理的?

    1.ActivityThread 2.PerformStop 在这里会调用mWindow.closeAllPanels(),从而关闭OptionMenu, ContextMenu.如果自己通过Wind ...

  6. IntelliJ IDEA 2017.3.5 安装 lombok-plugin-0.17 失败,通过网络下载总是超时

    1.问题: IntelliJ IDEA 2017.3.5 安装 lombok-plugin-0.17 失败,通过网络下载总是超时: 2.原因:IntelliJ IDEA 2017.3.5 目前还不支持 ...

  7. ie7下属性书写不规范造成的easyui 弹窗布局紊乱

    (一)在ie7下 弹窗只是普通页面 (二)控制台报错 (三)原因: (四)解决 去掉 data-options 属性里的  ,   就可以了

  8. java面试题之----super和this

    super和this的异同: super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句) this(参数):调用本类中另一种形成的构造函数(应该为构造函数中的第一条语句) supe ...

  9. solidity语言4

    引用类型(Reference Types) memory 不支持持久保存 storage 保留为变量 复杂类型如arrays和structs,有附加信息,'data location',提示存储在'm ...

  10. idea打jar包经验总结

    关于在idea下打jar问题,在日常工作中经常用到,这里总结下流程. 1.在项目上鼠标右键 --> Open Module Settings 2.如下图,点击 '+' 3. 选择JAR --&g ...