什么是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. 设计模式之初识IoC/DI（六）

    本篇和大家一起学习IoC和DI即控制反转和依赖注入. 当然听上去这词语非常的专业,真不知道是怎么组出来的,看上去难归看上去难,但稍微理解一下也就这么回事了. 首先我们要明白IoC/DI干嘛用的,不然别 ...

  2. Java开发者需要学习的移动开发编程语言

    编程语言(programming language),是用来定义计算机程序的形式语言.它是一种被标准化的交流技巧,用来向计算机发出指令.一种计算机语言让程序员能够准确地定义计算机所需要使用的数据,并精 ...

  3. JS去除字符串左右两端的空格

    去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim.ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写.下面的实现方法是用到了正则表达式,效率不错,并把这三 ...

  4. go语言中文网中的资源

    https://studygolang.com/subject/2     Go 系列教程 https://studygolang.com/subject/74   Go 语言机制 https://s ...

  5. python修改python unittest的运行顺序

    正常是一个测试类中按函数名字运行, 下面修改成直接按每个测试方法的代码顺序执行 文件 unittest_util.py import time import unittest from app.uti ...

  6. Oauth2.0（一）：为什么需要 Oauth2.0 协议？

    假设有两家互联网企业 A 和 B,其中 B 是一家提供相片云存储的公司.即 B 的用户可以把相片上传到 B 网站上长期保存,然后可以在不同的设备上查看.某一天,A 和 B 谈成了一项合作:希望 B 用 ...

  7. Android安装器学习笔记（一）

    Android安装器学习笔记(一) 一.Android应用的四种安装方式: 1.通过系统应用PackageInstaller.apk进行安装,安装过程中会让用户确认 2.系统程序安装:在开机的时候自动 ...

  8. 【Oracle】BLOB

    1．データベースからの読み込み Dim strSql As String = "select IMG from TBL where ID=XX" Dim cmd As New Or ...

  9. luanet性能测试

    测试环境 intel-i5 双核 2.53HZ 服务器客户端均在本机运行 测试内容:echo回射,每个包的字节数在20字节内 luanet 连接数 每秒回射数 1 19,000/s 10 12,500 ...

  10. js元素闪动效果

    <img src="http://yjy.allbring.com/UpLoadFiles/head/p1_20140326104945_17-10164142709.jpg" ...