AngularJS安装配备以及基础概要整治(上)

先前整理的,可供参考。

安装:

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

相关文章