什么是AngularJs？

　　angularjs是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。这些全都通过浏览器端的javascript实现，这也使得它能够完美地和任何服务器技术结合。

　　AngularJS简单的Helloworld例子：

<!DOCTYPE HTML>

<!-- 告诉AngularJs引擎从这里开始是ng-app管理 -->

<html lang="en-US" ng-app>

<head>

    <meta charset="UTF-8">

    <title>AngularJS例子</title>

</head>

<body>

    <!-- ng-model数据模型 -->

    <input type="text" ng-model='name' placeholder="yourname" />

    <!-- {{}}angular表达式 -->

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

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>

</body>

</html>

这个例子其实展示了angularjs的数据双向绑定，

　　左边为数据单向绑定图解，通常是要你管jquery，backbone这类框架，     右边为angularjs数据双向绑定。

　　模型 视图 控制器（MVC）

　　MVC背后的核心概念就是，你在你的代码之间明确分离管理数据（模型），应用程序逻辑（控制器），并将数据给用户（视图）。

　　视图从模型中获取数据展示给用户。当用户通过点击或者输入和应用程序进行交互时，控制器通过改变模型中的数据响应。最终，模型层通知视图层，已经发生改变，一边更新显示。

　　在Angluar应用中，视图层就是DOM，控制器就是Javascript类，模型数据存储在对象属性中。

　　angularjs数据绑定

　　像jquery库这种扩展到客户端的模式，让我们遵循相似的风格，但由于更新的能力，单独地DOM的部分，而不是更新整个页面。这里，我们合并HTML字符串和数据，然后通过元素上设置innerHTML将结构插入到我们想要的Dom中。

　　这一切都运行的相当好，但是你想将新数据插入到界面，或者改变基于用户输入的数据时，你需要做很多又不是价值不高的工作，来确保同时在界面和javascript属性中获取的数据正常的状态。

　　但是，倘若我们有什么东西把这些工作都为我们做好了，同时不需要写代码？倘若我能仅仅声明界面的某一部分映射到javascript的属性，让他们自动的同步？这种编程方式叫做数据绑定。我们在angular中包括这种功能，因为当编写视图和模型时，使用mvc来消除代码那是非常棒的。移动数据从一个地方的绝大部分自动发生。

注：最上面的例子就能体现

　　依赖注入（DI）

　　$scope对象把数据绑定自动的传递给了我们。我们没有必要通过调用任何函数来创建它。我们只是要求把它放到HelloController构造函数中。

　　在后续学习中，我们发现，$scope并不是我们唯一需要的。如果我们需要数据绑定它到用户浏览器指定的URL地址中，我们需要在构造函数中，添加一个$location对象，就这样：

function HelloController($scope,$location){

    $scope.greeting={text:'Hello'}

    //使用$location 在这

}

　　通过Angular的依赖注入系统，我们可以得到这种效果。依赖注入允许我们遵循一种开发风格，这种开发风格中，不是创建依赖，我们的类仅仅添加他们需要的。

　　这个遵循了一个叫迪米特法则的设计模式，也被称作最少知识法则。由于HelloController的任务是建立greeting模型的初始值，这种模式就是说，它不需要担心像$scope如何创建以及在那里找到它。

　　angularJs指令

　　angular最优秀部分之一是你可以把你写的模板当成HTML。因为在框架的核心层，我们已经包括了一个强大的DOM转换引擎，可以让你扩展HTML语法，因此你才可以这样做。

　　我们已经在模板文件中看到了多个新的属性，这些并不是HTML规范的一部分。示例中包括两个大括号是用来数据绑定的，ng-controller是用来指定那个控制器来服务那个师徒，ng-model将一个输入框绑定到模型部分。我们称这些叫HTML扩展指令。

　　angular带有很多标识符，帮助你为你的应用程序定义视图。这些标识符可以定义我们常见的视图作为模板。它们可以说明应用程序如何工作的或者创建可重复使用的组件。

