​下载AngularJs​

ng-app

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<div>{{6+6}}</div>
<div ng-app>{{6+6}}</div>

【达内课程】H5前端开发之Angular.js_ico

ng-init

<body ng-app>
<span ng-init="age=18"></span>
{{age}}
</body>

【达内课程】H5前端开发之Angular.js_mvc_02

MVC

<html ng-app="MyApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
//mvc中的model
function loginModel($scope){
//联网成功
$scope.result = "登录成功";
}
//mvc中controller把model和view联系起来
//第二个参数是一个配置数据,[]空数组
var myModule = angular.module("MyApp",[]);
myModule.controller("loginController",loginModel);
</script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style type="text/css">
body{
margin: 100px;
font-size: 20px;
}
</style>
</head>
<body ng-app>
<!--mvc中的view-->
<div ng-controller="loginController">
{{result}}
</div>
</body>
</html>

【达内课程】H5前端开发之Angular.js_css_03

数据绑定

【达内课程】H5前端开发之Angular.js_mvc_04

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/angular.js"></script>
<script type="text/javascript">
//实体类
function UserEntity(name,icon){}
function showModel($scope){
//初始化数据
var object = new UserEntity();
object.name = "王传君";
object.icon = "img/chuanjun.jpg";
//创建数组userArray,里边放了一个数据,object
$scope.userArray = [object];

$scope.add = function(){
var name = $("#name").val();
var object = new UserEntity();
object.name = name;
object.icon = "img/bingbing.jpeg";
$scope.userArray.push(object);
}
}
var myModule = angular.module("MyApp",[]);
myModule.controller("showController",showModel);
</script>

<style type="text/css">
body{
margin: 100px;
font-size: 20px;
}
</style>
</head>
<body ng-app="MyApp" ng-controller="showController">
<input id="name"/>
<input ng-click="add()" type="button" id="add" value="添加"/>
<table border="2" cellpadding="5">
<tr><td>编号</td><td>名字</td><td>图像</td></tr>
<tr ng-repeat="user in userArray"><td>{{$index+1}}</td><td>{{user.name}}</td><td><img src="{{user.icon}}" width="100" height="100"></td></tr>
</table>
</body>
</html>