angularjs第一章
•angluarjs介绍
·什么是angularjs
•AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。
AngularJS有五个主要核心特性，如下介绍：
•双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
•模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
•MVVM —— 吸收了传统的MVC设计模式但又不是传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
•依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
•指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。
·为什么要用它
••前后端分离，后端只提供数据接口，路由，模板渲染等都在前端完成
•html和js分离,展示和逻辑分离
•减少JS代码,减少DOM元素查找，事件绑定等代码
•适合API开发
·资料
·菜鸟教程：http://www.runoob.com/angularjs/angularjs-tutorial.html
·api手册：http://docs.angularjs.cn/api/ng/service/$http#jsonp
·github地址：https://github.com/angular/angular.js
·angularjs入门教程：http://www.ituring.com.cn/minibook/303
·http://blog.jobbole.com/46779/
·使用angularjs
·引入ng
•<body ng-app=“”>
<input type=“text” ng-model=“name” />
<div>
{{name}}
</div>
</body>
·指令
·介绍
•AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。
AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。
AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”，它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称里，属性里，css类名里，注释里。
当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。
Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
·ng-app
•ng-app指令来标明一个AngularJS应用程序，并通过AngularJS完成自动初始化应用和标记应用根作用域，同时载入和指令内容相关的模块，并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。
引用方法很简单，如下所示：
<div ng-app>

</div>   
如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的”所有者”，在它里面的指令也就会被Angular编译器所编译、解析了。
·ng-init
•ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。
如下所示，我们为应用程序变量name赋定初始值。
<div ng-app=“” ng-init=“name=‘tangcaiye’”>

</div>
我们不仅可以赋值字符串，也可以赋值为数字、数组、对象，而且可以为多个变量赋初始值，如下所示：
<div ng-app=“” ng-init=“width=3;length=5”>

</div>
//或者

</div>
后面我们还会学习使用控制器来初始化数据的方式，接着我们来学习如何来调用这些已经初始化了的值。
·ng-model
·在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。
如下示例，使用ng-model指令对数据进行绑定。
<div ng-app=“”>

请输入任意值：<input type=“text” ng-model=“name”>

你输入的为： {{ name }}

</div>
ng-model把相关处理事件绑定到指定标签上，这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。
以上介绍了ng-model的单向绑定(view->model)后面控制器我们会用到它的双向绑定功能。
ng-model原理
1.angular加载完成之后会启动，首先找 ng-app指令
2.找到后认为ng-app里面的所有的内容都归angular来管
3.找子层标签里所有的指令，然后就可以找到ng-model
4.找到后会生成数据模型，然后挂在根作用域上面。
5.然后下面所有的标签都可以读取ng-model的值。
·表达式
·案例一
·<body ng-app=“” ng-init=“num1=0; num2=0;”>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” />
<div>
{{num1*num2}}
</div>
</body>
·案例2
·<body ng-app=“”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div>
{{name1 +” “+ name2}}
</div>
</body>
·初始化对象
·<body ng-app=“” ng-init=“person={name1:’hello’,name2:’’};”>
<input type=“text” ng-model=“person.name1” />
<input type=“text” ng-model=“person.name2” />
<div>
{{person.name1 +” “+ person.name2}}
</div>
</body>
·初始化数组
·<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<div>
{{arr[0]+arr[2]}}
</div>
</body>
·ng-bind
·指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。
如下使用ng-bind指令绑定把应用程序数据。
<div ng-app=“”>
    请输入一个名字：<input type=“text” ng-model=“name”>
    Hello <span ng-bind=“name”></span>
</div>
PS：使用花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。
·<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<div>
{{arr[2]}}
<!—<span ng-bind=“arr[2]”></span>—>
</div>
</body>
·ng-cllick
•AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。
对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：
<div ng-app=“” ng-init=“click=false”>
    <button ng-click=“click= !click”>隐藏/显示</button>
    <div ng-hide=“click”>
        请输入一个名字：<input type=“text” ng-model=“name”>
        Hello <span ng-bind=“name”></span>
    </div>
