什么是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. 用Python写简单的爬虫

    准备: 1.扒网页,根据URL来获取网页信息 import urllib.parse import urllib.request response = urllib.request.urlopen(& ...

  2. 详解MathType中如何更改公式颜色

    在MathType数学公式编辑器中可以通过更改公式颜色,起到美化.标注公式的效果.本教程将详解MathType中如何更改公式颜色. 点击菜单栏中的样式->格式->颜色,用户就可以根据自己的 ...

  3. 【机翻】Deep Plug-and-Play Super-Resolution for Arbitrary

    论文 (PDF) Deep Plug-and-Play Super-Resolution for Arbitrary Blur Kernels https://www.researchgate.net ...

  4. 【搞笑签名】390个qq个性昵称或签名,周末前娱乐一下

    1 来瓶82年的矿泉水 2 名不正则言承旭 3 天涯何处无芳草,还是母乳喂养好 4 她的妈妈不爱我 5 你丫的 6 农夫三拳 7 猪嚼在恋√痛 8 马驴脸猛鹿 9 小白兔兽性大发 10 曰捣一乱 11 ...

  5. Linux less 常用导航命令

    linux中经常用less来查看文件,文件较短的时候用pgup(pageup), pgdn(pagedown),↑,↓几个键够,但是当文件比较长的时候用一些快捷键就能很方便实现快速导航. 1. 按匹配 ...

  6. [Scikit-learn] 2.1 Clustering - Gaussian mixture models & EM

    原理请观良心视频:机器学习课程 Expectation Maximisation Expectation-maximization is a well-founded statistical algo ...

  7. SpringBoot自动配置xxxAutoConfiguration 的使用

    https://sdqali.in/blog/2016/07/16/controlling-redis-auto-configuration-for-spring-boot-session/ 常用的类 ...

  8. SpringBoot------添加保存时自动编译插件

    .右键Java项目 .选择“Spring Tools” 3.选择“Add Boot DevTools” 4.每次使用Ctrl + S键时就会自动编译了 实际上是在Pom.xml文件中添加了如下Java ...

  9. Hibernate_day04讲义_使用Hibernate完成对客户查询的优化

  10. logback -- 配置详解 -- 二 -- <appender>

    附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...