走进AngularJs(一)angular基本概念的认识与实战 -

liujiekasini0312

浏览: 147407 次
性别:
来自: 北京

最近访客更多访客>>

hbyufan

wangyy

u013080011

answer0706

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-01 ( 12)
2016-12 ( 68)
2016-11 ( 65)
更多存档...

走进AngularJs(一)angular基本概念的认识与实战

一、前言

　　前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，作为一名业界新秀，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。当听到AngularJs这个名字并知道是google在维护它时，便一直在关注，看到其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。朝思暮想良久，决定深入学习angular，并写系列博客，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。

　　首先我自己是一名学习者，会以学习者的角度来整理我的行文思路，故该系列博客也不能叫做教程，只能是些探索，有理解或是技术上的错误还请大家指出。其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽可能多的用示例加代码讲解，我相信这会是一钟比较好的方式。最后，我深知在现有条件下对于angular的学习会困难重重，不过我更相信坚持的力量，所以谨以此文作为日后学习的动力，让我们一起来走进angular的世界吧~

二、AngularJs是什么

　　这个定义一定要定准了，AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像backbone一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强，有图有真相，请看官网描述：

　　何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。

　　为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。这些我将在以后的学习中一一研究。

　　另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。

　　好吧，MVW。W—whatever。随便是MV什么好了，所以也有人写为了MV*。其实纠结这个也真没必要，等今后对整个框架熟悉了，其中结构自然了然于心。

三、开始运行angular

　　有了一个大概的朦胧的了解就够了，我相信很多概念在使用的过程中会慢慢清晰。我迫不及待的想要让angular运行起来了。动手~

　　首先从官网http://angularjs.org/下载angular.js，引入你的页面中，然后我们使用最简单的手工启动方式，直接调用bootstrap方法。所有的代码如下：

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />  
<title>运行ng</title>
<script type="text/javascript" src="../angular.js"></script>
</head>
<body>
<div>
    1+1={{1+1}}
</div>   
<script>
angular.bootstrap(document,[]);
</script>
</body>
</html>

　　只有一行代码。调用bootstrap方法传入作用域和初始化的模块数组（此处为空）。是不是很简单。你很快会看到一处比较特别的，就是这里：

<div>
    1+1={{1+1}}
</div>

　　如果你使用过其他模板库，应该对这种写法不陌生了，{{}}双大括号，这是ng的模板中用于书写表达式的标记，ng成功运行起来后，{{}}内的表达式会生效，即页面会显示如下：

　　为了不让你把ng看的这么简单，我必须告诉你一般是不这么启动的，来看稍微修改以后的代码:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />  
<title>运行ng</title>
<script type="text/javascript" src="../angular.js"></script>
</head>
<body>
<div>
    1+1={{1+1}}
</div>
   
<script type="text/javascript" charset="utf-8">
var app = angular.module('MyApp', [], function(){console.log('started')});
</script>
</body>
</html>

　　在<html>标签上多了一个属性ng-app=”MyApp”，它的作用就是用来指定ng的作用域是在<html>标签以内部分。在js中，我们调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。关于如何声明、使用模块我们在后面会讲。现在我们只要明白用这种方式可以优雅的让ng运行起来就可以了。

四、模板与数据的绑定

　　首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候，曾经用js拼接出很长的HTML字符串，然后append到页面中，这种方式想想真是又土又笨。后来又看到可以把HTML代码包裹在一个<script>标签中当作模板，然后按需要取来使用。在ng中，模板十分简单，它就是我们页面上的HTML代码，不需要附加任何额外的东西。在模板中可以使用各种指令来增强它的功能，这些指令可以让你把模板和数据巧妙的绑定起来。

