关于AngularJS的一些基础总结

原创 2016年05月31日 15:19:40
<!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 可作用于整个应用中。是各个 controllerscope 的桥梁。用 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();
});

$httpAngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据

<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', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000); //2000毫秒后执行
});

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $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', function($scope, 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 指令直接绑定应用程序数据到 HTMLdisabled 属性。

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']);
版权声明:本文为博主原创文章,未经博主允许不得转载。

angular+ui-router+layui的使用心得

近来,完成公司的一个项目,项目使用angular+ui-router+layui框架开发,由于刚刚接触angularjs,因此遇到各种各样的坑。在这里记下印象最深的几个坑;一、ng-repeat ...
  • Doniet
  • Doniet
  • 2017年07月11日 00:03
  • 2171

ng面试题整理

1.ng-show/ng-hide 与 ng-if的区别?    ng-show/ng-hide是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删来实现的。因此如果我们是...
  • ww430430
  • ww430430
  • 2017年02月22日 10:45
  • 760

关于AngularJS的一些基础总结

名字 :
  • u012519228
  • u012519228
  • 2016年05月31日 15:19
  • 902

一些时间类型的总结

1. 系统时间函数         在编程时,时间函数不可避免的会被使用。linux系统下相关时间的数据结构有time_t,timeval,timespec,tm,clock_t; windows下...
  • pud_zha
  • pud_zha
  • 2013年10月01日 01:52
  • 825

对时间的一些操作总结

由于项目要对时间进行一些数学运算,要使用 access 数据库交互一些时间的信息,于是乎便有了下文。。。 CTime Comparison OperatorsBOOL operator ==( CTi...
  • xum2008
  • xum2008
  • 2010年09月08日 17:15
  • 461

Angular常见面试题

1.angular的数据绑定采用什么机制?详述原理 脏检查机制。 双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有...
  • qq_34543438
  • qq_34543438
  • 2017年05月28日 16:33
  • 2745

ng-model指令使用场景

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
  • qq_21119289
  • qq_21119289
  • 2016年12月22日 19:29
  • 173

JavaEE基础10个小总结

1.JavaScript(DOM) JS是脚本语言,不是编程语言,不需要编译,浏览器会自己识别。 JavaScript组成 ECMAScript:核心,定义JS的基本语法和类型等。 BOM:浏览器对...
  • zqqiang0307
  • zqqiang0307
  • 2016年12月19日 23:48
  • 336

关于博弈论基础知识的一些总结

文章PDF文档:链接地址 博弈论是二人或多人在平等的对局中各自利用对方的策略变换自己的对抗策略,达到取胜目标的理论。 基础的基础 a) 当前执行者想赢。这个是必要的,有时候题目中判别...
  • xf_zhen
  • xf_zhen
  • 2016年07月23日 18:51
  • 481

Angular详解

1、 AngularJS是什么?         angularjs(后面就简称ng了)是一个用于设计动态web应用的结构框架。      首先,它是一个框架,不是类库,是像EXT一样提供...
  • weixin_38747509
  • weixin_38747509
  • 2017年08月15日 14:51
  • 278
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于AngularJS的一些基础总结
举报原因:
原因补充:

(最多只允许输入30个字)