什么是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. 【数据分析知识点】detailed table of contents

    Exploratory Data Analysis - Detailed Table of Contents http://www.itl.nist.gov/div898/handbook/eda/e ...

  2. Java编程思想学习笔记——枚举类型

    前言 关键字enum可以将一组具名的值有限集合创建一种为新的类型,而这些具名的值可以作为常规的程序组件使用. 正文 基本enum特性 调用enum的values()方法可以遍历enum实例,value ...

  3. C语言的结构体

    举例,一个结构体的定义如下: typedef struct _foo { ]; int age; int sex; } foo; 对齐 如果直接对上面的结构体作sizeof()运算: printf( ...

  4. phpcms v9 添加内容出现500错误

    今天开发好一个网站,上传网站后,不知道安装的时候要求fsockopen()函数打开,我直接跳过安装完成的,所以搞得后面出错了,我一直以为这个问题,今天花了一天的时间找资料,测试,终于知道什么原因了,其 ...

  5. com.alibaba.fastjson.JSONObject

    package com.alibaba.fastjson; import java.util.Date; import java.util.List; import com.alibaba.fastj ...

  6. html+jquery制作网页地图

    http://jvectormap.com/ <!--StartFragment --> JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 ...

  7. Java Cookie工具类，Java CookieUtils 工具类，Java如何增加Cookie

    Java Cookie工具类,Java CookieUtils 工具类,Java如何增加Cookie >>>>>>>>>>>>& ...

  8. Linux init 命令

    init命令用于切换到指定的运行级别,用法如下: [root@localhost ~]# init //关机 [root@localhost ~]# init //切换到单用户模式/救援模式 [roo ...

  9. VS无法导航到插入点F12失败

    关闭VS 开启控制台并导航到Visual安装文件夹,例如C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\ID ...

  10. sqlserver连接问题收集

    问题1. 使用navicat连接本地sqlserver,报错“命名管道提供程序无法打开与 sql server 的连接 [2]” 解决: 参考本篇文章 <持续收集中>