angular:库、框架！
是一个mvc的框架！
衍生出来好多其他名称：mvp mvvm mv*...
现阶段比较火！------谷歌一直在推用！
angular不仅仅是因为谷歌在推它使用它，它才火的，是因为它本身有很大的优点！
为什么angular叫mvc框架呢？
m-----model 数据
v-----view 视图
c-----conteroller 控制器
****用控制器把数据展示（视图）出来
操作数据！----靠谱的框架！（减少了很多dom操作）
以后大家写angular项目的时候最好放在服务器里面！
学习一个库最最最最简单的了解就是撸它的官网对吧:进入官网：https://angularjs.org/
目的：1.为了下载这个库 2.为了查看它的手册
说一下angular版本
1.2.x 之前的版本---有很大问题！
1.3.x 之后版本
1.3.10---现在公司大多都用这个！
1.4.2
2.x.x 全新版本。完全是一个新库！里面用法大改！
怎么玩这东西？
1.引入咱angular----专门来pc端的！
***只要一引入框架，那么就可以使用angular的基本功能！
2.开始使用里面一些基本功能用法：
angular.bind(this的指向,函数)
function show(){alert(this);}
//show.call(12);
var c=angular.bind(12,show);
c();
angular.copy(克隆谁,克隆到哪里去);
***同类型！
angular.equals(a,b)----比较俩个东西是否相等！
里面都是NaN的是true！
angular.forEach() ------用来循环的！
angular.forEach(循环对象,function(值,k){//value,key
//console.log(v);
console.log(k);
})
可以循环json arr 普通！
angular.isArray() 判断它是否是一个数组！
--------------------------------------------------
angular.isDate() 判断是否是一个日期！
--------------------------------------------------
angular.lowecase() 转小写！
-------------------------------------------------
angular.module() -----模块化开发！！！
***重点内容，后面主要会说！
--------------------------------------------------
基本用法：
angular开发采用的机制：命名空间机制！
比如：
css：
.css-red{}
.css-blue{}
js:
var web={}
web.add={}
web.add={}
模板：
{$name}
主要以数据为主！
ng-model="a" -----定义一条数据！
<span>{{a}}</span> {{a}}{{a}}---展示数据！
给他们父级添加： ng-app----开启angular的应用模式：或者说是一个管辖范围！
***注意：
1.ng-app页面中只能有一个！（第一管用后面的不管用！）
2.建议大家把它放在html标签里面！一下是俩种数据展示方式：
<input type="text" ng-model="a"><br/>
<span>{{a}}</span>---建议用这个
<span ng-bind="a"></span>---绑定一个数据展示
=====================================================
ng-name 统一称为：指令
指令（directive）作用：
扩展html语法
学了几个指令：
ng-app
ng-model="" 定义一个数据！
ng-bing="" 绑定一个数据展示出！
------------------------------------------------------------------
让一个div消失！
ng-show="true/false"
ng-hide="true/false"
=================================================
点击按钮让一个块元素显示隐藏：
<div ng-init="a=false">//定义一个初始数据（变量a=false）
<input type="button" value="按钮" ng-click="a=!a"/><br/>（点击按钮时改变a的值）
<div id="box" ng-show="a"></div>（最后把这个值给ng-show）
</div>
事件:
ng-click="a=!a"
ng-mouseover="a=!a"
ng-mouseout="a=!a"
.................................
-------------------------------------------------------------------------------------
介绍一个比较重量级的指令：
指令里面也有一个东西也是做循环的！
ng-repeat="" 循环！
<div ng-init="arr=['智能社','淘宝网','百度一下','阿里巴巴','京东网']">
<ul>
<li ng-repeat="value in arr"></li>
</ul>
</div>
======================================================
以上的代码少点东西：（上面一直在讲m和v）
其实是少C---控制器！
-----------------------------------------------------------------------------------------
angular控制器---稍微有点繁琐！
步骤:
1.首先就是定义一个控制器！
function show（$scope）{//在这个里面叫定义控制器！
//$scope全局对象 有点类似于window
$scope.a=12;
}
<div>{{a}}</div>
-------------------------------------------------------------------
$scope
属于angular特色：
双向数据绑定、依赖注入！
依赖注入：$scope是固定的，写死！ 跟顺序无关！
function show(b,a){} ----->show(12，34)
======================================
1.3.10版本没有上面定义控制器的方法！！！
新方法：（修改上面1.0以前定义控制器方法）
****采用了：模块化的开发！
注意：定义控制器改变了，展示数据的时候没变！
//angular.module(模块名，[依赖模块]，配置函数)；
var mk=angular.module(模块名,[])
***angular.module里面必须默认保持有两项！
===============================================
1.先创建一个模块:
var app=angular.module('app',[])
2.把模块名字给ng-app
3.在模块里面定义一个控制器:
app,controller('show',function($scope)){
$scope.a=12;
}
4.展示控制器里面的数据:
<div ng-controller="show">{{a}}</div>
网友评论