您的位置:首页 > Web前端 > AngularJS

angularJS笔记

2015-09-14 14:37 661 查看
1、MVC

ng-app: html表头处,每个htnl文件只能有一个ng-app

ng-controller :js文件中定义

ng-model:只要引用了angularJS就可以使用

  js文件代码如下:

var myMoudle = angular.module("HelloAngular",[]);

myMoudle.controller("HelloAngular",['$scope', //控制器 C
function HelloAngular($scope){
$scope.greeting = {
text: "Hello"
}
}
])
myMoudle.directive("hello",function(){  //重定义前端 V
return{
restrict : 'E',
template: '<div>Hi everyone!',
replace: true
}
});


  html文件代码如下:

<!doctype html>
<html ng-app = "HelloAngular">
<head>
<meta charset = "utf-8">
</head>
<body>
<div ng-controller = "HelloAngular">
<p>{{greeting.text}},Angular</p>
<p>{{greeting.text}},Angular</p>
<hello></hello>
</div>
<div>
<input ng-model = "greeting.text"/> <!--model M-->
<p>{{greeting.text}},Angular</p>
</div>
</body>

<script  src = "../../node_modules/angular/angular.js"></script>
<script  src = "Hello_Angular_Module.js"></script>

</html>


  ng-repeat : 内敛使用

  ng-click: 点击事件

<li ng-repeat = "i in [1,2,4,3]" ng-controller = "xxx">{{i}}


  神奇的$scope

1、$scope是一个POJO(js对象)

2、$scope提供了一些工具方法($watch()\$applay())

3、$scope是一个树形结构,与DOM标签平行

4、子$scope对象会继承父$scope上的属性和方法

4、每个angularjs会有一个根$scope,一般位于(ng-app)

angularjs启动时首先查找ng-app,然后查找$rootscope
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: