php angular使用,AngularJS如何使用?angularjs的详细使用介绍

本篇文章主要的讲述了关于angularjs的使用详情,angularjs一些简述的功能描述都在里面,现再就让我们一起来看看吧

最近,项目中使用到了AngularJS ,趁周末时间学习了一下,和大家分享。

一、AngularJS简述

AngularJS的官方文档是这样介绍它的。

完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS

和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。

AngularJS使开发Web应用变得非常简单,同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能,例如:

解耦应用逻辑、数据模型和视图;

Ajax服务

依赖注入;

浏览历史(使书签和前进、后退按钮能够像在普通Web应用中一样工作);

测试;

更多功能。

二、Angularjs目录结构

最新版本是angular2.0,它与angular1.x区别比较大,我使用的版本是1.3版本。

502d7e3426890c5230decd6468319834.png

在使用基本功能时,只需要导入angular.js或angular.min.js文件就可以。其它的js文件是angularjs拆分出来的功能,例如angular-route.js,它是关于路由的脚本文件,在1.2版本时,使用路由不需要单独专稿angular-route.js,而在1.3版本后,使用路径需要单独导入angular-route.js

三、Angularjs基本使用

创建web项目(使用Hbuilder),并导入js文件

5f3573fb44ca34eac8b9420066213c40.png

AngularJs它主要的核心特性:MVC模块化 数据绑定 语义化标签(指令) 依赖注入等

MVCMVC核心理念是:将管理数据的代码(model),应用逻辑代码(controller),展示数据的代码(view)分离开。

在angular应用中,视图就是DOM,控制器就是JavaScript,而模型数据被存储在对象的属性中。

自己写了一个小例子:

HTML代码

34fcdcc9327ec8954e1ab0670bd9d81e.png

JS代码

894643dd0d4d06edd6eee5046447434e.png

在这个案例中,ng-app它是一个angular的指令(在angular中一般以ng-开头的都是指令 ),它用于描述整个页面是angular应用程序的所有者。{{msg}}它是用于将数据在页面上输出。也可以使用ng-bind来绑定数据在页面上输出。

双向数据绑定

在传统的js框架中,它是将html代码与数据混合在一起,在发送给用户在显示出来,而angular它可以将UI中某个部分映射到javascript属性上,然后让它们自己去同步,这就叫做数据绑定,查看以下代码:

eeaf9779f38b575a1e548a43f53cdc3a.png

上述代码我只是添加了一句,这时我会发现,当文本框中的内容改变时,视图中的信息会自动改变,而我在代码中没有添加任何关于事件操作,这一特点也适用于来自服务器的更新。(想看更多就到PHP中文网AngularJS开发手册中学习)

模块化

在上述代码中,我在js文件中声明了一个全局的函数demo1Controller,在js的开发中是不建议定义全局的函数或变量的,它污染了全局空间,这种编码是不”优雅”的。在angular中我可以使用module(模块化来解决这个问题)

我对上述代码进行修改如下:

Html代码

94b849b4c8b95262e5caea5769c59644.png

JS代码

d8baad8a0e00c3368bc99a1bdecd6e15.png

代码执行结果是不变的,但是我通过angular.module来定义了一个模块。Angular.module(“myapp”,[ ]),后面的“[ ]“代表的是当前的myapp模块是否与其它的模块有关联,如果无关联,在[ ]内可以不写任何代码,但是[ ]一定要存在,如果不存在,它的意义是不一样的。

注意:在angularjs中所有的一切都是从模块开始的。

依赖注入

在上述代码中,大家一定有一个疑问,就是我在js代码中使用的$scope它是由谁创建的,为什么我可以使用它?其实就全是依靠angular提供的依赖注入来完成的,依赖注入的概念我在学习spring中已经接触过,不过在前端开发中,这是我第一次使用依赖注入。

AngularJS使用$injetor(注入器服务)来管理依赖关系的查询和实例化。

事实上,$injetor负责实例化AngularJS中所有的组件,包括应用的模块、指令和控制器等。在运行时,任何模块启动时$injetor都会负责实例化,并将其需要的所有依赖传递进去.我在开发中,最学用的就是在需要的地方通过参数来传递。

Angularjs中的注入一般分为三种:

推断式注入

7b2966e9a17877220266603f7571cf58.png

显示注入(标注式注入)

c1c56bdbaa5115e3a1f4bd1fbf5fd940.png

行内注入(内联注入)

6798bdc5a9d453364aa73d52140f3d2f.png

本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值