</div>
PS：ng-hide=“true”，设置HTML元素不可见。
ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，Angular就会调用相应的方法。
·ng-repeat
•ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。
ng-repeat指令对于集合中(数组中)的每一项都会渲染一次HTML元素。
•<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<ul>
<li ng-repeat=“x in arr”>{{x}}</li>
</ul>
</body>
•<body ng-app=“” ng-init=“arr=[{‘user’:’zhangsan’,’pass’:’1234’},{‘user’:’lisi’,’pass’:’54321’}]”>
<ul>
<li ng-repeat=“x in arr”>
<span>{{x.user}}</span>
<span>{{x.pass}}</span>
</li>
</ul>
</body>
•<body ng-app=“” ng-init=“arr=[{‘user’:’zhangsan’,’pass’:’1234’},{‘user’:’lisi’,’pass’:’54321’}]”>
<table border=“1”>
<tr ng-repeat=“x in arr”>
<td>{{x.user}}</td>
<td>{{x.pass}}</td>
</tr>
</table>
<input type=“text” ng-model=“arr[0].pass” />
</body>
•<body ng-app=“” ng-init=“obj={‘user’:’tangcaiye’,’pass’:’12345’,’sex’:’man’}”>
<table border=“1”>
<tr ng-repeat=“(key,value) in obj”>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</body>
·ng-class
•ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name
•<div ng-class=“{true: ‘active’, false: ‘inactive’}[isActive]”></div>
•<head>
<meta charset=“UTF-8”>
<title></title>
<style type=“text/css”>
.active{
color: red;
}
.inactive{
color: green;
}
</style>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”></script>
</head>
<body ng-app=“” ng-init=“isActive=false”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div ng-class=“{true:’active’,false:’inactive’}[isActive]”>
{{name1 +” “+ name2}}
</div>
</body>
·ng-include
•ng-include就是将多个页面的公共页面提取出来，如header.html，footer.html等，在每个页面用
<div ng-include=“’header.html’”></div>
来引入。
 
注意: 
1. 必须用web容器打开站点才能成功，用本地文件的模式访问会报错
2. ng-include的值是如果要写为文件名的话需要加单引号，否则会被当作一个变量来处理。

angular(一)的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. TypeScript: Angular 2 的秘密武器（译）

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  4. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

  5. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  6. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  9. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  10. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

随机推荐

  1. Linux（Ubuntu/Debian/CentOS/RedHat）下交叉编译boost库

    我用的软件版本如下(其他版本编译方法与此完全相同): Boost Ver: 1.55.0Compiler : GNU gcc 4.6 for ARM 1. 确保ARM编译成功安装,并配置好环境变量.2 ...

  2. Ubuntu设置中文-以及-安装拼音输入法

    2017-11-12更新 安装搜狗拼音: http://blog.csdn.net/iamplane/article/details/70447517 ------------------------ ...

  3. linux中mysql安装的问题

    Starting MySQL.Manager of pid-file quit without updating file.[FAILED] 已解决 这是由于系统中/etc/my.cnf文件本身存在或 ...

  4. Bootstrap学习笔记（6）--导航居中

    说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...

  5. NSString (NSStringPathExtensions)

    转自:http://linwwwei.iteye.com/blog/1407520 + (NSString *)pathWithComponents(NSArray *)components 根据co ...

  6. [config]关于make *config

    最近在编译uboot和kernel,二者的编译都有make *_defconfig的用法,而以前都是make menuconfig然后再make, 对于现在这种用法还不太了解,网上查了下,有人给出 如 ...

  7. Netty系列之Netty百万级推送服务设计要点(转)

    1. 背景 1.1. 话题来源 最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...

  8. 2018-11-17 js的this引起的血案

    js的this. 昨天测试,删除商品会报错,马上去测了一把,的确会报错.为毛线呢? SubOrderItem: function (orderitem) { if (orderitem.ordernu ...

  9. winxp退市是微软windows操作系统的滑铁卢

    winxp退市是微软windows操作系统的滑铁卢 兵败如山倒,windowsxp退市.宣布微软时代结束,windows将逐步退出中国市场,取而代之将是中国人自己的操作系统.中国人努力.中国人加油,不 ...

  10. 记一次线上Kafka消息堆积踩坑总结

    2018年05月31日 13:26:59 xiaoguozi0218 阅读数:2018更多 个人分类: 大数据   年后上线的系统,与其他业务系统的通信方式采用了第三代消息系统中间件Kafka.由于是 ...