AngularJs基本语法应用(mvc)

来源：互联网发布：无线网速监控软件编辑：程序博客网时间：2024/06/10 15:38

#定义应用
通过为任一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工作模式。

0 0