初识AngularJs

先天看望angular。小说将从四个大的1部分来说,第三部分怎么着是angular,第3有些,初次使用时索要专注的1些事项,第3局地,angular基础概念;

一,什么是AngularJs?

AngularJs是为了制服html在创设利用上的供不应求而安插的,它是一个JavaScript框架。通过采用大家誉为标识符的布局,让浏览器能够分辨新的语法。例如使用{{}}进行数量绑定。

AngularJs通过为开发者展现三个越来越高层次的抽象来简化使用开发,那在带来有利的还要也导致灵活性的回落。AngularJs主要思索的是创设CURubiconD(扩大:create,更新:update,查询:retrieve,删除:delete)应用。像娱乐也许图形处理应用那种dom操作频仍和复杂性的施用则不切合用它来开发。

从表象上来看,AngularJs通过新的属性和表明式扩大了html。比如能够平素写在双大括号里面包车型客车表明式,带有ng-前缀的各类指令等等,让html成分完毕了比比皆是神奇美艳的业务,这在某种程度上代表了大家事先供给专门在单身的公文中手写的复杂性的种种dom操作。举个例子:用原生JavaScript获取二个值,并赋给html元素,首先大家要取到这几个元素,把它存于1个变量,然后将急需赋给它的值取到,最终经过赋值运算符也许函数达成赋值。有了angular之后大家只要将数据导入应用,然后在要素内部通过{{变量名}}就足以兑现给元素赋特定值的操作了。

贰,初次使用AngularJs时须求注意的有些事项。

一.调用:angular.min.js那是缩减后的文书名,具体途径依照本身本地情况而定。像引用别的js文件1律在<script>标签中引进,须要注意的是呼应的代码应该写在引用语句之后。

二.ng-app:那是一个限令,之所以放在此处便是因为,只要你要从头三个angular引用的练习就一定要和他打交道。

先看上面代码:笔者在二个html应用中定义了八个名不见经传的行使,因为本人觉着相当小的知识点又象是,想放在一个网页上运维,其结果是首先个显示符合规律,第1个平素将表明式原封不动的出口了。查了下原因,这么些相应和前面包车型大巴模块定义有关。所以啊,刚初阶接纳或然婴儿的把利用分开在独立的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表单

壹五,angular输入验证

16,angular API

17,angular Bootstrap

18,angular包含

19,angular动画

20,angular依赖注入

21,angular路由

22,angular应用

 

相关文章