什么是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. .net的session详解 存储模式 存到数据库中 使用范围与大小限制 生命周期

    Session又称为会话状态,是Web系统中最常用的状态,用于维护和当前浏览器实例相关的一些信息.举个例子来说,我们可以把已登录用户的用户名放在Session中,这样就能通过判断Session中的某个 ...

  2. jenkins 如何处理windows batch command

    这两天一直被一个问题困扰. 在jenkins的windows batch command 测试好的,拿到bat文件中,再从Execute Windows Batch command 中调用这个bat, ...

  3. PyCharm搭建pyqt5开发环境

    PyCharm搭建PyQt5开发环境 1.安装PyQt5 2.PyCharm环境配置 2.1 添加QtDesigner 2.2 添加PyUIC 2.3 添加Pyrcc 2.4 添加assistant ...

  4. mysql中如何删除表上的索引?删除索引?

    需求描述: 今天在做SQL的优化的时候,想要把mysql中某个表上的索引删除掉,突然忘记语法了,找到帮助,在此记录下 操作过程: 1.查看表上的索引 show index from ti_o_sms; ...

  5. git 使gitnore立即生效

    由于之前有些需要过滤的文件已经提交到版本库了,之后再想起来添加时候已经晚了,使用如下方法 Git忽略规则和.gitignore规则不生效的解决办法   Git忽略规则: 在git中如果想忽略掉某个文件 ...

  6. 7 -- Spring的基本用法 -- 7... 创建Bean的3种方式

    7.7 创建Bean的3种方式 ① 调用构造器创建Bean. ② 调用静态工厂方法创建Bean. ③ 调用实例工厂方法创建Bean. 7.7.1 使用构造器创建Bean实例. 使用构造器来创建Bean ...

  7. grid网格的流动grid-auto-flow属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Python easyGUI 文件浏览 显示文件内容

    #提供一个文件浏览夹.让用户选择需要打开的文件,打开并显示文件内容: import easygui as g import os msg='浏览文件并打开' title='测试' default='D ...

  9. 【Cesium】模型转换和使用（转）

    http://52.4.31.236/convertmodel.html https://blog.csdn.net/UmGsoil/article/details/74572877 var view ...

  10. 【代码审计】LaySNS_v2.2.0 System.php页面存在代码执行漏洞分析.

      0x00 环境准备 LaySNS官网:http://www.laysns.com/ 网站源码版本:LaySNS_v2.2.0 程序源码下载:https://pan.lanzou.com/i0l38 ...