Angular JS 学习

input 

type ="text" 文本框

文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。

ng-model=

ng-app=""

ng-controller

ng-init=

ng-bind=

AngularJS 指令

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

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义了 AngularJS 应用程序的 根元素。

  ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

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

                 可以将输入域的值与 AngularJS 创建的变量绑定。

  ng-model 指令也可以：

•  为应用程序数据提供类型验证（number、email、required）。
•  为应用程序数据提供状态（invalid、dirty、touched、error）。
•  为 HTML 元素提供 CSS 类。
•  绑定 HTML 元素到 HTML 表单。

  

 ng-model 指令根据表单域的状态添加/移除以下类：

• ng-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid
• ng-invalid 未通过验证的表单
• ng-dirty
• ng-pending
• ng-pristin

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

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

  eg: ng-init="quantity=1;cost=5"

  使用 ng-init 不是很常见。您将使用一个控制器或模块来代替它。

ng-repeat 指令会重复一个 HTML 元素

AngularJS 表达式

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

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。eg:

  <p>姓名为 <span ng-bind="name"></span></p>
  <p>姓名为 : {{name}}<p>

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

 

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

 

AngularJS 应用

AngularJS 应用组成如下：

• View(视图), 即 HTML。
• Model(模型), 当前视图中可用的数据。
• Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

 

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用，应用在<div> 中执行

ng-controller 指明了控制器。设置了 controller 对象 名

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

函数 customersController 是一个标准的 JavaScript 对象构造器。

AngularJS 模块定义应用:

//AngularJS 模块
var app = angular.module('myApp', []);

AngularJS 控制器控制应用:

//AngularJS 控制器
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

AngularJS 过滤器可用于转换数据 

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

 

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

ng-show 指令隐藏或显示一个 HTML 元素。

ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。

你可以使用表达式来计算布尔值（ true 或 false）

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 HTML 元素可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见 。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

AngularJS 有自己的 HTML 事件指令。

ng-click 指令定义了 AngularJS 点击事件。

 

AngularJS 表单是输入控件的集合。

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

• input 元素
• select 元素
• button 元素
• textarea 元素

Input 控件使用 ng-model 指令来实现数据绑定。eg:<input type="text" ng-model="firstname">

Checkbox（复选框）

checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中：

Radio （单选框）

我们可以使用 ng-model 来绑定单选按钮到你的应用中。

单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。

Select   (下拉菜单)

使用 ng-model 指令可以将下拉菜单绑定到你的应用中。

ng-model 属性的值为你在下拉菜单选中的选项：

HTML 表单

HTML 表单通常与 HTML 控件同时存在。

AngularJS 输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

路由 

ng-router

ui-router

 ************************************************************************************************************************************************

制作下拉框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，使用 ng-options 指令，选择的值是一个对象

我们也可以使用ng-repeat 指令来创建下拉列表，ng-repeat 有局限性，选择的值是一个字符串

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

**********************************************************************************************************************************************

关键字

$scope

$state 

$state对象是什么意思呢？里面也有一些方法, 最常用的$state.go()这个方法，其实就是路由的跳转。$state(url, params, {reload: true});跳转到指定的url状态，最后传递参数，reload为true表示会重载。其实这个和ui-sref本质上实现的是一个功能 a链接中 ui-sref="user({id:1,name:'lihao'})"同样带参数实现跳转，用$state对象方法$state.go('user', {id:1, name:'lihao'}); 效果一样。

 $state.includes方法用于判断当前激活状态是否是指定的状态或者是指定状态的子状态.

$stateParams 

注入$stateParams模块后，其实$stateParams就是一个对象，这个对象其实就是获取传递的参数。

Angularjs 弹出框￥modal

$modal只有一个方法：open，该方法的属性有：

• templateUrl：模态窗口的地址

• template：用于显示html标签

• scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScope

• controller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入

• resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()

• backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭

• keyboard：当按下Esc时，模态对话框是否关闭，默认为ture

• windowClass：指定一个class并被添加到模态窗口中

open方法返回一个实例，该实例具有如下属性：

• close(result)：关闭模态窗口并传递一个结果

• dismiss(reason)：撤销模态方法并传递一个原因

• result：一个契约，当模态窗口被关闭或撤销时传递

• opened：一个契约，当模态窗口打开并且加载完内容时传递的变量

另外，$modalInstance扩展了两个方法$close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器

1.引入$modal模块

如：angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]);

2.执行调模态框 函数

var ModalDemoCtrl = function($scope, $modal, $log) {  
            $scope.items = [ 'item1', 'item2', 'item3' ];  
            $scope.open = function() {  
                var modalInstance = $modal.open({         //创建弹框对象 
                    templateUrl : 'myModalContent.html',  //template:'html元素模板'
                    controller : ModalInstanceCtrl,       // 初始化模态范围 
                    resolve : {  
                        items : function() {  
                            return $scope.items;  
                        }  
                    }  
                });  
                modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数  
                    console.log('modal is opened');  
                });  
 

3.创建模态框控制器

app.controller('EditModuleCtrl', ['$scope', '$modalInstance', 'BookService', '$stateParams', 'items', function($scope, $modalInstance, BookService, $stateParams, items) { //依赖于modalInstance 
    //items为传过来的值 
    $scope.modalBack = function() { 
      //执行模态框内部操作 
    } 
  
    $scope.ok = function() { 
      $modalInstance.close($scope.textid); //关闭并返回当前选项 
    }; 
    $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); // 退出不执行任何操作 
    } 
  }])

模板就是如何显示的数据  

数据的内容就是 controller:xxxCrtl  控制的