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. Shader学习笔记

    Shader学习笔记 例子: Shader "SrfShader1"{ //定义显示在Inspector中的变量,并从Inspector中获取值 Properties{ _Colo ...

  2. 到底什么是promise?有什么用promise怎么用

    相信很多人刚接触promise都会晕,但学会后却离不开它,本文详细介绍一下promise,promise解决的问题,帮助新手快速上手 [扫盲] 什么是promise? promise是一种约定,并非一 ...

  3. MVC类库视图在UI使用方法

    在类库中固定文件:Controller Views  引用一下两个程序集(类库和UI项目都需要引用)(似乎只需要引用mvc的,build似乎在引用文件中不见了?有空测试一下) 如此方式,一个登录需要是 ...

  4. 使用Razor

    新建一个名称为Rezor的mvc空项目,定义一个模型内容 public class Product { //定义模型 public int ProductID { get; set; } public ...

  5. shell命令修改文件内容

    有个 test.txt 文件内容为  hello tom,现在修改成 hello jerry,并保存到test2.txt sed 's/tom/jerry/g' test.txt >test2. ...

  6. reload()与reload(true)

    如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已 改变.如果文档已改变,reload() 会再次下载该文档.如果文 ...

  7. 关于meta标签中的http-equiv属性使用介绍

    关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...

  8. PAT 1043 Is It a Binary Search Tree

    #include <cstdio> #include <climits> #include <cstdlib> #include <vector> co ...

  9. C++基础--字符串倒序输出

    (一)用基本的数组实现 #include "stdafx.h" #include <stdio.h> #include <string.h> int mai ...

  10. Eclipse Equinox DS(Declarative Service)

    Equinox DS's METE-INF/MANIFEST.MF Manifest-Version: 1.0 Lazy-ManifestFilter: (Service-Component=*) B ...