AngularJS入门基础|网站前端开发_前端开发者

网站前端开发_前端开发者丨AngularJS
https://www.rokub.com
学习Angular需要记住三点:1、性能陷阱;2、摆脱思维定式;3、深入理解框架。
一、Angular简介
AngularJS是一个前端JavaScript框架,背后有Google支持。这个框架最早是09年发布的,随后发展迅速,尤其是最近,流行度很高。和其他框架不同,AngularJS有很多独特的特性,使得其非常与众不同。如果你对AngularJS不了解,推荐先去其官网([http://www.angularjs.org](http://www.angularjs.org))【需要翻墙】看看。不翻可以去( [http://www.apjs.net/](http://www.apjs.net/) ),有很多例子。对于我来说,最吸引我的两个特性是双向绑定以及依赖注入。前者免去了开发时显示的刷新DOM,能让开发者更专注在逻辑上,而后者则使得测试以及集成变得非常方便。
二、Angular特性
###1、MVC(MVVM)模式:
MVC顾名思义:Model-view-Controll设计模式,其实这个有点类似于Java的思想,模型、视图、控制器的分离。但是Angular又有点不同于传统的MVC,严格意义上说它是MVVM(model-view-viewModel)。Model是简单的javascript对象;ViewModel是$scope对象,Angular依靠$scope检测状态变化;Controller负责设置初始状态和参数化$scope方法用以控制行为;View是Angular解析渲染后生成的HTML。
**MVC的核心是$scope:**
$scope是一个POJO(Plain Old JavaScript Object)
$scope提供了一些工具方法$watch()/$apply()
$scope是表达式的执行环境(或者叫作用域)
$scope是一个树型结构,与DOM标签平行
子$scope对象会继承父$scope上的属性和方法
每一个Angular应用只有一个根$scope对象(一般位于ng-app上)
$scope可以传播事件,类似DOM事件,可以向上也可以向下
$scope不仅是MVC的基础,也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试
2、数据双向绑定:
这应该算Angular比较特有的属性,概括来说,Angular通过监听变量的变化来实现双向数据绑定。传统技术上,当model改变时,开发与人员需要手动处理DOM元素并将属性反映到变化中。而在Angular中,程序员可以轻轻松松解决这种问题,省掉了很多的代码。
** {{}}与ng-bind指令:**
3、指令:
指令比较有意思,可以帮助我们做很多的DOM操作,比如增删改查都可以用指令完成。指令自带的link方法有三个参数:scope、element、attrs。通过这三个参数我们可以完成很多功能,如:获取对象,改变CSS,变量传递等,这也是我用的比较多的方法。
4、模板:
在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。
» HTML模板将会被浏览器解析到DOM中。
» DOM然后成为AngularJS编译器的输入。
» AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。
» 所有的指令都负责针对view来设置数据绑定。
这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下:

 

五、服务和依赖注入:
Angular服务的作用就是对外提供某个特定的功能。Angular拥有内建的依赖注入(DI)子系统,可以帮助开发人员更容易开发,理解和测试应用。
比如,很多时候我们会引入第三方指令,这时候需要在module中加入模块依赖,比如项目上我想用ng-bind-html,引入$sce,这时候需要在module写:
javascript 代码片段
var app = angular.module(‘myapp’,[‘ngSanitize’]);
**Angular的依赖注入实现:**
每一个Angular应用都有一个injector
injector负责自动处理依赖关系、实例化对象
对用户代码来说,injector是透明的
injector会自动分析函数签名,注入所需要的对象
inJector注入有三种方式:http://www.cnblogs.com/lodingzone/p/4895275.html
依赖可以被使用者自己创建,通过 new 操作符.
依赖可以通过全局变量(如 window)来查找并引用
依赖可以在需要的地方被传入
DI可以用在各种不同的地方,主要用在controller和factory中
三、ng官方推荐的模块切分方式
任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的
用一个总的app模块作为入口点,它依赖其它所有模块
AngularJS的模块化实现
javascript 代码片段
function HelloAngular($scope) {
$scope.greeting={
text: “Hello”
};
}
/******* ↓ ********/
var helloModule = angular.module(“HelloAngualr”, []);
helloModule.controller(“helloNgCtrl”, [
“$scope”,
function($scope){
$scope.greeting={
text: “Hello”
};
}
]);
一个完整项目结构是什么样的?
Angular-seed github地址:https://github.com/glitchtank/angular-seed-master
四、Hello World!
开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:
html 代码片段
<!doctype html>
<html ng-app>
<head>
    <script type=”text/javascript” src=”http://code.angularjs.org/angular-1.0.1.min.js”></script>
</head>
<body>
    你的名字:
    <input type=”text” ng-model=”yourname” placeholder=”名字”>
    <br> {{yourname}}
</body>
</html>
五、何时用Controller、Directive、Service
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念, Directive(指令),Controller(控制器),Service (服务)。
那我们该何时使用这些呢?
1、Service(服务)
Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西(指单例对象)会被经常传来传去,保证你每次访问到的都是同一个实例,这一点和工厂模式不同。基于这种思想,单例对象让我们可以 实现一些相当酷的功能,它可以让很多controller和directive访问内部的数值。
简单来说,如果你需要对一个数据做增删改查,那么我们会用Service做持久化,让不同Controller共享Service数据做处理,如果你还是不理解请看下面代码:
Service例子:
javascript 代码片段
module.service(“Book”, [
“$rootScope”,
function($rootScope){
varservice={
books: [
{ title:”如何勾搭妹子”, author:”隔壁老王”},
{ title:”如何学好前端”, author:”王小白”}
],
addBook:function(book){
service.books.push(book);
$rootScope.$broadcast(“books.update”);//事件派发,用于不同controller之间的信息传递
}
};
returnservice;
}
]);
2、Controller(控制器)
Controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起,然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑,那么把它们放到controller里面也是一个非常不错的选择。
如果我要add一本书籍应该怎么办呢?我应该在controller上面新增一个方法来处理这件事情吗? 不,原因在下面解释。因为它是DOM交互/操作的一部分。
**Controller(控制器)-注意点:**
不要试图去复用Controller,一个控制器一般只负责一小块视图
不要在Controller中操作DOM,这不是控制器的职责
不要在Controller里面做数据格式化,ng有很好用的表单控件
不要在Controller里面做数据过滤操作,ng有$filter服务
一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行

 

3、Directive(指令)
到目前为止,在我所编写的大量AngularJS应用中,应用中最主要的复杂部分都在directive(指令)中。有一个强大的工具可以用来操 作和修改DOM,它也是我们这里需要讨论的内容。我们来提供一个按钮,用户通过它可以向service里面添加一本图书。

 

Angular对directive的定义是一段代码片段,你 可以用它来操作DOM,但是我觉得directive也是进行用户交互的很好选择。我们来扩展前面的例子,为用户提供一个按钮,通过这个按钮可以向 service里面添加一本书籍。
html 代码片段
<html ng-app>
<head>
    <script type=”text/javascript” src=”http://code.angularjs.org/angular-1.0.1.min.js”></script>
    <script>
        module.directive(“addBookButton”, [‘book’, function (book) {
            return {
                restrict: “A”,
                link: function (scope, elem, attrs) {
                    elem.bind(‘click’, function () {
                        Book.addBook({
                            title: “jquery高级编程”,
                            author: “忘了”
                        });
                    });
                }
            }
        }]);
    </script>
</head>
<body>
    <button add-book-button>增加书籍</button>
    <!–由于没有service,这里不做代码运行,只需了解directive基本用法–>
</body>
</html>
Directive和Controller如何通信
你可能已经注意到了,上面代码中的directive中我使用了scope:{arrow=‘=’},那这是什么意思呢?
除了“=”还有“@”和“&”。
“@”:把当前属性作为字符串传递。
“=”:与父scope中的属性进行双向绑定。
“&”:传递一个来自父scope的函数,稍后调用。
再看回上一个例子,我用的“=”,所以当directive中的arrow变化时,controller和视图中该变量也随之改变,它们之间通过变量传递信息。
此篇blog链接:http://www.cnblogs.com/lodingzone/p/4846978.html

 

六、Filter(过滤器)
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。
过滤器有两种用法:
1、模板中使用Filter;
2、Controller和Serivce中使用Filter
1、模板中使用Filter
<1>、我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
{{ expression | filter }}
<2>、也可以多个filter连用,上一个filter的输出将作为下一个filter的输入
{{ expression | filter1 | filter2 | … }}
<3>、filter可以接收参数,参数用 : 进行分割,如下:
{{ expression | filter:argument1:argument2:… }}
2、Controller和Serivce中使用Filter
我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:
javascript 代码片段
app.controller(‘test’,function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
});
在模板中使用{{num}}就可以直接输出$123,534.00了!在服务中使用filter也是同样的道理。
七、Route(路由)
AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML)。AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中。
AngularJS的前端路由,虽然URL输入不一样,页面展示不一样,其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看,AngularJS做单页应用就有点标配的感觉了。
Route例子:
访问地址: https://www.rokub.com:8080/test/app/route.html
AngularJS 自动跳转到:
https://www.rokub.com:8080/test/app/route.html#/list, 跳转详细页的路由是/list/:id,id为参数。点击ID#跳转到route-list.html页面,显示为:“Route 3:detail.html”。打开控制台发现,查看详情后页面只加载了一次,再次点击其他ID进入详情不再加载route-list.html页面。这就是ng提供的单页面视图的局部刷新。可以下载下来看看代码(附代码压缩包)
Angular例子(route)
网站前端开发_前端开发者丨AngularJS
https://www.rokub.com
八、表单验证
1、属性
Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和输入.
属性类——|——描述
$valid——ng-valid——Boolean告诉我们这一项当前基于你设定的规则是否验证通过
$invalid——ng-invalid——Boolean告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine——ng-pristine——Boolean如果表单或者输入框没有使用则为True
$dirty——ng-dirty——Boolean如果表单或者输入框有使用到则为True
Angular 也提供了有关表单及其输入框的类,以便你能够依据每一个状态设置其样式。
另外值得注意的是,HTML5自带验证在一些对H5支持性差的浏览器上显示有问题,所以我们在form加novalidate,禁止自带验证,我们自定义写会比较好。
2、验证例子
html 代码片段
<form method=”post” id=”loginForm” name=”loginForm” class=”login-form” ng-submit=”submit(loginForm.$valid)” onsubmit=”javascript:return false” role=”form”>
<divclass=”form-group” ng-class=”{ ‘has-error’ : loginForm.username.$invalid && !loginForm.username.$pristine }”>
<spanclass=”add-on bg_lg”><iclass=”icon-user”></i></span>
<inputtype=”text” name=”username” class=”form-control” placeholder=”用户名” autocomplete=”off” ng-model=”user.username” ng-keyup=”myKeyup($event)” ng-minlength=”3″ ng-maxlength=”32″ ng-trim=”true” requiredautofocus/>
<png-show=”loginForm.username.$error.minlength||loginForm.username.$error.maxlength” class=”help-block show-login-msg”>用户名必须在3-32个字符之间!</p>
</div>
<divclass=”form-group” ng-class=”{ ‘has-error’ : loginForm.password.$invalid && !loginForm.password.$pristine }”>
<spanclass=”add-on bg_ly”><iclass=”icon-lock”></i></span>
<inputtype=”password” name=”password” class=”form-control” placeholder=”密 码” ng-model=”user.password” ng-keyup=”myKeyup($event)” ng-minlength=”6″ ng-maxlength=”16″ ng-trim=”false” oncontextmenu=”return false” onpaste=”return false” requiredlogin-direct/>
<png-show=”loginForm.password.$error.minlength||loginForm.password.$error.maxlength” class=”help-block show-login-msg”>密码必须在6-16个字符之间!</p>
</div>
<divclass=”form-group”>
<buttonid=”login_button” class=”btn btn-primary btn-block” type=”submit”>登 录</button>
</div>
</form>
九、总结新手容易碰到的坑
Q1.<div ng-include=”views/user/show.html”></div> 错在哪里?
A1:如果你这么写过,会发现这个位置啥也没有加载出来,那么,错在哪里呢?错在ng-include需要的是一个变量,如果你在$scope中有这样一个变量 $scope.userShowTemplateUrl = “views/users/show.html”,并且把上面这句变为<div ng-include=”userShowTemplateUrl”></div>就能正常工作了。或者这样写也行:
<div ng-include=” ‘views/user/show.html’ “></div>
原因何在?
因为在ng-include中,是把它的参数当做变量来解释的,它会通过$eval对传入的值进行计算,然后作为模板地址去加载。
不过,更好的方法是把这些界面片段(partical)写成指令,那样你就不用在多处重复写路径了,更重要的是,将来你可以直接在这里扩展它的交互逻辑,从界面原型平滑的演化到线上系统。
Q2.我的指令怎么无效?
A2. 如果你排除了代码错误等问题,那么最可能的原因是restrict。restrict参数是用来规定你可以通过哪种方式来使用指令,而这个问题之所以容易成为坑,是因为restrict的默认值是A,也就是说,默认情况下,指令只能通过属性的形式使用,比如我写了一个指令叫做appHeader,那么默认情况下我只能用这样的形式使用它:<div app-header></div>,而<app-header></app-header>的形式则是无效的。
所以,如果你用返回函数的形式使用指令,那么你就只能使用属性的方式调用它,比如:

 

