AngularJSAngularJS安装配备与基础概要整治(上)

起头整理的,可供参考。

安装:

1.率先要安装node.js和它的npm包管理种类。(nodejs相关待整治)

2.安装grunt

  .grunt是二个基于职务的Javascript工程命令行营造筑工程具。

  在dos窗口输入:npm install grunt-cli -g

  具人体模型块安装:npm
install(grunt或grunt模块的称谓) –save-dev

3.安装Karma runner

  在dos窗口输入:npm install karma-cli -g

  安装Karma:npm install karma –save-dev

  安装你项目必要的机件:npm
install karma-jasmine karma-chrome-launcher –sava-dev

4.下载angular.js

  在那几个网站下载:https://code.angularjs.org/

  选定二个2.0之前的本子。

 

一、AngularJS简介

  AngularJS是四个JavaScript框架。它可通过<script>标签添加到HTML页面。

  AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML。

1.AngularJS通过ng-directives扩展了HTML。

  Ng-app指令定义一个AngularJS应用程序。

  Ng-model指令把成分值(比如输入域的值)绑定到应用程序。

  Ng-bind指令把应用程序数据绑定到HTML视图。

2.什么是AngularJS

  AngularJS使得开发现代的单一页面应用程序变得更其简单。

  ·AngularJS把应用程序数据绑定到HTML成分。

  ·AngularJS能够仿造和重复HTML成分。

  ·AngularJS能够隐藏和出示HTML成分。

  ·AngularJS能够在HTML成分“背后”添加代码。

  ·AngularJS支持输入验证。

3.AngularJS指令

  AngularJS指令是以ng作为前缀的HTML属性。

  Ng-init指令初始化AngularJS应用程序变量。

  * HTML5同意扩充的(自制的)属性,以data-初步。

   AngularJS属性以ng-初叶,但是足以采纳data-ng-来让网页对HTML5得力。

4.AngularJS表达式

  AngularJS表达式写在双大括号内:{{expression}}。

  AngularJS表明式把数据绑定到HTML,那与ng-bind指令有异曲同工之妙。

  AngularJS将在表达式书写的地点“输出”数据。

  AngularJS表达式很像Javascript表达式:它们可以蕴含文字、运算符和变量。

5.AngularJS应用

  AngularJS模块(module)定义了AngularJS应用。

  AngularJS控制器(Controller)用于控制AngularJS应用。

  Ng-app指令概念了使用,ng-controller定义了控制器。

  AngularJS模块定义应用:

Var app = angular.module(‘myApp’,{});

  AngularJS控制器控制应用:

App.controller(‘myCtrl’,function($scope){

  $scope.firstName = “John”;

  $scope.lastName = “Doe”;

})

 

二、AngularJS表达式

  AngularJS使用说明式把数量绑定到HTML。

1.AngularJS数字

<div ng-app=”” ng-init=”quantity=1;cost=5”>

<p>总价:{{quantity * cost}}</p>

</div>

  使用ng-bind的同一实例:

<div ng-app=”” ng-init=”quantity=1;cost=5”>

  <p>总价:</p>

</div>

2.AngularJS字符串

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”>

  <p>姓名:{{firstName + “ “ + lastName}}</p>

</div>

  使用ng-bind的一律实例:

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”>

  <p>姓名:</p>

</div>

3.AngularJS对象

<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”>

  <p>姓为{{person.lastName}}</p>

</div>

4.AngularJS数组

<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>

  <p>第三个值为{{points[2]}}</p>

</div>

5.AngularJS表明式与JavaScript表明式

  类似于JavaScript表明式,AngularJS表明式可以包蕴字母,操作符,变量。

  与JavaScript表明式分化,AngularJS表明式能够写在HTML中;AngularJS表达式不协助标准化判断,循环及特别;AngularJS表明式匡助过滤器。

 

三、AngularJS指令

  AngularJS通过被称之为指令的新属性来扩展HTML。

  AngularJS通过嵌入的一声令下来为使用添加效果。

  AngularJS允许你自定义指令。

1.AngularJS指令

  AngularJS指令是增加的HTML属性,带有前缀ng-。

  Ng-app指令初叶化二个AngularJS应用程序。

  Ng-init指令起首化应用程序数据。

  Ng-model指令把成分值(比如输入域的值)绑定到应用程序。

2.数据绑定

  AngularJS中的数据绑定,同步了AngularJS表明式与AngularJS数据。

  在下三个示范中,七个文本域是经过四个ng-model指令同步的。

<div ng-app=”” ng-init=”quantity=1;price=5;”>

  <h2>价格计算器</h2>

  数量:<input type=”number” ng-model=”quantity”>

  价格:<input type=”number” ng-model=”price”>

  <p><b>总价:</b>{{quantity*price}}</p>

</div>

3.重复HTML元素

  Ng-repeat指令会重复二个HTML成分:

<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”>

  <p>使用ng-repeat来循环数组</p>

  <ul>

    <li ng-repeat=”x in names”>

      {{x}}

    </li>

  </ul>

</div>

Ng-repeat指令用在三个对象数组上

<div ng-app=”” ng-init=”names=[{name:’Jani’,country:’Norway’},{name:’Hege’,country:’Sweden’},{name:’Kai’,country:’Denmark’}]”>

  <p>循环对象:</p>

  <ul>

    <li ng-repeat=”x in names”>

      {{x.name + ‘,’ + x.country}}

    </li>

  </ul>

