AngularJs学习笔记__3、AngularJs模板

来源：互联网发布：2016淘宝客微信教程编辑：程序博客网时间：2024/05/22 06:15

1、新建一个index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh" ng-app="phonecatApp"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><script type="text/javascript" src="js/angular.js"></script><script type="text/javascript" src="js/controller.js"></script><body ng-controller="PhoneListCtrl"><ul><li ng-repeat="phone in phones">{{phone.name}}<p>{{phone.snippet}}</p></li></ul></body></html>

2、在WEB_INF目录下新建一个js文件夹，把angular.js文件放入js文件夹中，另外新建一个controller.js文件。

var phonecatApp = angular.module('phonecatApp', []);phonecatApp.controller('PhoneListCtrl',function($scope){$scope.phones=[   {"name":"荣耀7","snippet":"非常漂亮的一款手机"},   {"name":"小米4","snippet":"性价比非常高的一款手机"},   {"name":"iphone 6S","snippet":"土豪装逼神器"} ];});

启动服务，运行效果如下：

这里用到的一些指令：

ng-repeat：用于循环输出数据。

0 0