文档章节

[AngularJS]--基本用法

Candy_Desire
 Candy_Desire
发布于 2015/04/07 09:35
字数 1294
阅读 82
收藏 2
点赞 2
评论 0

AngularJS简介

AngularJs是Google下一代前端框架,基于mvc架构,它提供的功能如下

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

2、Ajax

3、依赖注入


AngularJs初探

新建html页面,并导入angular.js文件 (html中需要加上ng-app这个内置指令才能让angularjs起作用)

<!DOCTYPE html>
<!-- demo1 数据绑定-->
<html ng-app>
<head>
    <title>angularJS</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="angular.js"></script>
</head>
<body>
<input ng-model="name" type="text" placeholder="请输入用户名" />
<h1>hello:{{name}}</h1>
</body>
</html>

该示例演示了一个基本但是非常棒的功能:数据绑定

实际上,在该程序中默认有一个控制器(controller)存在,在用户输入时会去请求该控制器并反向给{{}}表达式里面的变量赋值,具体控制器我们将在后面讲解。


控制器初探

可以自定义多个控制器,并为每个区域设置一个单独的控制器。

当某些元素在该控制器下时,就可以通过{{}}表达式得到该控制器作用域中的值。

<!DOCTYPE html>
<!-- demo2 简单数据绑定-->
<html ng-app>
<head>
    <title>angularJS--简单数据绑定</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="angular.js"></script>
    
    <script type="text/javascript">
            /**
              $scope是数据模型对象,它的属性可以被视图访问,
              也可以同控制器进行交互
              $timeout是angular自带的定时器
            */
            function mycontroller($scope,$timeout){
                $scope.uname="akx";
                $timeout(function(){
                    $scope.uname="angel";
                },2000);
            }
        </script>
</head>
<body>
 <!-- ng-controller声明所有被包含的元素属于某个控制器,该控制器必须被定义 -->
 <div ng-controller="mycontroller">
     <input ng-model="uname" type="text"/>
     <h1>{{uname}}</h1>
 </div>
</body>
</html>

    假如$scope作用域中的值放在该控制器外面,则不会访问到!

模块用法

有时候把函数定义为全局的容易造成命名冲突或不好维护,所以很多时候我们需要把函数聚集在模块里

定义模块的语法是:angular.module('myapp',[]);

其中第一个参数是模块名,第二个参数列表是所需要依赖的模块名

示例代码如下:

<!DOCTYPE html>
<!--  在使用模块时,html标签后面不能使用ng-app -->
<html>
<head>
    <title>angularJS--模块</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="angular.js"></script>
</head>
<body>
    <div ng-app="myapp">
    <div  ng-controller="MyController">
         <h1>{{clock}}</h1>
    </div>
    </div>
</body>
</html>
        <script type="text/javascript">
             //第一个参数为模块名称
             //第二个参数为依赖的模块名称
             angular.module("myapp",[]).controller("MyController",function($scope){
                 var nowtime=function(){
                     $scope.clock=new Date();
                 }
                 setInterval(function(){
                     //触发修改model
                     $scope.$apply(nowtime);
                     nowtime();
                 },1000);
             })
        </script>

事件控制器

<!DOCTYPE html>
<!-- demo3 控制器 -->
<html ng-app="MyApp">
<head>
    <title>angularJS--控制器</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="angular.js"></script>
</head>
<body>
   <div ng-controller="MyController">
       <input type="button" ng-click="add(2)" value="点击"/>
       <div ng-click="add(3)" style="border: 1px solid">点击div</div>
       <span>{{counter}}</span>
   </div>
   <br/>
</body>
</html>
        <script type="text/javascript">
            var app=angular.module("MyApp",[]).controller("MyController",function($scope){
                $scope.counter=0;
                //通过ng-click 执行add
                $scope.add=function(count){
                    $scope.counter+=count;
                }
            })
        </script>

当点击按钮时,会调用所属模块--控制器的add方法

控制器的作用域是可以嵌套的,默认情况下,AngularJS在当前作用域中无法找到某个属性时,

便会在父级作用域中进行查找。示例代码如下

网页代码:

<div ng-controller="ParentController">
       <div ng-controller="ChildController">
           <input type="button" ng-click="insertProp()" value="嵌套作用域测试"/>
           <span>{{person}}</span>
       </div>
      <span>{{person}}</span>
  </div>

控制器代码:

app.controller("ParentController",function($scope){
                $scope.person={
                    uname:"testangu"
                }
            });
 app.controller("ChildController",function($scope){
                $scope.insertProp=function(){
                    $scope.person.sex="男";
                }
         })

根据运行效果会发现,子作用域是引用到了父作用域的对象(但是对于字符串,数字等基本数据类型仅仅只有值得拷贝)

表达式

angularjs表达式的语法是:{{}},在默认情况下,该表达式即可以取出$scope或者ng-model等作用域中的值,

在某些时候{{}}比想象中的更加强大,比如做插值处理!

<!DOCTYPE html>
<!-- demo5 表达式 -->
<html ng-app="MyApp">
<head>
    <title>angularJS--表达式</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="angular.js"></script>
</head>
<body>
<div ng-controller="myinter">
       <input ng-model="to" type="text" />
       <br/>
       <textarea ng-model="emailBody"></textarea>
       <br/>
       <pre>{{previewText}}</pre>
</div>
</body>
</html>

     

   <script type="text/javascript">
            var app=angular.module("MyApp",[]);
            //插值字符串示例监控emailBody,在此文本域里输入{{tso}}时,会被替换成ng-model="to"的内容
            app.controller("myinter",function($scope,$interpolate){
                           $scope.$watch("emailBody",function(body){
                               if(body){
                                   var template=$interpolate(body);
                                   $scope.previewText=template({tso:$scope.to});
                               }
                           })
            })
        </script>

当我们再emialBody中输入{{tso}}时,会被马上替换成ng-model="to"的内容

过滤器

过滤器可以做一些格式化或者过滤子集的操作

angularJS内置了很多,比如字符串,数字格式,日期
angularJS提供的filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回

大小写:{{uname | lowercase}}

数字小数位:{{num | number:2}}

数组过滤 :{{['java','javascript','c++','ruby'] | filter:'java'}}

               也可以用该方式过滤json数组

limitTo:截取字符串或数组 {{"hello java world" | limitTo:5}}

自定义过滤器:

   示例1:限制字符串长度大于3的元素

     {{['java','javascript','cs','ruby'] | filter:lengthF}}

    //这里run方法类似于初始化方法(main方法)不能使用$scope

                 var app=angular.module("MyApp",[]);

                 app.run(function($rootScope){

                     $rootScope.lengthF=function(str){

                         return str.length>3;

                     }

                 });

  示例2:首字母大写

  <!-- 可以连续使用 -->

   {{'hello java World' | lowercase | upFirst }}

   app.filter('upFirst',function(){

                return function(input){

                    if(input){

                        return input[0].toUpperCase()+input.slice(1);

                    }

                }

            });


© 著作权归作者所有

共有 人打赏支持
Candy_Desire
粉丝 31
博文 71
码字总数 84592
作品 0
浦东
产品经理
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

Vue、React、Angular最佳UI框架

摘要: 今天我们不聊技术,只"以貌取人"。 前言 之前有很多刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩笑...

Fundebug ⋅ 05/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 50分钟前 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

【转】JS浮点数运算Bug的解决办法

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎...

NickSoki ⋅ 今天 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 今天 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 今天 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 9

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部