来自 服务器&运维 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

angular2使用简介_AngularJS_脚本之家

以前开发前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨到angularjs跨度较大,研究了一段时间的angularjs ,下面从整体上说说感受吧:

让我们从零开始,使用Typescript构建一个超级简单的 AngularJs 2应用。

AngularJS可以视为是一种数据优先的框架,在它的三个层面中,数据模型是骨架,视图模型和业务事件是血肉,视图模板和指令是皮毛,这三层合在一起,就形成了一个活生生的Web应用。

关于和jquery的比较

先跑一个DEMO

1.ng-if的情况下 ,始终将页面中的元素绑定到对象的属性而不是直接绑定到基本变量产生新作用域。

首先angular是一个mvc框架,它与jquery不同之处在于,前者致力于mvc代码解耦,采用model,controller以及view方式去组织代码,而后者提供给你了很多APi函数,你可以不用写很多原生js去实现比较复杂的效果,比如说动画,$.animate,这样的效果如果需要原生js来写的话,代码量将会比较庞大;

运行这个 DEMO先来感受一下 AngularJS2 的应用。

2.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 加 track by $index 可解决。也可以 trace by 任何一个普通的值

其次,jQuery没有定义你的代码如何组织,你可以将它放在一个单独的js文件中进行引用,也可以直接写在页面中采用script标签进行包裹,甚至可以直接以内联的方式写在html标签中,但是angularjs会将一个HTML页面分成若干个模块,每个模块都可以自己的scope,service以及directive,各个模块之间也可以进行通信,但是整体上结构是比较清晰的,就是说其代码组织方式是模块化的。

下面是这个应用的文件结构

3.ng-click 中写的表达式,能使用 JS 原生对象上的方法吗?不能用,只要是在页面中,都不能直接调用原生的 JS 方法。因为这些并不存在于与页面对应的 Controller 的 $scope 中。

最后,jQuery的思想是先设计好页面,然后在已有页面的基础上进行dom操作后展示页面,但是angular的view可能仅仅是一个框架,对view的dom操作或者时间监听都是在directive中实现的,而且一般情况下很少自己直接去写Dom操作代码,只要你监听model。model发生变化后view也会发生变化。

angular2-app|_ app| |_ app.component.ts| |_ main.ts|_ index.html|_ license.md
{{13.14 | parseIntFilter}}app.filter('parseIntFilter', function(){ return function{ return parseInt

关于适用场合

总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件, 我们可以hold住!

4.{{now | 'yyyy-MM-dd'}} 这种表达式里面,竖线和后面的参数通过什么方式可以自定义?

jQuery应该适用于大多数web开发,移动端也有,angularjs有人说更适合做SPA(我个人认为在手机上的SPA可能会引发性能上的问题,因为它的脏检查机制会影响性能),在web端,一些CRUD的应用或者管理类软件还是可以使用的(当然这里的理解可能不一定准确,会随着深入学习更多去了解和使用)。

下面我们将一步一步的构建这样的一个程序:

ng 内置的 filter 有九种:

关于UI的结合

配置我们的开发环境 编写 Angular 初始化组件 引导它控制我们主要的 index.html 页面 编写index.html 页面

number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)

开发任何产品都需要用到前端UI,目前很多UI是基于jQuery的,这意味着你如果要用angularjs和这些Ui组件的话,需要用angularjs的directive去重写些组件,这一过程是比较麻烦的,所幸的是,angular给我们提供了一些UI组件可以使用(web端主要是结合bootstrap前端组件),

开发环境搭建

5.filter 有两种使用方法,一种是直接在页面里:

关于angularjs的特点

mkdir angular2-appcd angular2-app

``

1.数据的双向绑定:这可能是其最激动人心的特性吧,view层的数据和model层的数据是双向绑定的,其中之一发生更改,另一方会随之变化,这不用你写任何代码!

配置TYPESCRIPT

{{now | date : 'yyyy-MM-dd'}}

2.代码模块化,每个模块的代码独立拥有自己的作用域,model,controller等。

需要通过一些特殊的设置来指导Typesript进行编译。新建一个 tsconfig.json 文件,放于项目根目录下,并输入一下配置

另一种是在 js 里面用:

3.强大的directive可以将很多功能封装成HTML的tag,属性或者注释等,这大大美化了HTML的结构,增强了可阅读性;

{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ]}
// $filter(需要过滤的对象, 参数1, 参数2,...)$filter(now, 'yyyy-MM-dd hh:mm:ss');

// 形式app.filter{ return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ //...做一些事情 return 处理后的对象; }}); // 栗子app.filter('timesFilter', function(){ return function{ var result = ''; for(var i = 0; i < times; i++){ result += item; } return result; }})

4.依赖注入,将这种后端语言的设计模式赋予前端代码,这意味着前端的代码可以提高重用性和灵活性,未来的模式可能将大量操作放在客户端,服务端只提供数据来源和其他客户端无法完成的操作;

我们稍后在附录中会详细讲解这个 tsconfig.json

6.factory、service 和 provider 是什么关系?

5.测试驱动开发,angularjs一开始就以此为目标,使用angular开发的应用可以很容易地进行单元测试和端对端测试,这解决了传统的js代码难以测试和维护的缺陷

TYPESCRIPT TYPINGS

factory返回的是一个对象,而service返回的是一个实例化对象,绑定到 this 的都可以被访问。provider 是加强版 factory,返回一个可配置的 factory

以上就是研究angularjs一段时间得出的结论,其中某些地方可能有所疏漏,没关系,接下来会展开其中某一点一步步去学习。

有很多Javascript的库,继承了一些 Javascript的环境变量以及语法, Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 – d.ts 文件 来解决这些兼容性问题。

7.性能问题

创建 typings.json 文件,放于项目根目录下

作为 MVVM 框架,因为实现了数据的双向绑定,对于大数组、复杂对象会存在性能问题。

{ "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" }}

可以用来 优化 Angular 应用的性能 的办法:

同样的,在附录中会有更详细点的解释

主动设置索引(指定 track by,简单类型默认用自身当索引,对象默认使用 $$hashKey,比如改为 track by item.id)

我们推荐使用npm来管理我们的依赖库。在项目根目录下创建package.json文件

降低渲染数据量(比如分页,或者每次取一小部分数据,根据需要再取)

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.7", "systemjs": "0.19.22", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.1.0", "typescript": "^1.7.5", "typings":"^0.6.8" }}

数据扁平化(比如对于树状结构,使用扁平化结构,构建一个 map 和树状数据,对树操作时,由于跟扁平数据同一引用,树状数据变更会同步到原始的扁平数据)

在附录中,会有更详细的解释

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

安装这些依赖包只需要运行

npm install

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:angular2使用简介_AngularJS_脚本之家

关键词: