AngularJS的MVC

最新推荐文章于 2019-11-02 16:09:56 发布

bboyjoe

最新推荐文章于 2019-11-02 16:09:56 发布

阅读量1k

点赞数

分类专栏： AngularJS 文章标签：前端 mvc angularjs

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/48142429

版权

AngularJS 专栏收录该内容

18 篇文章

订阅专栏

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'];
}

视图效果：

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