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. 温故而知新,再探ConcurrentHashMap

    这里说的还是1.7的ConcurrentHashMap,在1.8中,ConcurrentHashMap已经不是基于segments实现了. 之前也知道ConcurrentHashMap是通过把锁加载各 ...

  2. 在 Flask 应用中使用 gevent

    在 Flask 应用中使用 gevent 普通的 flask 应用 通常在用 python 开发 Flask web 应用时,使用 Flask 自带的调试模式能够给开发带来极大便利.Flask 自带的 ...

  3. [转]Create Custom Exception Filter in ASP.NET Core

    本文转自:http://www.binaryintellect.net/articles/5df6e275-1148-45a1-a8b3-0ba2c7c9cea1.aspx In my previou ...

  4. ASP.NET 使用 AjaxPro 实现前端跟后台交互

    使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢.因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差. 引言 一.首先,还是那句 ...

  5. C# 创建一个WCF服务

    做代码统计,方便以后使用: app.config配置文件设置: <configuration> <system.serviceModel> <bindings> & ...

  6. RestTemplate请求出现401错误

    最近遇到一个请求API接口总是报401 Unauthorized错误,起初是认为这个是平台返回的,后来用Postman请求,发现平台其实返回的是一串json,里面带有一些权限验证失败的消息,但到我们代 ...

  7. [转]Tomcat优化之内存、并发、缓存

    1.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 JAVA_OPTS 参数. JAVA_OPTS ...

  8. Csharp: TreeView 初始化设置默认选择节点

    /// <summary> /// 设置查找的节点为选定节点 /// 涂聚文 /// 2013-07-15 /// </summary> /// <param name= ...

  9. 绘图和数据可视化工具包——matplotlib

    一.Matplotlib介绍 Matplotlib是一个强大的Python**绘图**和**数据可视化**的工具包. # 安装方法 pip install matplotlib # 引用方法 impo ...

  10. scss-算术运算符

    由于scss具有编程语言的特点,那么运算符是必不可少的. 下面就通过代码实例分别做一下介绍. 一.赋值运算符: 赋值运算符就是我们最为熟悉的冒号(:),用来给声明的变量赋值. 代码实例如下: $hig ...