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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容