AngularJS MVC
AngularJS - Model
简介
数据层，在该组件中，可以存储和处理数据，同时，还可以在组件中自定义模版，通过模版实现与界面（view）层的通信和数据交互。
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>匹配方式过滤</title> <script src="components/angular/angular.min.js"></script> <style> .show{ background: #ccc; padding: 8px; width: 260px; margin: 10px; } </style> </head> <body ng-app="a5_1"> <div ng-controller="c5_1"> <div class="show">{{name}}</div> <input type="text" ng-model="score" value="95"> <div class="show">{{score}}</div> </div> <script> var a5_1 = angular.module('a5_1',[]); a5_1.controller('c5_1',['$scope',function($scope){ $scope.name= 'zyt'; $scope.score = '1'; $scope.$watch('score',function(){ console.log($scope.score); }); }]) </script> </body> </html>
AngularJS - Controller
简介
控制层，他的本质是一个JS函数，用于衔接页面模版和逻辑代码，并通过添加对象和行为来增加对象和行为来增强模版中作用域的功能。
创建一个应用的时候，我们需要创建控制器来实现视图模版与逻辑代码间的关联，而实现关联的方法是以scope. new的方法添加。
数据模型：它在控制器中添加之后，可以在控制器对应作用域的视图模版中直接被调用，用于加强作用域中的功能。
exp:scope.name -> controller 中的属性值。
控制器中属性和方法的继承
是通过指令绑定已经存在的视图模版，控制器中的继承是由视图模版的结构来定义的。也就是说，处于子节点的模版控制器可以继承父节点所对应的模版控制器，即可以直接访问父节点控制器中的模型和方法，反之则不能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>控制器中属性和方法的继承</title> <script src="components/angular/angular.min.js"></script> <style> </style> </head> <body ng-app="a5_5"> <div ng-controller="c5_5_p"> <div ng-controller="c5_5_c"> {{paretn_name}}+{{child_name}} <div ng-controller="c5_5_gc"> {{paretn_name}}+{{child_name}}+{{grandchild_name}} </div> </div> </div> <script> var a5_5 = angular.module('a5_5', []); a5_5.controller('c5_5_p', ['$scope', function ($scope) { $scope.paretn_name = 'Z'; }]); a5_5.controller('c5_5_c', ['$scope', function ($scope) { $scope.child_name = 'y'; }]); a5_5.controller('c5_5_gc', ['$scope', function ($scope) { $scope.grandchild_name = 't'; }]); </script> </body> </html>
AngularJS - View
简介
视图层，他的外形取决于视图模版，内部数据来源于控制器。可以通过ng-View指令来加载和切换视图模版，并将视图组件通过ng-controller指令与控制器绑定。
View组件中的模版切换
实现这个功能需要在视图中借助ng-view指令，在控制器中引入$routeProvider服务。
代码
<!DOCTYPE html> <html ng-app="a5_6"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>view change</title> <!-- <script src="components/angular/angular.min.js"></script> --> <!-- <script src="components/angular-route/angular-route.min.js"></script> --> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> </head> <body> <div> <a href="#/">home</a> <a href="#/book">Book</a> <a href="#/game">Game</a> </div> <div ng-view></div> <script> var a5_6 = angular.module('a5_6', ['ngRoute']); a5_6.controller('c5_6_1', ['$scope', function ($scope) { $scope.title = 'this is home page!' }]); a5_6.controller('c5_6_2', ['$scope', function ($scope) { $scope.title = 'this is book page!' }]); a5_6.controller('c5_6_3', ['$scope', function ($scope) { $scope.title = 'this is game page!' }]); a5_6.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/',{ controller:'c5_6_1', template:'<div>{{title}}</div>' }) .when('/book',{ controller:'c5_6_2', template:'<div>{{title}}</div>' }) .when('/game',{ controller:'c5_6_3', template:'<div>{{title}}</div>' }) .otherwise({redirectTo:'/'}); // a5_6.config(['$routeProvider', function ($routeProvider) { // $routeProvider // .when('/', { // controller: 'c5_6_1', // template: '<div>{{title}}</div>' // }) // .when('/book', { // controller: 'c5_6_2', // template: '<div>{{title}}</div>' // }) // .when('/game', { // controller: 'c5_6_3', // template: '<div>{{title}}</div>' // }) // .otherwise({ // redirectTo: '/' // }); }]); </script> </body> </html>- 备注
在写这个demo的代码的时候，遇到了问题，首先刚开始我使用的是最新的js库文件，导致demo失败，后来在网上去查了一个版本，就可以正常使用。在使用的时候需要注意这些地方。