　　绑定这个东西可是ng中的大功臣了。在我们使用jQuery的时候，代码中会大量充斥类似这样的语句：var v = $(‘#id’).val();$(‘#id’).html(str);即频繁的DOM操作（读取和写入），其实我们的最终目的并不是要操作DOM，而是要实现业务逻辑。ng的绑定将让你摆脱DOM操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。

　　我构思了一个小例子，本篇文章的示例将围绕这个小例子来进行。我猜你已经厌倦了登录模块或者是购物车示例，我们来点新颖的。我已化身为一名教师，我要用一个web应用来为学生出一份在线试题。首先从一道题开始吧~

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />  
<title>模板数据绑定</title>
<script type="text/javascript" src="../angular.js"></script>
</head>
<body>
<div ng-controller="testC">
    <h1>{{newtitle}}</h1>
    题目:<input type="text" ng-model="name" /><br />
    分数:<input type="text" ng-model="fraction" /><br />
    <hr>
    <h1>{{previewtitle}}</h1>
    <b>{{name}}</b>({{fraction}}分)
</div>
<script type="text/javascript" charset="utf-8">
var app = angular.module('MyApp', [], function(){console.log('started')});
var testC = function($scope){
    $scope.newtitle = '新建试题';
    $scope.previewtitle = '预览试题';
    $scope.name = $scope.fraction = '';
}
</script>
</body>
</html>

　　页面上有分别表示题目和分数的两个输入框，下面有一个实时预览区域，用来展示题目的最终输出效果。ng-controller=”textC”用来声明一个需要和数据进行绑定的模板区域，它的作用域就是这个div之内的东西，并起名为textC，js代码中定义了一个名为textC的函数与它对应，我们将在这个函数内完成绑定。函数传入一个参数$scope，表示这个作用范围。我们分别为作用范围内的newtitle、previewtitle、name、fraction四个变量赋值。此时<h1>标签内的{{}}便能得到相应的值了。

　　通过{{}}只能完成数据向模板的单向绑定。要想进行双向绑定，我们需要用到ng-modle这个指令，我们使用它分别为题目和分数进行了双向绑定，这样当输入框内的值发生变化时，函数中的变量也会跟随变化，它的变化会实时反馈在下方的预览区域中，因为预览区域中也有一个name和fraction的绑定。

　　试试在下面的输入框中进行编辑吧~

　　我们并未进行任何DOM操作，框架自动完成了DOM的取值和赋值。在后面我将继续完善这个例子，并引入更多的新概念。

五、模板中的一些控制方式

　　我们在使用其他模板库时，一般都会有模板的循环输出、分支输出、逻辑判断等类似的控制。ng模板中都可以进行哪些控制呢？来一块探索之。

1.循环输出

　　继续上面的例子。试题光有题目和分数还不够，我想要出一道选择题，可以自己添加若干选项并编辑选项内容，代码该怎么写呢？先上代码：

　　HTML部分：

<div ng-controller="testC">
    <h1>{{question.newtitle}}</h1>
    题目:<input type="text" ng-model="question.name" /><br />
    分数:<input type="text" number ng-model="question.fraction" /><br />
    选项:<button ng-click="addOption()">增加选项</button><br />
    <ul>
        <li ng-repeat="o in question.options">
            <b>{{$index+1}}.</b>
            <input type="text" ng-model="o.content" value="o.content" />
            <a href="javascript:void(0);" ng-click="delOption($index)">删除</a>
        </li>
    </ul>
    <hr>
    <div >
        <h1>{{question.previewtitle}}</h1>
        <b>{{question.name}}</b>({{question.fraction}}分)
        <ul>
            <li ng-repeat="o in question.options">
                <b>{{$index+1}}.</b>
                <input type="radio" name="optcheck" />
                {{o.content}}
            </li>
        </ul>
    </div>
</div>

　　js部分：

var app = angular.module('MyApp', [], function(){console.log('started')});
var questionModel = {
    newtitle : '新建试题',
    previewtitle : '预览试题',
    name : '',
    fraction : '',
    options : []
};
app.controller('testC',function($scope){
    $scope.question = questionModel;
    $scope.addOption = function(){
        var o = {content:''};
        $scope.question.options.push(o);
    };
    $scope.delOption = function(index){
        $scope.question.options.splice(index,1);
    };
});

　　请注意我的js代码有了一点变化，在数据绑定时没有直接写成字符串，而是将所有的数据写成了一个questionModel对象，这只是一个普遍的js对象，这样能够使我们的数据看起来像是“model”的样子，毕竟我们是MV*嘛。那么在模板中，我们使用name的地方也改成question.name，其他的值也同理。另外在controller部分，我没有用var textC = function(){}这样的写法，而是改成了app.controller(‘textC’,function(){})，这样明确指定了这个controller属于MyApp这个模块，我们的MV*代码看起来更专业、更一体了。

　　在HTML部分我分别在新建区域和预览区域添加了一个列表，用来放置各选项。并添加了一个“增加选项”按钮。在<li>标签上使用了ng-repeat指令来进行循环输出，<li>标签将会根据$scopt中的options数组长度被复制多份。在循环范围内，可以使用$index获得当前循环的索引，可以认为这是一个公共变量，直接使用。同时，循环输出的每个<input>元素也使用ng-model与选项的内容进行了双向绑定。另外还输出一个删除链接，点击的时候调用$scope中的delOption方法。

　　这样绑定好之后，模版中的列表与数据模型中的options数组便保持了同步，我们在页面上点击增加选项，数组中便会增加一个元素，数组中的每个元素也会实时反馈在模板中。所以在js代码中，我们只须操作options数组就够了，压根不需要在页面上append或removed节点。

　　你可以在下面点击增加选项和删除试试~

　　2.单个节点的控制

　　在上面的例子中，你是不是发现了，我在处理按钮的点击时，使用了叫做ng-click的指令，为什么不直接用onclick呢？是因为ng根据自己的需要进行了封装。我们把addOption这个函数定义在了controller范围之内，用我们常规的onclick已经无法访问到。换言之，我们页面上的作用域，ng已经帮我们都规划好了，我们只需按照它提供的方式来使用就够了。

　　通过onclick我们可以联想到，HTML节点还有好多其他属性，如class、style、href、checked、disabled等等，ng对这些都一一进行了封装，更厉害的是，除此之外ng还额外提供了许多更加详细的控制节点的指令。这些指令我以后会详细研究，在这里，我们先拿个其中一个应用到我们的例子中，看看效果先。

　　我马上变回老师身份，哗~

　　我新建试题的时候，不要局限于单选题，我想要在单选题和多选题之间能够切换，同时下方的预览区域内，选择框也进行单选框和多选框的切换。上代码：

　　HTML部分：

<div ng-controller="testC">
    <h1>{{question.newtitle}}</h1>
    题目:<input type="text" ng-model="question.name" /><br />
    分数:<input type="text" ng-model="question.fraction" /><br />
    类型:<select ng-model="question.type"><option value="1" selected>单选</option><option value="2">多选</option></select><br />
    选项:<button ng-click="addOption()">增加选项</button><br />
    <ul>
        <li ng-repeat="o in question.options">
            <b>{{$index+1}}.</b>
            <input type="text" ng-model="o.content" value="o.content" />
            <a href="javascript:void(0);" ng-click="delOption($index)">删除</a>
        </li>
    </ul>
    <hr>
    <div preview-panel>
        <h1>{{question.previewtitle}}</h1>
        <b>{{question.name}}</b>({{question.fraction}}分)
        <ul>
            <li ng-repeat="o in question.options">
                <b>{{$index+1}}.</b>
                <input type="radio" name="optcheck" ng-show="question.type==1" />
                <input type="checkbox" ng-show="question.type==2" />
                {{o.content}}
            </li>
        </ul>
    </div>
</div>

　　Js代码中，我只是在questionModel中新增了一项type:1，表示题的类型，1为单选，2为多选。并给默认值为1.

var questionModel = {
    newtitle : '新建试题',
    previewtitle : '预览试题',
    name : '',
    fraction : '',
    type : '1',
    options : []
};

　　在HTML中，我新增了一个下拉框，并与question.type建立双向绑定。需要关注的是下面的预览区域。我又添加了一个checkbox控件来为多选题提供选择框。显然，radio与checkbox不能同时存在，所以我用ng-show这个指令来控制它们的显隐，ng-show接收boolean类型的值以及计算结果为boolean类型的表达式。请注意，ng-show以及其他所有指令的值不是简单的字符串（尽管看上去是那样），而是字符串表达式，拥有计算能力，我现在的理解是它将来会在框架的某个地方放进eval()或是类似的函数执行。{{}}里的内容也是一样。

　　所以在这里我给radio的ng-show赋值为question.type==1，checkbox的ng-show赋值为question.type==2。当试题是单选题时，radio的ng-show便能得到值true，从而显示出来。在下面看一下效果：

　　其他的节点控制指令也可以类似这样使用，思想就是根据你的业务逻辑，赋予它们一定的表达式。其他的控制还有事件绑定、表单控件等等，篇幅的限制在这里就不讲了，以后专门开一篇介绍。

　　3.过滤器（filter）

　　所谓过滤器是指对输出的内容进行格式化，如格式化为美元、日期等。框架自己提供一些过滤器，如排序、字符串内容筛选。我们也可以自定义过滤器。

　　过滤器在{{}}中使用，表达式后用|隔开使用。拿日期过滤器举例，方式如下：

$scope.nowTime = new Date().valueOf();
{{nowTime | date : 'yyyy-MM-dd HH:mm:ss'}}

　　便会输出格式化的日期。是不是很方便呢。

　　接下来实战一下，哗~

　　接上一步的例子，我想要在预览区域中的题目前面显示题型，像[单选题]这样。我们的questionModel中，type的值是1和2，所以我们要做的就是通过过滤器，把1和2显示为单选题和多选题。Go~

　　在js中定义一个名为typeFilter的过滤器：

app.filter('typeFilter',function(){
    var f = function(input){
        return input == '1' ? '单选题' : '多选题';
    }
    return f;
});

　　filter函数如何使用以及执行细节不是本篇的讨论内容，所以现在只要明白这样可以定义一个过滤器就可以了。结构姑且认为是固定写法，代码不难看懂。

定义后这个filter后我们便可以在模板中使用了：

<b>[{{question.type | typeFilter}}]{{question.name}}</b>({{question.fraction}}分)

　　在题目的前面显示题型，并使用typeFilter，效果如下：

　　单调的“1”已经华丽转身变为了“单选题”。这只是一个简单的过滤器。你可以发挥想象力编写更强大的过滤器。

六、指令（directive）

　　前面已经提到很多次指令了，现在来正式介绍一下它。指令是ng为HTML补充的语法扩展，用于增强HTML的表现力。像我们之前使用的ng-controller、ng-model等都属于指令。你也可以自定义指令。ng内部包含了一个强大的DOM解析引擎，所以这些新的标签或是标签属性可以像使用原生HTML那样很好的工作。

　　听起来很牛的样子，那我们来试试自己定义一个指令吧。注意，我要变形了~

　　我是教师，在新建试题输入分数的时候应该只能输入数字才对，输入其他内容是不合法的，而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性就完成这个验证呢？就像使用HTML5新增的required一样。

　　我们定义一个叫做fractionNum的指令如下：

app.directive('fractionNum',function(){
    return {
        link : function(scope, elements, attrs, controller){
            elements[0].onkeyup = function(){
                if(isNaN(this.value) || this.value<1 || this.value>10){
                    this.style.borderColor = 'red';
                }
                else{
                    this.style.borderColor = '';
                }
            };
        }
    };
});

　　哇，代码好多层级呀，不要慌张，稳住阵脚！其实最后就是返回了带有link字段的对象，link的值是一个函数，用来定义指令的行为。从传入的参数中可以获取到当前元素，我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件，获取元素的值，如果不是1~10之间的数字，则把输入框的边框颜色变为红色。这下这个指令就可以工作了。

　　至于传入的四个参数到底都有什么玄机，我暂时还未研究，也不是本篇的重点，本篇只是做一个概览，先把ng拉出来溜溜的意思。现在姑且可以认为，一个指令的固定写法大概就是这个结构。

　　定义好的指令就可以在模板中使用了，使用方法如下：

分数:<input type="text" ng-model="question.fraction" fraction-num /><br />

　　把它加在了分数输入框上，此处要特别小心一个写法，我定义的时候名字是fractionNum，用在模板中需要写成fraction-num，就是因为名字中含有大写字母的原因，感觉上跟使用css属性名称有点像。如果定义的时候没有大写字母，就不必担心这一点了。

　　看效果，现在你可以去下面蹂躏那个分数输入框去了~

七、依赖注入

　　通过依赖注入，ng想要推崇一种声明式的开发方式，即当我们需要使用某一模块或服务时，不需要关心此模块内部如何实现，只需声明一下就可以使用了。在多处使用只需进行多次声明，大大提高可复用性。

　　比如我们的controller，在定义的时候用到一个$scope参数。

app.controller('testC',function($scope){});

　　如果我们在此处还需操作其他的东西，比如与浏览器地址栏进行交互。我们只需再多添一个参数$location进去：

app.controller('testC',function($scope,$location){});

　　这样便可以通过$location来与地址栏进行交互了，我们仅仅是声明了一下，所需的其他代码，框架已经帮我们注入了。我们很明显的感觉到了这个函数已经不是常规意义上的javascript函数了，在常规的函数中，把形参换一个名字照样可以运行，但在此处若是把$scope换成别的名字，程序便不能运行了。因为这是已经定义好的服务名称。

　　这便是依赖注入机制。顺理成章的推断，我们可以自己定义模块和服务，然后在需要的地方进行声明，由框架来替我们注入。

　　对，我的小例子呢？我现在要想点需求来把依赖注入试验一下。我觉得试题全是文字太单调了，我希望题目中能含有图片/音视频，或者选项中可以含有图片/音视频。并且，我要更灵活一点，我要为试题提供若干套模板来选择，选择不同的模板可以新建不同样式的题，比如模板一为纯文字试题、模板二为题目中带图片/音视频的试题、模板三为选项中带图片/音视频的试题，等等。注意此处所说的模板跟ng的模板不是一个概念，是我自己试题的模板，不要混淆。这些模板应该是与试题相分离的，以后可以为其他题型例如填空题啊简答题啊同样使用。所以试题模板这个东西就需要做成服务了。

　　不知道我表达清楚了没有，确实有点绕。来看下我们如何定义一个服务：

app.factory('tpls',function(){
    return ['tpl1','tpl2','tpl3','tpl4'];
});

　　看上去相当简单，是因为我在这里仅仅是直接返回一个数组。在实际应用中，这里应该是需要向服务器发起一个请求，来获取到这些模板们。服务的定义方式有好几种，包括使用provider方法、使用factory方法，使用service方法。它们之间的区别暂且不关心。我们现在只要能创建一个服务出来就可以了。我使用了factory方法。一个需要注意的地方是，框架提供的服务名字都是由$开头的，所以我们自己定义的最好不要用$开头，防止发生命名冲突。

　　定义好一个服务后，我们就可以在控制器中声明使用了，如下：

app.controller('testC',function($scope,tpls){
    $scope.question = questionModel;
    $scope.nowTime = new Date().valueOf();
    $scope.templates = tpls; //赋值到$scope中
    $scope.addOption = function(){
        var o = {content:''};
        $scope.question.options.push(o);
    };
    $scope.delOption = function(index){
        $scope.question.options.splice(index,1);
    };
});

　　此时，若在模板中书写如下代码，我们便可以获取到服务tpls所提供的数据了：

模板:<a href="javascript:void(0);" ng-repeat="t in templates">{{t}}&nbsp;&nbsp;</a><br />

　　随着知识点的一点点增加，我的这个小例子也越来越丰满了，来看看完整版吧：

分享到：

走进AngularJs(四)自定义指令----（中） | 架构图形收集

2016-12-06 14:38
浏览 268
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

走进AngularJs(一)angular基本概念的认识与实战

一、前言

二、AngularJs是什么

三、开始运行angular

四、模板与数据的绑定

五、模板中的一些控制方式

1.循环输出

2.单个节点的控制

3.过滤器（filter）

六、指令（directive）

七、依赖注入

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

走进AngularJs(一)angular基本概念的认识与实战

一、前言

二、AngularJs是什么

三、开始运行angular

四、模板与数据的绑定

五、模板中的一些控制方式

1.循环输出

2.单个节点的控制

3.过滤器（filter）

六、指令（directive）

七、依赖注入

评论

发表评论

相关推荐

最近访客更多访客>>

　　2.单个节点的控制

　　3.过滤器（filter）