</div>

* AngularJS完美帮衬数据库的CRUD(扩张Create、读取Read、更新Update、删除Delete)应用程序。把实例中的对象想象成数据库中的记录。

4.ng-app指令

  Ng-app指令概念了AngularJS应用程序的根元素

  Ng-app指令在网页加载完成时会自动指引(自动先导化)应用程序。

5.ng-init指令

  Ng-init指令为AngularJS应用程序定义了初步值。

  平时情形下,不利用ng-init。您将使用三个控制器或模块来代表它。

6.ng-model指令

  Ng-model指令绑定HTML元素到应用程序数据。

  Ng-model指令也得以:

  ·为应用程序数据提供品类验证(number、email、required)。

  ·为应用程序数据提供情况(invalid、dirty、touched、error)。

  ·为HTML成分提供CSS类。

  ·绑定HTML元素到HTML表单。

7.ng-repeat指令

  Ng-repeat指令对于集合中(数组中)的各种项会克隆一遍HTML成分。

8.创办自定义的吩咐

  能够运用.directive函数来添加自定义的命令。

  要调用自定义指令,HTML成分上急需添加自定义指令名。

  使用驼峰法来命名二个指令,runoobDirective,但在动用它时索要以-分割,runoob-directive

<body ng-app=”myApp”>

  <runoob-directive></runoob-directive>

<script>

  Var app = angular.module(“myApp”,[]);

  App.directive(“runoobDirective”,function(){

    Return{

      Template : “<h1>自定义指令!</h1>”

    };

  });

</script>

</body>

  可以由此以下方法来调用指令:

    ·元素名

    ·属性

    ·类名

    ·注释

  以下实例形式也能出口同样结果:

  元素名:

<runoob-directive></runoob-directive>

  属性:

<div runoob-directive></div>

  类名:

<div class=”runoob-directive”></div>

  注释:

<!– 指令:runoob-directive –>

*急需在该实例添加replace属性,否则评论是不可知的。

*务必安装restrict的值为”M”才能经过注释来调用指令。

<body ng-app=”myApp”>

  <!-- directive: runoob-directive -->

  <script>

    Var app = angular.module(“myApp”,[]);

    App.directive(“runoobDirective”,function(){

      Return {

        Restrict : “M”,

        Replace : true,

        Template : “<h1>自定义指令!</h1>”

      };

    });

  </script>

</body>

9.限制使用

  可以界定指令只能通过特定的格局来调用。

  通过添加restrict属性,并设置值为”A”,来设置指令只好通过质量的法门来调用:

Var app = angular.module(“myApp”,[]);

  App.directive(“runoobDirective”,function(){

    Return {

      Restrict : “A”,

      Template : “<h1>自定义指令!</h1>”

    };

  });

  Restrict值能够是以下两种:

    ·E只限成分名使用

    ·A只限属性使用

    ·C只限类名使用

    ·M只限注释使用

  Restrict暗中同意值为EA,即能够通过成分名和性质名来调用指令。

 

四、AngularJS模型

  Ng-model指令用于绑定应用程序数据到HTML控制器(input,select,textarea)的值。

  能够将输入域的值与AngularJS创设的变量绑定。

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

  名字:<input ng-model=”name”>

</div>

<script>

Var app = angular.module(‘myApp’,[]);

App.controller(‘myCtrl’,function($scope){

  $scope.name = “John Doe”;

})

</script>

1.双向绑定

  双向绑定,在改动输入域的值时,AngularJS属性的值也将修改:

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

  名字:<input ng-model=”name”>

  <h1>你输入了:{{name}}</h1>

</div>

2.申明用户输入

<form ng-app=”” name=”myForm”>

  Email:

  <input type=”email” name=”myAddress” ng-model=”text”>

  

    不是一个合法的邮箱地址

  

</form>

*上述实例中,提醒音讯会在ng-show属性重回true的事态下显得。

3.运用状态

  Ng-model指令能够为运用数据提供状态值(invalid,dirty,touched,error):

<form ng-app=”” name=”myForm” ng-init=”myText = ‘test@runoob.com’”>

  Email:

  <input type=”email” name=”myAddress” ng-model=”myText” required>

  <p>编辑邮箱地址,查看状态的改变。</p>

  <h1>状态</h1>

  <p>Valid:{{myForm.myAddress.$valid}}(如果输入的值是合法的则为true)。</p>

  <p>Dirty:{{myForm.myAddress.$dirty}}(如果值改变则为true)。</p>

  <p>Touched:{{myForm.myAddress.$touched}}(如果通过触屏点击则为true)。</p>

</form>

4.CSS类

  Ng-model指令基于它们的图景为HTML元素提供了CSS类:

<style>

Input.ng-invalid{

  Background-color: lightblue;

}

</style>

<form ng-app=”” name=”myForm”>

  输入你的名字:

  <input name=”myName” ng-model=”myText” required>

</form>

<p>编辑文本域,不同状态背景颜色会发生变化</p>

<p>文本域添加了required属性,该值时必须的,如果为空则是不合法的。</p>

  Ng-model指令依照表单域的情况添加/移除以下类:

  ·ng-empty

  ·ng-not-empty

  ·ng-touched

  ·ng-untouched

  ·ng-valid

  ·ng-invalid

  ·ng-dirty

  ·ng-pending

  ·ng-pristine

相关文章