AngularJS基础

来源：互联网发布：淘宝网店赚钱编辑：程序博客网时间：2024/05/22 16:56

一.创建第一个应用程序

首先，链接到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以货币单位的形式展示。如下图所示：

2.date:格式化日期输出，如：

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

0 0