Angualr JS 学习笔记(一)《基础知识》

 1、基本表达式 双括号  {{ }}

  这是一个js 表达式,讲表达式进行计算的结果显示出来。如果此处输出的是JavaScript中的变量,则此处会自动的随JavaSript变量的变换而变化。

2、AngularJS 初始化 ng-app

ng-app 可以将网页自动化初始为一个angular JS应用,这样才能在网页中使用各种angular JS提供的功能。

ng-app 标签可以放置在<html>标签或者<body> 标签上。也可以放置在html页面的任何一个标签上。

3、Angular JS 的作用域 (核心功能之一)

  ng-app 声明放置的位置,让我们的JavaScript代码有了作用域的概念,降低了代码之间不期望的一些互相影响。

4、引入文件的顺序

 在项目中引入文件的顺序的不同会造成不同的差异。在angular js 项目中需要先讲angular.js所依赖的相关文件先引入后再引入自己所编写的js 文件,如果顺序颠倒网页将不能正常显示。

5、控制器 ng-controller (核心功能之一)

控制器 ng-controller 是使用Angular JS的核心功能之一,通过 ng-controller 真正应用作用域来制作功能的核心部分。

在 app.js 中 ,创建一个控制器的实例:

 

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

App.controller("FirstCtrl",function($scope){

$scope.data = {

message:"hello",//变量

open:function(){ //方法

}

};

});

 

 

在 html文件中 可以通过 一下方式调用:

 在 JS文件中通过$scope 把要显示的变量或方法绑定到 html 代码中。

6、为什么在 Angular JS中额外对传入数据封装到ctrl 中呢?

因为 angular Js 中具有 filter 或指令(directive)等功能、或者将数据在多个ng-controller 之间共享,如果不对数据进行二次封装,可能会导致数据互相访问不到的情况。

7、数据绑定 data-bingding 

  在数据绑定中,我们可以将变量和功能的绑定。一般的属性实现双向绑定输入框值等使用ng-model。

8、ng-if、ng-show与ng-hide 的异同

   相同点:都可以通过配置参数实现元素的显示与隐藏。

  不同点:ng- if ,在元素不显示的情况下,ng-if 中包含的内容,会被全部从html中移除掉。

而ng-show 、ng-hide 则只是利用CSS 控制将内容隐藏起来。

9、 重复语句 ng-repeat 

  9.1)使用ng-repeat 对一个列表的数据进行遍历并显示出来。

  9.2)$index    在实际的使用场景中,如果我们使用表格来管理信息,可能对与每一行都会有一些对应的操作,那么是如何在ng-repeat 中知道是哪一行被点击了呢? 这就需要Angular Js中的$index 这个字段。 注意:$index 是从0开始计算的。

 

效果:

10、过滤器  filter :  |    (Angular JS 强大的功能之一)

如:{{1234 | number: 2}}     //1234.00   显示数据为两位数

以下为 angular JS自带的filter 

11 、 多个过滤器同时应用

angualr JS 支持多个 filter 同时应用

{{ list | orderBy:'name' | json }}  //将list 的内容按名字进行排序并输出 json 文本

 

12、 创建自己的过滤器

      例子:创建一个将文字全部翻转过来的过滤器。

     在app.js中 增加如下代码:

    APP.filter("reverse",function(){

    return  function(text){

     return text.spilt(" ").reverse().join("");

     }

   })

 

 13、样式选择器 ng-class / ng-style

ng-class 的用法就是 在html 元素中设置ng-class=“表达式”,表达式可以是strng、object、array 三种类型。

第一种: 表达式为object    [在元素class 比较多的时候使用]

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">

对象中的key-value 对,key 表示的是class 的名称,value 表示的是该html 元素是否有这个class,如果value为true,则 html元素就属于这个class,如果value 为false ,那么html 元素据不属于这个class.A

第二种:表达式为string 

这种将 ng-class绑定到了input 的输入值上,可以通过修改$scope.style 的值设置为ng-class

第三种 表达式为数组(或对象数组)

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值