标签:前端 mvc angular.js
Angular.js中实现MVC的方式:
双向绑定:
<!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"; });
以上部分截图来自慕课网大漠穷秋老师的视频教程.
版权声明:本文为博主原创文章,未经博主允许不得转载。
标签:前端 mvc angular.js
原文地址:http://blog.csdn.net/bboyjoe/article/details/48142429