AngularJS实践与应用

Love The Way You Lie 2022-10-01 00:48 197阅读 0赞

*最近更新时间：2017年3月24日09:36:10*

[《我的博客地图》][Link 1]

根据项目需求，最近在开发一个AngularJS项目，由于仅仅有一点基础，因此，在具体开发过程中还是有一定的难度，做此文来记录自己的成长与收获。

1、构建一个AngularJS应用

第一步，通过script标签载入angular.min.js框架放入body标签中；

第二步，通过ng-app指令定义一个AngularJS应用程序；

第三步，通过ng-controller定义一个控制器，一个应用可以包含多个控制器；

第四步，初始化AngularJS模块和控制器应用，如下：

angular.module('my-app',\[\]).controller('Ctrl',function($scope,$http)\{

$scope.$watch('viewContentLoaded',function()\{//页面加载完毕

//content

\});

\});

2、AngularJS数据绑定的两种方式

AngularJS应用可以通过 表达式 \{ \{\}\} 把数据绑定到HTML中

AngularJS应用可以通过 ng-bind 指令把数据绑定到HTML中

3、作用域

作用域Scope是应用在HTML（视图）和JavaScript（控制器）之间的纽带，Scope是Angular的一个对象，可通过$Scope调用，该对象有可用的方法和属性。在AngularJS创建控制器时，将$Scope对象作为一个参数传递到控制器中。

根作用域，所有应用都有一个$rootScopt对象，这个对象作用在 ng-app指令 包含的所有HTML元素中，$rootScopt对象是同一个AngularJS应用中不同controller中scope的桥梁，通过rootscope定义的值，可以在每个controller中使用。

4、$http服务

$http服务是AngularJS的一个核心服务，向服务器发送请求，响应远程服务器传过来的数据。语法如下：

$http(\{method:'GET',url:'www.xxx.com',\}).then(function successCallback(res)\{

//

\},function errorCallback(res)\{

//

\});

$http(\{method:'POST',url:'www.xxx.com',data:\{age,'22',name,'bruce'\}\}).then(function successCallback(res)\{

//

\},function errorCallback(res)\{

//

\});

$http.get('www.xxx.com').then(successCallback,errorCallback);

$heep.post('www.xxx.com',data,config).then(successCallback,errorCallback);

5、AngularJS服务

在AngularJS中，服务是一个函数或对象，可在AngularJS应用中使用，服务分为两种：内建服务和自定义服务

内建服务有30多个：

自定义服务语法如下：

app.service('my-service',function()\{

//

\});

在controller中使用自定义服务的语法如下：

app.controller('Ctrl',function($scope,my-service)\{

//

\});

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 mybatis应用分析与最佳实践

传统的JDBC连接数据库的步骤 1. 注册驱动，获取连接 2. 创建Statement 对象 3. execute()方法执行SQL 4. 把结果集转换成POJO对象

迈不过友情╰/ 2023年06月22日 08:23/ 0 赞/ 47 阅读

相关 AngularJS实践与应用

最近更新时间：2017年3月24日09:36:10 [《我的博客地图》][Link 1] 根据项目需求，最近在开发一个AngularJS项目，由于仅仅有一点基础，因

Love The Way You Lie/ 2022年10月01日 00:48/ 0 赞/ 198 阅读

相关 jQuery库应用与实践

更新时间：2017年11月28日23:37:35 [《我的博客地图》][Link 1] JavaScript开发语言用途广且轻量，但在网页开发过程中，原生Ja

旧城等待，/ 2022年07月13日 10:25/ 0 赞/ 144 阅读

相关 AngularJs基本语法应用(mvc)

\定义应用通过为任一HTML标签添加ng-app属性可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。为html添加ng-app表明增个文

水深无声/ 2022年07月12日 07:08/ 0 赞/ 192 阅读

相关 Yeoman创建angularjs应用

本文主要介绍如何利用Yeoman进行angularjs应用的搭建。本文主要参考：《Angularjs高级编程》 https://www.ibm.com/developer

电玩女神/ 2022年05月29日 04:38/ 0 赞/ 223 阅读

相关 AngularJS web 应用骨架 AngularJS Seed

AngularJS Seed 详细介绍 AngularJS Seed 是典型 AngularJS web 应用的应用骨架，可以快速启动你的 AngularJS webapp

不念不忘少年蓝@/ 2022年05月18日 20:14/ 0 赞/ 225 阅读

相关 AngularJs - 简单小应用

写个小应用，熟练一下AngularJs.。 <!DOCTYPE html> <html ng-app='myApp'> <head>

Love The Way You Lie/ 2022年05月17日 11:54/ 0 赞/ 178 阅读

相关 AngularJS基础应用

为了理解AngularJS的概念，这里记录下在网上学习AngularJS的几个例子，并且快速接触AngularJS的重要部分。 1、数据绑定下面编写一个表单，用来计算

古城微笑少年丶/ 2022年05月09日 14:40/ 0 赞/ 221 阅读

相关 angularJs基础应用

angularjs基础指令有： ng-app, 指令作用是告诉子元素一下的指令是归angularJs的,angularJs会识别的 ng-module,指令用于绑定变

爱被打了一巴掌/ 2022年04月23日 07:22/ 0 赞/ 197 阅读

相关 AngularJS笔记（三）依赖注入与AngularJS实现单页应用

1、AngularJS的最大的不足/应用时需要特别关注的地方？原生ES/JS/DOM只有特定HTML元素的特定事件的监听机制，没有监听数据/对象/值改变的机制。每当数据

末蓝、/ 2022年04月03日 02:11/ 0 赞/ 228 阅读