angularJS笔记

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

原文地址:https://www.cnblogs.com/likailiche/p/4807103.html