angular_基本指令_控制器_多控制器_模块化思想

本文链接：https://blog.youkuaiyun.com/zhuoss/article/details/120818104

基本使用

指令

代码目录

[an_angular_基本指令 - 快捷方式.lnk](…\ab_code\an_angular_基本指令 - 快捷方式.lnk)

ng-app

	描述：AngularJS框架在使用的时候除了需要引入框架文件之外，还需要为框架指明一个边界
		  告知框架在哪个范围内生效。如果不使用边界指令进行声明，则AngularJS框架引入失败。
		  习惯上写在html标签之内，表示在当前页面中angularJS都能正常使用
	语法：<html ng-app></html>
	注意：边界指令是使用NG框架必须使用的一个指令，不写一定使用错误

ng-init

	描述：NG框架中规定使用本指令来对边界内部的数据模型(NG变量们)进行初始化操作
		  ng-init并没有规定具体的必须摆放位置，但习惯上放在body上
		  会在页面加载后，自动对内部规定的数据模型进行初始化操作
	语法：<body ng-init='message="hello AngularJS"'></body>

ng-model

	描述：NG框架规定ng-model用来对input或textarea这类
		  用于收集用户信息的标签进行数据绑定
		  ng-model所赋的值，即为【保存有用户输入内容的NG变量】
	语法：<textarea ... ng-model='userInfo'></textarea>

ng-bind

	描述：NG框架中提供了一个用于对非输入性的标签使用的
		  类似于{{}}呈现指令的辅助指令
		  即为ng-bind
		  作用是能够将NG变量绑定到想要显示的标签之上，
		  并且在NG框架加载失败的时候，也不会直接将语法错误暴露出来
	语法：<span ng-bind='message'><span>

ng-controller

概述

	1.angular.module()方法
	描述：本方法是NG框架中提供，用来生成【页面数据模型】的方法
	语法：var 模型名称 = angular.module('边界名称', [注入信息])
	说明：因为现在还没有涉及到注入内容，因此暂时空置即可
	例子：var myApp_module = angular.module('app', []); 

	2.声明控制器指令ng-controller
	描述：本指令用来在页面中声明哪一个元素为控制器
		  控制器，就是用来操作数据和视图的部件。
	语法：<html ng-controller='mainController'>...</html>
	注意：只要声明一个标签拥有控制器，这个控制器在脚本中就必须写出！！

	3.实现控制器方法*.controller()
	描述：本方法是NG框架在script脚本中提供，用来生成【页面控制器】的方法
	语法：页面数据模型名称.controller('控制器名称'，['$scope', function ($scope){...}]);
	例子：app.controller('mainController', ['$scope', function ($scope){...}]);

控制器

代码图

多个控制器

代码图

ng-repeat

概述

描述：本指令用来遍历NG变量，并根据其进行构建页面html元素
		语法：<E ng-repeat='任意变量名 in NG变量 track by $index'>{{任意变量名}}</E>
		说明：track by $index 表示允许有重复内容存在，如果不写出现重复内容会报错
		例子：<li ng-repeat='pname in names track by $index'>{{pname}}</li>
		补充：ng-repeat指令必须在controller中对NG变量赋值之后才会生效
			  单独的ng-repeat毫无用处，因为NG变量不存在，没法赋值。

基本使用

元素重复

问题代码图

解决代码图

关键

ng-click

概述

描述：NG框架中通过对元素标签添加【ng-事件名】指令，来对元素添加事件监听
			  而事件监听的回调函数需要在controller中，通过$scope来实现
		说明：整个过程类似html事件
		语法：<E ng-事件名称='回调函数名(NG变量)'></E>
			  ...
			  $scope.回调函数名 = function (形参){
				 //在函数中形参就是传入的NG变量的值
			  };
			  ...
		例子：
			<button ng-click='func()'>点我调用controller中的函数</button>
			app.controller('mainController', ['$scope', function ($scope){
				$scope.mainTitle = 'lesson4_事件监听';
				$scope.func = function (){
					console.log('here is a func');
				};
			}]);

基本使用

代码图

输出效果

参数传递

代码图

多控制器思想与app结构模块化

概述

	描述：能够看到angular的操作，实际上脚本代码都是写在controller之中的。
		  而刚刚我们将所有的脚本都堆积到一个控制器中的操作
		  虽然理解上变得容易，但是实际开发过程中则会造成灾难

		  所以为了便于团队开发，为了便于维护
		  NG提出了【多控制器思想】
	说明：
		 (1)多控制器思想：
		 	 类似于div中的布局思想，是将控制器按照页面的不同模块功能进行切分
		 	 一个控制器只用来控制一个功能模块，多个控制器之间互不影响，独立工作。
		 (2)优势：
		 	 分工明确，代码清晰，便于维护
		 	 当系统出现问题，能够立即定位到问题坐标
		 (3)弊端：
		 	 对于初学者而言，前期代码的架构会变得很繁琐，对初学者不是很友好。
	强调：
		 (1)每一个控制器只要被声明，就必须通过.controller实现
		 	即便控制器中没有代码，也必须写出。
		 (2)每一个控制器作用域可以认为是嵌套的，
		 	即外层controller可以直接访问到内层controller内的NG变量
		 	而同级controller之间互不影响
		 (3)对于程序，习惯上mainController作为用户默认加载页面的根控制器
		 	有且仅有唯一一个