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. ubuntu中mysql5.7表名区分大小写解决方案

    在/etc/mysql/mysql.conf.d/mysqld.cnf 添加lower_case_table_names=1

  2. UML建模—EA的使用起步

    Enterprise Architect(EA) 是一个功能比较强悍的建模工具. 对于一个软件设计者来说,从需求分析到业务设计.类模型设计.数据库设计到测试.发布.部署等一系列软件设计必须的操作都可以 ...

  3. 一个简单问题引发对IEnumerable和IQueryable的思考

    问题概述:    首先看下图,有客户表和客户负责人表关系是多对多,访问数据库使用的是EF所以这里我们开启了延迟加载,需求就是将每个客户的所有负责人逗号拼接显示在负责人这一栏位, 对你没看错需求就是这么 ...

  4. attribute和property的区别

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  5. java冒泡排序 常规排序和优化排序

    冒泡排序原理在于两两比较,看你需要把大值放最前面还是最后面, 我们看看把大值放在后面:比如数组[7, 5, 6] 开始排序第1个数字 :7 arr:[7, 5, 6] 开始排序第2个数字 :5 arr ...

  6. js图片上传并预览

    <form id="addpic" class="easyui-form" method="post" enctype="m ...

  7. IO流之IO的异常处理

    如果发生了IO的异常.我们在实际开发中,对异常时如何处理的,我们来演示一下. public class FileOutputStreamDemo3 { public static void main( ...

  8. composer 实用总结

    1.在windows 下配置php环境变量 我电脑------右键属性-----高级系统设置-----环境变量---点击path----添加php.exe路径到环境变量 C:\phpStudy\php ...

  9. javascript对象(2)

    这个对象,不是那个对象.续更第二篇.. 昨天说了对象的基本概念以及创建,今天来说一下它的其他方法: 1.访问属性的两种方式:点语法.[]语法 var dog =new Object(); dog.na ...

  10. Angular JS例子 ng-repeat遍历输出

    首先要有Angular的插件:然后才开始遍历 :<!DOCTYPE html> <html lang="en"> <head> <meta ...