内置指令：以"ng-"开头的html标签属性。
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<style>
.red {
color:red;
}
.blue {
color:blue;
}
</style>
</head>
<body ng-app="App"> <!-- ng-app 指定模块 -->
<ul ng-controller="DemoController"> <!-- ng-controller 指定控制器 -->
<li ng-bind="name"></li> <!-- ng-bind 绑定数据 -->
<li>{{name}}</li> <!-- 模板引擎解析{{}}中的内容 -->
<li ng-show="true">ng-show用来显示/隐藏内容</li> <!-- 为0时,display设为none -->
<li ng-hide="0">ng-hide用来隐藏/显示内容</li> <!-- 0等价于false，为1时,display设为none -->
<li ng-if="1">ng-if用来判断元素是否存在</li> <!-- 为0时,直接删掉该结点 -->
<li><img ng-src="{{path}}" ></li> <!-- 如果用src那么会在{{}}解析之前短暂出现一个出错的图片。ng-src只有在执行指令(解析{{}})时才会解析img标签 -->
<link rel="stylesheet" type="text/css" ng-href="{{path}}" /> <!-- ng-href 类似ng-src -->
<li ng-class="{red:false,blue:true}">ng-class 添加/删除CSS(class)样式</li>
</ul>
<div ng-include="'./footer.html'"></div> <!-- ng-include 包含模板html文件(Ajax请求模板) -->
<input type="text" ng-disabled="true"> <!-- ng-disabled 禁用表单元素 -->
<input type="text" ng-readonly="true" value="Hello World" /> <!-- ng-readonly 只读 -->
<input type="checkbox" ng-checked="true" /> <!-- ng-checked 默认选中 -->
<select>
<option>11</option>
<option ng-selected="true">22</option> <!-- ng-selected 默认选中 -->
</select>
<script src="angular.min.js"></script> <!-- 引入AngularJS框架 -->
<script>
// 创建模块
var App = angular.module('App',[]);
// 创建控制器
App.controller('DemoController',['$scope',function($scope) {
// $scope是一个空对象{}，此对象就相当于MVC中的Model。
$scope.name = "张三";
$scope.path = "aa.png";
$scope.courses = ['MVC','指令','模块化'];
}]);
</script>
</body>
</html>
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
