Angular基础教程(一)

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容