去年就接触过AngularJS吧，只可惜那时候仅仅是跟着“老大”机械的完成了“饿了么”——一个单页面的手机App，而其中的什么原理，怎样来实现，自己也是似懂非懂，直至今天自己再次拿起来它，并一个人来研究它，原来是原理是酱紫滴~~

1.AngularJS 是一个 JavaScript 框架，它可通过 <script> 标签添加到 HTML 页面——>只是需要在官网上下载最新的版本，并将其引入到自己的项目当中即可。官网地址：

https://angularjs.org/

选择好版本，将js文件引入便可，如：

<script src="js/angular.js"></script>

酱紫，就可以使用它了~~

2.开始Hello 执行吧~（从简单的例子开始）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="js/angular.js"></script>

</head>

<body>

<div ng-app="">

  <p>名字 : <input type="text" ng-model="name"></p>

  <h1>Hello {{name}}</h1>

</div>

</body>

</html>

效果是酱紫滴~：

只要在文本框中输入值，在Hello后面就会出现相应的值，这也就证明了angularjs的数据绑定优势。而在这段代码之中，还有几个知识点可以拿出来单独学一下：

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"，也可以将它放在<body>中，这个不可以省略；

ng-model 指令把输入域的值绑定到应用程序变量 name；

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

但是移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

3.学习模块以及控制器应用（Module、Controller）

ng-app指令定义了应用, ng-controller 定义了控制器。

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{firstName + " " + lastName}}

</div>

<script>

var app = angular.module('myApp', []);//注册myApp模块

app.controller('myCtrl', function($scope) {//注册myCtrl控制器

    $scope.firstName= "John";

    $scope.lastName= "Doe";

});

</script>

Angularjs学习——（一）的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  5. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  6. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  10. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

随机推荐

  1. C# 导出数据至 CSV

    有时候将Excel的数据另存到csv文件会出现csv格式错误,以下示例实现将DataTable里面的数据直接保存到csv文件. System.Web.HttpRuntime.Cache["v ...

  2. 对称加密DES和TripleDES

    一.  对称加密 对称加密,是一种比较传统的加密方式,其加密运算.解密运算使用的是同样的密钥,信息的发送者和信息的接收者在进行信息的传输与处理时,必须共同持有该密码(称为对称密码).因此,通信双方都必 ...

  3. UpdatePanel的简单用法（转）

    微软AJAX虽然是过时的玩意,但是得维护公司之前的老项目,转载看看. 局部更新是ajax技术的最基本,也是最重要的用法,今天大概把asp.net ajax中的局部更新控件 updatepanel的用法 ...

  4. java中类名.class、实例.getclass()区别

    import java.util.HashSet; import java.util.Iterator; /** * Created by GOD on 2016/1/23. * Class对象的生成 ...

  5. ubuntu linux 使用常见问题

    Q:gedit不支持windows下的中文显示 A:http://wiki.ubuntu.org.cn/Gedit%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81 Q:bash ...

  6. POJ-2175 Evacuation Plan 最小费用流、负环判定

    题意:给定一个最小费用流的模型,根据给定的数据判定是否为最优解,如果不为最优解则给出一个比给定更优的解即可.不需要得出最优解. 解法:由给定的数据能够得出一个残图,且这个图满足了最大流的性质,判定一个 ...

  7. iOS - Alamofire 网络请求

    前言 Alamofire 是 Swift 语言的 HTTP 网络开发工具包,相当于 Swift 实现 AFNetworking 版本.当然,AFNetworking 非常稳定,在 Mac OSX 与 ...

  8. SAP接口编程 之 JCo3.0系列(05) : Exception Handling

    JCO3.0的Exception,常用的Exception如下: JCoException 继承自java.lang.Exception,是JCo3中Exception的基类. JCoRuntimeE ...

  9. [转载] goroutine背后的系统知识

    原文: http://www.sizeofvoid.net/goroutine-under-the-hood/ 文章写的非常好, 对内部原理解释的非常清楚, 是我喜欢的风格, 感谢作者的精彩文章. = ...

  10. Data Deduplication in Windows Server 2012

    https://blogs.technet.microsoft.com/filecab/2012/05/20/introduction-to-data-deduplication-in-windows ...