学习angerJs

  1. 如何引入列表
    可以通过script引入,如果是引入的话,建议用在body元素的底部,这样可以提高网页加载的速度
  1. 基本的信息
    AngularJs通过ng-directives 扩展了HTML
    ng-app 指令定义一个AngulatJs应用程序 告诉AngularJS应用程序的所有者
    mg-model 指令把元素值(比如输入域的值)绑定到应用程序
    ng-bind 指令应用程序数据绑定到HTML视图
    ng-init:指的是给应用程序的变量初始化ng-init=”firstName=’John’”
    HTML5允许扩展的(自制的)属性,以data-ng-来表示
    AngularJS表达式:{{expression}}与ng-bind是一样的功效
    angularJS模块:
    module(模块) angular.module(“myApp”,[]);
    app.controller(‘myCtrl’,function(scope){scope.firstName=”Jonn”;
    $scope.lastName=”Doe”;
    });
    controller(模块)
    AngularJS 表达式与javaScript的区别:表达式可以在HTML中,表达式不支持条件判断
    循环和异常
    AngularJS的表达式支持过滤器
    ng-repeat 重复html的元素ng-repeat 重复数组或者是list x in repeat
    directive自定义指令,这个可以通过四个渠道获得,一是元素名,二, 属性 三类名 四、注释
    应用directive的简单案例:

    var app = angular.module("myApp",[]); app.directive("runoobDirective",function(){ return { template:"

    自定义指令!

    " } })


    特别注意:当html页面中引入js的时候,要考虑到js的引入顺序,如果引入的js的顺序不正确,那么将不会出现逾期的效果。

  2. angularJS指令
    ng-app:程序的根元素
    ng-init:可以给程序设置一个初始化的值,这个指令一般是用不到的,当在程序中使用时,一般是通过控制器或者是模块来实现初始化。
    ng-model:绑定html元素到应用程序中的数据,除了这个作用,它也可以提供类型验证,提供状态,为html元素提供css,绑定html元素到html表单。他是绑定应用程序到HTML控制器(input,select,textarea)的值。
    ng-repeat:它是为集合中的每个项复制一个html元素。
    设置的指令也可以设置他的使用范围:e代表元素,a代表属性,c代表类,m代表注释。restrict设置的默认值是EA
    angularJs之Scope,他是html和script之间的纽带,它是一个对象,里面有方法和属性
    rootScope:他的作用域在app中,他是app中各个controller之间的桥梁。用rootScope接收的值,在整个app中都是可以应用的。
    ng-controller:控制器,他是控制应用程序的,他是javaScript对象。
    angularJS-过滤器:可用于转换数据。currency:货币,filter:从数组中选择一个子集,lowercase:变小写,orderBy:根据某个表达式排列数组,uppercase:变大写
    表达式中添加过滤器,形式为|


  3. filter的应用其实很神奇,可用于页面的查找,全局查找
 <div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div> 

还可以自定义过滤器:

<div ng-app="myApp" ng-controller="myCtrl">


姓名: {{ msg | reverse }}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

4.angularJS服务(service)
locationURL http服务:服务向服务器发送请求,并响应服务器传送来的数据。
timeout: interval:更新服务的,每隔一段时间就更新页面。
5.select 选择是可以循环显示的,如果要select选项有一个默认值,那么要通过ng-init=(数组的读取形式)。
6.对于HTML应程序,通常是把脚本放在的下面。但是angularJS**必须注意**,要么放在head中,如果放在body中,则必须放在方法的前面,因为module必须要在库引入的时候才可以应用。
7.ng-model绑定参数值。
8.表单的验证,前端的表单的验证是不足够的,为了确保数据的准确性,后端的验证也是必须的。angularJS的类型有email类型,所以在表单中有邮件,它的验证是非常方便的。
表单验证的数据:dirty,valid,invalid,pristine。
9.angularJS的依赖注入
它的依赖注入方式提供了5个参数,value,provider,factory,service,constant
value:向控制器传递值,这个一般发生在配置阶段。
factory:用于函数的返回值
provider:提供一个service和factory.
constant:用来在配置阶段传递参数,注意,这个常量在配置阶段是不可用的。
本文参考:http://www.runoob.com/angularjs/angularjs-intro.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值