AngularJs基本语法应用(mvc)

素颜马尾好姑娘i 2022-07-12 07:08 182阅读 0赞

\#定义应用  
通过为任一HTML标签添加ng-app属性  
可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。  
为html添加ng-app表明增个文档都是应用  
//ng-app可以不赋值,但是关联整个模块的时候必须赋值  
<html lang = en ng-app="app">  
  
  
\#定义模块  
AngularJS提供了一个全局对象angular，  
在此全局对象下存在若干的方法，  
其中angular.module()方法用来定义一个模块。   
//通过moudle方法定义模块  
//需要传递两个参数,第一个表示模块的名称  
//第二个表示此模块依赖其它模块  
var app = angular.moudle('app',\[\]);  
应用（App）其本质也是一个模块（一个比较大的模块）。  
  
  
\#定义控制器  
控制器（Controller）作为连接模型（Model）和视图（View）  
的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。  
//app是一个模块实例对象  
//通过这个实例对象定义控制器  
//需要两个参数第一个参数表示这个控制器名称  
//第二个参数是一个数组,这个数组除最后一个单元是函数外  
//其余都是字符串.  
app.controller('StudentController',\['$scope',function($scope)\{  
//模型 moudle  
$scope = \[  
\{name:'xxx',sex:'不详',age:30\},  
\{name:'xxx',sex:'男',age:12\}  
\]  
\}\])   
  
  
\#控制器和视图的关联  
模型（Model）数据是要展示到视图（View）上的，  
所以需要将控制器（Controller）关联到视图（View）上，  
通过为HTML标签添加ng-controller属性并赋值相应的  
控制器（Controller）的名称，就确立了关联关系。   
//添加ng-controller属性,并赋值为相应的控制器名称  
<div ng-controller = 'StudentController'>  
<div ng-repeat= "student in students">  
<h3>\{ \{student.name\}\}</h3>  
<h3>\{ \{student.sex\}\}</h3>  
<h3>\{ \{student.age\}\}</h3>  
</div>   
</div>  
以上步骤就是AngularJS最基本的MVC工作模式。