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

巴特西

angularJS笔记

最新文章

热门文章