关于AngularJS的一些基础总结

发布时间：2020-12-17 10:08:33 所属栏目：安全来源：网络整理

导读：!DOCTYPE html html head meta charset = "utf-8" script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" / script / head body div ng-app = "" p 名字 : input type = "text" ng-model = "name" / p h1 Hello {{ name }} / h1 / div

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html>

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

ng-app 指令告诉AngularJS,<div>元素是AngularJS应用程序的所有者
ng-controller 定义了控制器
ng-model 指令把输入域的值绑定到应用程序变量name
ng-bind 指令把应用程序变量name绑定到某一个段落的innerHTML
ng-init 指令初始化AngularJS应用程序变量,比如:ng-init="firstName='John'"

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

模块定义了一个应用程序。模块是应用程序中不同部分的容器。
模块是应用控制器的容器。控制器通常属于一个模块。

<div ng-app="myApp" ng-controller="myCtrl"> </div>

<script type="text/javascript"> var app = angular.module('myApp’,[]); //创建模块 app.controller('myCtrl',function($scope){ }); </script>

使用模块来为你应用添加自己的指令：

<div ng-app="myApp" runoob-directive></div>
<script> var app = angular.module("myApp",[]); app.directive("runoobDirective",function() { return { template : "我在指令构造器中创建!" }; }); </script>

//模块和控制器包含在 JS 文件中
//<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

ng-repeat 指令会重复一个HTML元素,对于集合中（数组中）的每个项会克隆一次 HTML 元素

<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>

ng-model 指令可以为应用数据提供状态值(invalid,dirty,touched,error):

$dirty//表单有填写记录
$valid//字段内容合法的
$invalid//字段内容是非法的
$pristine//表单没有填写记录

myForm.user.$dirty && myForm.user.$invalid

排序显示，可以使用 orderBy 过滤器:

<tr ng-repeat="x in names | orderBy : 'Country'">

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用

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

currency//格式化数字为货币格式。
filter//从数组项中选择一个子集。
lowercase//格式化字符串为小写。
orderBy//根据某个表达式排列数组。
uppercase//格式化字符串为大写。

<p>姓名为 {{ lastName | uppercase }}</p>

$location 服务，它可以返回当前页面的 URL 地址

var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location) {
    $scope.myUrl = $location.absUrl();
});

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据

<script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope,$http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); </script>

$http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中

$timeout 服务访问在规定的毫秒数后执行指定函数

var app = angular.module('myApp',[]);
app.controller('myCtrl',$timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  },2000); //2000毫秒后执行
});

$interval 服务访问在指定的周期(以毫秒计)来调用函数或计算表达式

var app = angular.module('myApp',$interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    },1000);//每1000毫秒执行一次
});

创建自定义服务

<p>自定义服务，用于转换16进制数：</p>
<script> var app = angular.module('myApp',[]); app.service('hexafy',function() { this.myFunc = function (x) { return x.toString(16); } }); app.controller('myCtrl',hexafy) { $scope.hex = hexafy.myFunc(255); });

ng-options 指令选择值是一个对象

ng-options="x for (x,y) in cars"选择的值为在 key-value 对

ng-options有以下格式的语法

//for array data sources:
-----------------------

label for value in array
select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr //for object data sources: ------------------------ label for (key,value) in object select as label for (key,value) in object label group by group for (key,value) in object select as label group by group for (key,value) in ob

{{ $index + 1 }}显示序号($index从0开始)

ng-if=“$odd” 表示判断 $odd(奇数)/$even(偶数)

$http.get("url").success(function ($){});

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

ng-show 指令隐藏或显示一个 HTML 元素。ng-hide 与之相反

ng-click 指令定义了 AngularJS 点击事件。
toggle() 函数用于切换 myVar 变量的值（true 和 false）

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证,你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证

angular.lowercase()//转换字符串为小写
angular.uppercase()//转换字符串为大写
angular.isString()//判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()//判断给定的对象是否为数字，如果是返回 true。
angular.copy($scope.master) //复制对象

$scope.$watch('lName',function() {$scope.test();}); //监控模型变量

ng-include 指令来包含 HTML 内容

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：<body ng-app="ngAnimate">
如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：

var app = angular.module('myApp',['ngAnimate']);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!