1.文件

js目录存放位置
2.helloworld.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<meta name="keywords" content="HelloWorld" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="js/common/angular.min.js"></script>
<script src="js/common/angular-ui-router.min.js"></script>
</head>
<body ng-app>
<input type="text"
ng-model="name"
placeholder="Enter your name">
<h1>Hello {{name}}</h1>
</body>
</html>
3. 页面展示

HelloWorld页面展示
4. 解析
- ng-app: 表示启动AngularJS,并指定body归AngularJS控制
- ng-model: 表示数据model层
- {{ }}: 花括号等同于ng-bind,属于view层,将model层数据在此处渲染
网友评论