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

相关文章推荐

AngularJS基础知识总结

AngularJS 通过 ng-directives 扩展了 HTML。               ng-app 指令定义一个 AngularJS 应用程序。               ng-mo...

AngularJS 基础知识总结(一)

UI 和控制器分离控制器在应用中有三个作用: 在应用模型中设置初始状态  通过$scope 向视图(UI 模板)暴露模型和函数 监视模型发生变化的其他部分并做出相应的动作 如果你有复杂的界面场景,...

AngularJs基础——自定义服务的三种方法以及provider供应商

AngularJs提供了三种方法可以自定义服务,分别是provider、factory、service.请注意三者之间的区别。 有三种方式可以自定义服务: 第一种方式,在module中以回调函数的形式...
  • bboyjoe
  • bboyjoe
  • 2016年01月04日 18:34
  • 1897

AngularJS 中文版 入门 基础 教程

  • 2014年07月23日 14:05
  • 2.99MB
  • 下载

AngularJS入门:01-基础

一、Angular简介 AngularJS*是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。 Angular ...

angularJs基础(2-6)

  • 2017年02月04日 16:12
  • 320KB
  • 下载

angularJs基础(1)

  • 2017年02月04日 16:10
  • 62KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于AngularJS的一些基础总结
举报原因:
原因补充:

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