AngularJS中的MVC_angular.js中的mvc-CSDN博客

本文链接：https://blog.csdn.net/a15028596338/article/details/85052714

Controller

Controller使用过程中的注意点：

不要试图去复用Controller，一个控制器一般只负责一小块视图
不要在Controller中操作DOM，这不是控制器的职责。因为操作DOM速度很低，会导致浏览器重新布局
不要在Controller中做数据格式化，ng有很好用的表单控件
不要在Controller里面做数据过滤操作，ng有$filter服务
一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行

angular.module('myModule', [])
  .controller('myCtrl', ['$scope', function($scope){
	  
 }])
  .controller('myCtrl2', ['$scope', function($scope) {
	  
  }])

如何复用Model

example.html

<html data-ng-app>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <input data-ng-model="greeting.text">
      <p>{{greeting.text}},Angular</p>
    </div>
     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  </body>
</html>

运行结果：

如何复用view

使用directive实现view的复用。

example.html

<html data-ng-app="HelloAngular">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
     <hello></hello>
     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
     <script src="app.js"></script>
  </body>
</html>

app.js

angular.module('HelloAngular',[])
   .directive('hello', function() {
	return {
		restrict : 'E',
		template : '<div>Hi everyone!</div>',
		replace : true
	}
});

运行结果：