　　同时不局限于Angular自带的标识符。你可以写你自己的来扩展HTML模板，做任何你想做的事。

　　angularjs的的模块管理参见如何组织大型JavaScript应用中的代码？.

AngularJS初始（一）的更多相关文章

  1. AngularJS初始用之 中间件 connect .static 静态文件不能找到

    学习心得,软件更新太快,学习不能照书本. 在学习搭建Nodejs服务器时,掉坑了啦,太坑了,对于什么都不知道的初学者,开门就是坑...,怎么坚持学下去... 还好,现在的世界很大,如果你发现自己不是犯 ...

  2. 初始AngularJS

    <!-- AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑 ...

  3. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  4. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  5. (转)构建自己的AngularJS，第一部分：Scope和Digest

    原翻译链接:https://github.com/xufei/Make-Your-Own-AngularJS/edit/master/01.md 原文链接:http://teropa.info/blo ...

  6. angularJS实用的开发技巧

    一.开端 真的是忙完这一阵子就可以忙下一阵子了啊... 最近在做一个angularJS+Ionic的移动端项目...记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^ 二.基础原则了 ...

  7. AngularJS 模块& 表单

    模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...

  8. AngularJS（1）

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  9. 基于AngularJS的个推前端云组件探秘

    基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...

随机推荐

  1. daterangepicker日历插件使用参数注意问题

    显示具体时间时分秒: timePicker设置为true,//有些资料写的pickerTime不太对 重点大坑:修改时间默认展示格式,把fomat写在locale中,网上很多资料说直接写在datera ...

  2. python通过标准输入读取内容，读取键盘输入的内容?接收用户输入？

    需求说明: 在交互式脚本中,需要用户手动输入内容,并对内容进行处理.在这里记录下通过 python的内置函数input()读取标注输入的内容.默认的标准输入是键盘. 操作过程: 1.通过input() ...

  3. nginx 配置虚拟主机的三种方法

    nginx,一个server标签就是一个虚拟主机. 1.基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2.基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站,外部网站的管 ...

  4. Spring中可以复用的工具类&特性记录

    Spring 里有用工具类: GenericTypeResolver 解析泛型类型.核心逻辑还是调用 ResolvableTypeResolvableType 解析泛型类型 BeanWrapper 利 ...

  5. Linux od命令（以指定进制显示文件）

    从“读取二进制文件”出发,到od命令的使用 在桃村实习期间,一直努力做毕业设计,我的毕业设计中有一个内容就是读取SEGY文件.在读取文件时,经常遇到的问题时你要读取浮点型数据,这时你就必须考虑你所使用 ...

  6. 如何编写一个SQL注入工具

    0x01  前言 一直在思考如何编写一个自动化注入工具,这款工具不用太复杂,但是可以用最简单.最直接的方式来获取数据库信息,根据自定义构造的payload来绕过防护,这样子就可以. 0x02 SQL注 ...

  7. 解决ora-01034和ora-27101错误

    使用plsql登录oracle数据库,提示如下错误: 定位原因:tnsnames.ora文件中数据库的配置参数有误所致 解决办法:将SERVICE_NAME修改为SID即可

  8. CentOS7--su和sudo

    在某些情况下, 以root用户身份访问系统有潜在危险,并可能导致系统和数据损害.我们可以用setuid程序,例如su和sudo解决. su命令 [app01rot@app-01 ~]$ su - ro ...

  9. 在input中既隐藏边框，也隐藏轮廓的设置

    在设置input的时候,我们往往不想显示边框,所以通常会在css里面写"border"none",但是结果往往差强人意,如下图 我们这个时候可以加一个属性来把它的轮廓也隐 ...

  10. XML的基本用法

    一.概述 XML全称为可扩展的标记语言.主要用于描述数据和用作配置文件. XML文档在逻辑上主要由一下5个部分组成: XML声明:指明所用XML的版本.文档的编码.文档的独立性信息 文档类型声明:指出 ...