一.创建第一个应用程序
首先,链接到Angular库,在HTML文档的<head>标签中定义<script>标签,并给src属性赋值为
库文件路径。如:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
1.创建一个模块(module),如:
var app = angular.module("myApp",[]);
2.使用ng-app指令来定义app的作用域,如:
<body ng-app="myApp">
表示该module可以作用自整个<body>标签中;
3.创建一个控制器(controller),控制器用来管理app的数据,如:app.controller('MainController',['$scope',function($scope){
$scope.title = 'HaHa';
$scope.promo = "HeHe";
$scope.product = {
name:'The Book of Trees',
price:19,
pubdate:new Date('2014','03','08')
};
}]);
创建了一个名为"MainController"的控制器;
4.使用ng-controller指令为controller定义作用域,如:
<div class="main" ng-controller="MainController">
表示在该<div>标签中可以访问控制器的数据;
5.通过表达式访问控制器数据,如:
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<p class="title">{{product.name}} </p>
<p class="price"> {{product.price}}</p>
二.使用过滤器(filter),符号'|'表示将左边的数据输送到右边:
1.currency:格式化货币输出,如:
<p class="price"> {{product.price|currency}}</p>
将使得price以货币单位的形式展示。如下图所示:
<p class="date"> {{product.pubdate|date}}</p>
3.uppercase:转换成大写字母,如:
<p class="title">{{product.name|uppercase}} </p>
三.ng-repeat指令:该指令遍历参数值指定的数组,并展示在相应的标签中,重复该标签直到数组遍历完成。如:
<div ng-repeat="product in products" class="col-md-6">
会使用一个<div>标签来展示控制器中products数组的一个元素。
四.指令简析:指令为一个HTML标签绑定一个行为,当你的app运行时,会在每个标签上寻找指令,如果找到一个,则触发
相应的行为。
五.ng-click指令,给标签绑定一个点击行为,如:
<p class="likes" ng-click="plusOne($index)">+ {{product.likes}}</p>