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>