初识AngularJs

今探视angular。文章将从今三单非常的有的来说,第一有些啊是angular,第二有些,初次使用时用小心的局部事项,第三有,angular基础概念;

一,什么是AngularJs?

AngularJs是为了克服html在构建利用及的阙如而计划之,它是一个JavaScript框架。通过应用我们称为标识符的布局,让浏览器会分辨新的语法。例如使用{{}}进行多少绑定。

AngularJs通过也开发者呈现一个重新胜似层次的架空来简化使用开发,这当拉动福利之又为致使灵活性的减退。AngularJs主要考虑的是构建CURD(增加:create,更新:update,查询:retrieve,删除:delete)应用。像打要图形处理应用这种dom操作频繁和错综复杂的采取则无合乎用其来出。

打表象上来拘禁,AngularJs通过新的性能和表达式扩展了html。比如可一直写在双大括号内部的表达式,带有ng-前缀的各种吩咐等等,让html元素完成了众神奇美妙之政工,这当某种程度上替了我们前要特别在独立的文书中手写的复杂的各种dom操作。举个例子:用原生JavaScript获取一个值,并与给html元素,首先我们设博得到是元素,把其存于一个变量,然后拿急需与给它们的值取到,最后通过赋值运算符或者函数实现赋值。有矣angular之后咱们若用数据导入应用,然后在要素中通过{{变量名}}就可实现让元素赋特定值的操作了。

第二,初次使用AngularJs时需要专注的有的事项。

1.调用:angular.min.js这是减后底公文称,具体路线根据自己本地情况如果早晚。像引用其他js文件一律当<script>标签中引入,需要小心的是对应之代码应该写于援语句之后。

2.ng-app:这是一个限令,之所以在此处便是因为,只要你要开始一个angular引用的习就必定使同外起交道。

先期看下代码:我以一个html应用中定义了点滴只名不见经传之以,因为我道非常有点之知识点又好像,想放在一个网页上运行,其结果是首先只亮正常,第二只一直拿表达式原封不动的出口了。查了产由,这个应该和后的模块定义有关。所以啊,刚起下还是宝宝的管以分开在单身的html文件中开创吧。

       <div ng-app="" ng-init="firstname='ben';lastname='xiaohai'">
                <p>数学运算:{{5+9}}</p>
                <p>字符串:姓{{firstname}},名{{lastname}},姓名{{firstname+lastname}}</p>
            </div>
            <div ng-app="" ng-init="person={firstname:'ben',lastname:'xiaohai'}">
                <p>对象:姓{{person.firstname}},名{{person.lastname}},姓名{{person.firstname+person.lastname}}</p>
            </div>

3.不怕是,不要忘记了,angular是一个JavaScript框架,所以多东西是搭的,不要因为生就忘或者忽视了,比如初始化数据时字符串需要引号,数字不待等等。

老三,AngularJs的基础概念。

有点粗看了下,基础概念大概发生二十几近只,这里大概讲解。

1,angular表达式

angular使用表达式把数据绑定到html,表达式写以双大括号内。最终数额将出口在双括声泪俱下所在位置。angular表达式类似于JavaScript表达式,可含蓄文字,运算符和变量。

数字运算和字符串:

       <div ng-app="" ng-init="firstname='ben';lastname='xiaohai'">
                <p>数学运算:{{5+9}}</p>
                <p>字符串:姓{{firstname}},名{{lastname}},姓名{{firstname+lastname}}</p>
            </div>

多少源为对象时之调用:

     <div ng-app="" ng-init="person={firstname:'ben',lastname:'xiaohai'}">
            姓:{{person.firstname}}
            <p>姓名:{{person.firstname+person.lastname}}</p>
        </div>

2,angular指令

angular通过让称之为指令的新属性来扩大html,通过内置的一声令下也运用上加新职能,并且同意而自定义指令。指令都带有前缀:ng-,如:ng-app,ng-init,ng-model等。它好实现多少绑定,循环生成html元素等等功能。

令实现数量绑定:

        <div ng-app="" ng-init="quantity=1;price=5">
                数据绑定:
                <input type="number" ng-model="quantity" />
                <input type="number" ng-model="price" />
                <p>总价:{{quantity*price}}</p>
            </div>

