您的位置：首页 > Web前端 > AngularJS

AngularJS的MVC

2015-08-31 23:12 609 查看

Angular.js中实现MVC的方式：

Angular.js的MVC是借助于$scope来实现的：

双向绑定：

<!DOCTYPE html>
<html lang="zh_CN" ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/angular.min.js"></script>
</head>
<body>
<div class="container">
<!--hello {{'world'}}!-->
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</div>
</body>
</html>

控制器controller：

<!DOCTYPE html>
<html lang="zh_CN" >
<head>
<meta charset="UTF-8">
<title>AngularJs的MVC</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-app="app">
<div class="container">
<div ng-controller="myController">
<input type="text" ng-model="msg"/>
<h2>{{msg}}</h2>
</div>

</div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/myController.js"></script>

</html>

myController.js代码：

//绑定module，设置controller
angular.module('app',[])
.controller('myController',function($scope){
$scope.msg="angular";
});

$scope的用法：

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<style>
.show-scope-demo{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="show-scope-demo">
<div ng-controller="GreetCtrl">
Hello {{name}}!
</div>
<div ng-controller="ListCtrl">
<ol>
<li ng-repeat="name in names">
{{name}} from {{department}}
</li>
</ol>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/Scope.js"></script>
</body>
</html>

Scope.js:

function GreetCtrl($scope,$rootScope){
$scope.name='world';
$rootScope.department="Angular";
}
function ListCtrl($scope){
$scope.names=['Igor','Misko','Vojto'];
}

视图效果：

以上部分内容来自慕课网大漠穷秋老师的视频截图.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航