Q3.修改了变量怎么界面没反应?
A3. 首先你当然要检查有没有错误以及是否确实是scope变量,如果这些都没问题,那么多半儿是$apply导致的。对于大多数操作,$apply都会自动执行,所以你不用担心,但是如果你使用了angular之外的功能,比如直接调用了setTimeout函数、挂接了jquery的事件、使用了jquery的ajax操作等等,那么系统就没有机会帮你调用$apply,界面也就没有机会刷新了,但是你如果之后又做了其他会导致$apply的操作,你会发现以前“欠下”的那次界面刷新被正常执行了了 …… 迟到的刷新仍然是bug。
Q4. ng-click 写成 ng-class 导致的界面停止响应
A4. 这是我自己犯过的一个低级错误,属于深度依赖ide导致的问题。ide的自动代码提示功能,ng-cl的第一个候选项是ng-class,如果偷懒少打了一个字,那么本来想写ng-click的代码就会写成ng-class,结果就是,无休止的重新计算ng-class中的表达式,其中的原因还没来得及看源码研究。
如果遇到界面停止响应的问题,而且你也同样深度依赖ide,那么,从这个角度查查看吧。
Q5. 我知道你不拜金,但别忘了$
A5. 在angular中有一个通用的约定:angular的内部服务、方法、属性通常都会以$开头,而相应的,它也要求你自己的命名不要用$开头。比较容易忘记用$开头的主要是一些方法,特别是$apply, $watch, $on, $broardcast, $emit这些,而这些如果你写错了,在chrome中你将得到一个莫名其妙的提示 TypeError: undefined is not a function! 可恶的是,连函数名字都没有!所以,虽然我知道你不拜金,但是千万不要忘了写$!
Q6.注意作用域的原型继承问题!
A6. 在Angular中,作用域是通过原型链进行继承的。而这种继承有一个问题,那就是在子类中对变量进行赋值时,不会去修改父级的。
假设scopeA继承自scopeB,而在scopeB中定义了一个变量value: 1,这时候,读取scopeA.value可以正确取到值,但是如果赋值,就有问题了 scopeA.value = 2,这时候,scopeB.value的值是多少呢?你可能以为是2,但它是1!原因就在于原型继承时对变量的赋值不会修改原型中的值,而是直接在当前scope中创建一个同名的属性。
Q7. angular.module的两种写法:含义大不同
angular.module(‘name’, [])是创建一个新的module,[]表示它没有依赖任何其他模块,如果已经有了一个同名模块,则会覆盖现有的。
而angular.module(‘name’)是查找一个现有module,如果这个module不存在,则返回空值。
如果把带方括号的形式(创建)误用为不带方括号的形式(引用),那么在它的返回值上调用controller等函数会出现空指针错误。
而如果把引用形式误用为创建形式,则会导致难以理解的“对象不存在”错误,但是你却明明定义过那个service或者controller等对象!这种问题就是因为后面的模块定义覆盖了以前的模块定义,你定义过的那些对象都被随着以前的module而丢掉了!
Q8.第三方指令不起作用
A8:最可能的原因是你没有加入模块依赖。第三方指令通常会定义在自己的模块中,所以这个模块必须被你的app模块所依赖,其中包含的指令才能在view中使用。比如你要使用ui-select2指令,就必须在自己的模块定义中加入这个依赖。
Q9. ng事件中为变量的参数
A9. 举个例子把,比如有这么一段代码:
html 代码片段
<button type=”button” ng-click=”showMsg(msg)”>点我</button>
如果ng-click中的事件参数msg是一个表达式,你是不是想应该showMsg({{msg}})?NO!必须像我代码中写的,直接写变量值,不用加花括号便可。有意思的是你运行页面,查看元素发现该标签中事件的参数还是msg,但是已经功能却跟{{msg}}一样,ng会把该变量自动转化成表达式,所以你无须担心,只管用就行了。
十、介绍三个Angular学习参考网站
AngularJS中文API:http://docs.ngnice.com/guide
AngularJS基础:http://www.apjs.net/
AngularJS范例程序:http://ngnice.com/showcase/?utm_source=TZ#/home/home
网站前端开发_前端开发者丨AngularJS
» 本文来自:前端开发者 » 《AngularJS入门基础|网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2489.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
分享到: 更多 (0)

评论 抢沙发