指令用来循环生成元素:注意ng-repeat=”x in
names”,这里的x可以随意命名,但是后文引用时要同名。比如:<li
ng-repeat=”item in names”>{{item}} </li>

       <div ng-app="" ng-init="names=['ben','xiao','hai']"><ul>
                <li ng-repeat="x in names">
                    {{x}}
                </li>
            </ul>
            </div>

从今定义指令:可通过restrict来限制令的应用范围,E,元素名;C,类名;A,属性名;M,注释。默认值为EA。

script文件中定义:

      var app=angular.module("zdyApp",[]);
            app.directive("zdytag",function(){
                return{
            restrict:"E";
                    template:"<p style='color:red;'>首先声明模块,然后在模块的directive方法里面自定义指令,通过标签形式调用。</p><h1>自定义指令.</h1>"
                };
            })

html中调用:

       <div ng-app="zdyApp"> 
                <zdytag></zdytag>
            </div>

3,angular模型

用以绑定应用程序数据及html(input,textarea等)控制器的价。通俗的说,就是ng-model=“变量”指令指定的变量的价,会跟页面被任何用到拖欠变量的地方联合。

调用script文件中之数额:

script代码:定义了name变量的值。

       var app=angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.name="benxiaohai";
            });

html代码:直接通过ng-model将变量值传为元素。

       <div ng-app="myApp" ng-controller="myCtrl" >
                姓名:<input ng-model="name" />
            </div>

由此ng-model实现多少的双向绑定:

    <p>双向绑定:
            <div ng-app="myApp" ng-controller="myCtrl" >
                姓名:<input ng-model="name" />
                <p>您输入的姓名是:{{name}}</p>
            </div>
        </p>

经ng-model实现输入数据的证实:有了拖欠令,让后文的印证依法

    <p>验证用户输入:model 指定验证内容为用户输入的text。
            <form ng-app="" name="myForm">
                Email:
                <input type="email" name="address" ng-model="text"/>
                这不是一个合法的邮箱地址。
            </form>
        </p>

经ng-model获取使用状态:类似于有了她便起矣一致多级借口,通过不同之名目可以获不同的状态。

    <p>应用状态
            <div ng-app="" name="myForm" ng-init="myText='123@163.com'">
                细心,字符串一定记得用引号,否则程序会发生异常
                Email:
                <input type="email" name="myAddress" ng-model="myText" required/>
                <h1>状态</h1>
                <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
                <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
                <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
            </div>
        </p>

通过ng-model使用相应之css类:不合法时元素样式改变。这里的ng-invalid是好直接下如休用当html文档中命名的。

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>

    <p>css类:当不合法时输入框为水蓝色,输入状态不同颜色不同,这是因为给不同的类定义了不同的样式。
            <form ng-app="" name="myForm">
                <input name="email" ng-model="text" required/>
            </form>
        </p>

4,angular作用域

scope是运在html和JavaScript之间的典型,也就是说是视图和控制器之间的关键,它是一个对象来可用的不二法门和性,可以行使在视图和控制器上。我们当应用angular创建控制器时可以以$scope对象当做参数传递,在视图中我们就算好调用该对象的性能与章程。(或者说值)或者更换一种植说法,就是当你当控制器里面加加scope对象时,视图可以取得这些性。

html代码:

<div ng-app="scopeTest" ng-controller="scopeCtrl">
    <p>{{name}}</p>
</div>

script代码:

<script>
    var app=angular.module('scopeTest',[]); 
    app.controller('scopeCtrl',function($scope){
        $scope.name="我是通过$scope对象定义的值,通过名称传到视图上。";
    })
</script>

当大型项目中scope会有意向范围,可能会见起多单$scope,可以通过$rootscope调用根作用域。

5,angular控制器

 

6,angular过滤器

7,angular service

8,angular HTTP

9,angular select

10,angularSQL

11,angular HTMLDom

12,angular事件

13,angular模块

14,angular表单

15,angular输入验证

16,angular API

17,angular Bootstrap

18,angular包含

19,angular动画

20,angular依赖注入

21,angular路由

22,angular应用

 

相关文章