AngularJS 前端 MVC 的设计与搭建
2016-03-30 00:00
429 查看
代码
#未引入MVC框架之前的代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>AngualrJS进阶</title> <link rel="stylesheet" type="text/css" href="css/foundation.css"> </head> <body style="padding:10px;"> </body> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> </script> </html>
#引入MVC框架后的代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>AngualrJS进阶</title> <link rel="stylesheet" type="text/css" href="css/foundation.css"> </head> <body style="padding:10px;" ng-app="app"> <!--既然这里使用了一个变量名app,绑定AngularJS管理边界,表示AngularJS的作用域,我们就需要在js中声明一个变量,这里采用模块定义方法,注意这里是Module模块,而不是Model模型,即这里的Module不是MVC中的M--> <div ng-contrller="myCtrl"> <!--这里使用我们js中定义的控制器,这个控制器的管理边界就是该div--> <input type="text" ng-model="msg"> <h1>{{msg}}</h1> <!--将msg变量绑定到h1标签--> </div> </body> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("app",[]) <!--app是我们定义的模块变量,不是模型,[]是引入AngularJS之前定义的其他模块--> .controller("myCtrl",function($scope){ <!--这里利用controller定义一个控制器变量myCtrl,$scope是我们的应用程序所指向的html的元素,也就是模型Model--> $scope.msg="angular"; }); <!--这个controller就是一个小型的MVC,controller就是C,$scope就是M,通过$scope.msg将Model双向绑定到View上, 即将$scope这个Module的msg绑定到h1这个View元素--> </script> <!--建议将AngularJS文件放入一个单独的JS文件,如下:<script src="js/myctrl.js"></script>,以后就可以在myctrl.js中编写控制代码--> </html>
相关文章推荐
- [angularjs] angularjs系列笔记(八)事件
- angular先加载页面再执行事件,特别在动态生成id,然后做echarts等图表
- AngularJS服务总结
- AngularJS浅谈
- AngularJS 动态设置select的默认selected
- ui-router搭建的angularjs模板
- angular常用功能
- ionic(angularjs)select下拉选择第一个选项为空白的解决办法
- Angularjs实现多个页面共享数据的方式
- 七步从AngularJS菜鸟到专家(7):Routing
- 七步从AngularJS菜鸟到专家(6):服务
- 七步从AngularJS菜鸟到专家(4和5):指令和表达式
- 10012---AngularJS表单提交例子
- Angularjs promise对象解析
- 基于Angularjs实现分页
- angularjs ng-click传参控制ng-repeat元素显示与隐藏
- AngularJS Eclipse——新手入门【翻译+整理】
- AngularJS 事件
- AngularJS 过滤器(filter)
- AngularJS日期格式化