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. 小型Basic编译器问题

    # include <stdio.h> # include <string.h> # include <ctype.h> # include <stdlib. ...

  2. web部署启动或者运行报错查看日志寻找问题方法

    今天运行一个项目,启动报错,查看日志,只看到了前半段错误日志,根据前半段错误日志差查找原因,找了两个小时,也没有解决掉,最后根据后半段错误日志十分钟定位错误,给解决了,以后出现问题不能急躁,查看完成的 ...

  3. 4.爬虫 requests库讲解 GET请求 POST请求 响应

    requests库相比于urllib库更好用!!! 0.各种请求方式 import requests requests.post('http://httpbin.org/post') requests ...

  4. IE中使用TerraExplorerPro ActiveX控件问题总结

    近段时间,由于工作需要,涉及到Skyline Web的二次开发,遇到一些问题: 问题1:IE中无法使用Skyline 提供的ActiveX Component 的API 解决方法:这个问题一般是没有正 ...

  5. [转]<加密算法c#>——— 3DES加密之ECB模式 和 CBC模式

    本文转自:http://www.cnblogs.com/qq278360339/archive/2013/06/05/3119222.html 最近 一个项目.net 要调用JAVA的WEB SERV ...

  6. 5、Angular2 Injectable 服务

    1.Injectable 

  7. python学习(六)--正则的一些例子

    import re #正则表达式#compile函数,--将正则表达式转变为内部函数,提高执行效率strr = "python123456"pattern = "Pyth ...

  8. 天气小雨, 心情多云, 练习标准的键盘ABC打法

    今天看到饿了么转型生活做千亿美元公司 突然想到一些就写下来 当时外卖一份8元 10元的年代那个开心啊 很久以前宁可跑个远, 都不愿意叫外卖 叫了大概1年的外卖了, 之前还感到便宜多样, 现在感觉到的是 ...

  9. Cocos2d-js 开发记录-初始

    GameDev标签很早就建了,现在终于可以往里面添加第一篇文章了. 最近和朋友在做几个小游戏,就是微信社交中的那些有点2的游戏,我自己也觉得有点傻,不过先从小的做起,平时想想挺简单的事情,一旦自己真做 ...

  10. Javascript: hash tables in javascript

    /** * Copyright 2010 Tim Down. * * Licensed under the Apache License, Version 2.0 (the "License ...