AngularJS Day01

最新推荐文章于 2021-02-19 10:19:51 发布

Kevin-anycode

最新推荐文章于 2021-02-19 10:19:51 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/lk1985021/article/details/89922831

版权

AngularJS简介

AngularJS是为了克服HTML在构建应用上的不足而设计的.
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发，但会损失一部分灵活性.
AngularJS主要考虑的是构建CRUD应用.

AngularJS是什么

是一个JS框架.
是一个MVVM 、MVW、MVC框架.
是一个构建在前端HTML中的MVC框架.
是一个可以快速构建复杂的单页web应用（SPA）的框架.
是一个可以大大减轻AJAX应用开发复杂度的框架.

AngularJS的组成核心

模块module
控制器controller
作用域scope
指令directive
表达式expression
过滤器filter
服务service
路由route
依赖注入dependency injection

AngularJS的资源

官网：https://angularjs.org
中文网：http://www.apjs.net http://www.angularjs.net.cn/
下载(未编译版本)：https://github.com/angular/angular.js
另外可通过bower下载编译版本

第一个AngularJS示例

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="angular.min.js"></script>
    </head>
<body>
	<h1>Hello {{'Angular'}}!</h1>
</body>
</html>

AngularJS调试插件Batarang

Batarang是AngularJS调试的Chrome插件，可以在Chrome浏览器中对AngularJS应用代码进行调试。
- 获取
  batarang-0.10.7.zip
- 安装插件
  1.打开chrome浏览器，点击右上角的灰色按钮，然后选择”更多工具”，然后选择”扩展程序”.
  2.将batarang-0.10.7.zip解压，把解压后的整个文件夹拖到扩展程序里，安装好了.
  3.打开Chrome开发者工具，在最后面多出一个AngularJS面板，调试时需要通过Web服务器访问页面.

AngularJS的MVC

Model、View、Controller
通过MVC实现模块化和代码复用

在这里插入图片描述

v1.3之前版本的全局控制器
v1.3及之后版本的模块控制器
表单数据绑定

Demo

/**
 * AngularJS v1.3之前版本支持全局控制器，v1.3及之后版本不支持全局控制器
 */

/**
 * 定义一个全局控制器
 * 全局控制器本质上就是一个函数，函数名就是控制器名
 * 参数必须AngularJS规定提供，如：作用域对象参数名必须为$scope，会按照名称注入
 * 这种参数写法在js压缩混淆时会出问题，会将形参名变为a、b...等，导致注入失败
 */

function GlobalController($scope){
	//在全局作用域中存储数据
	$scope.name='tom';
}

/**
 * AngularJS v1.3之前版本支持全局控制器，v1.3及之后版本不支持全局控制器
 */

/**
 * 定义一个全局控制器
 * 全局控制器本质上就是一个函数，函数名就是控制器名
 * 参数必须AngularJS规定提供，如：作用域对象参数名必须为$scope，会按照名称注入
 * 这种参数写法在js压缩混淆时会出问题，会将形参名变为a、b...等，导致注入失败
 */

function GlobalController($scope){
	//在全局作用域中存储数据
	$scope.name='tom';
}

/**
 * v1.3及之后的版本不支持全局控制器，使用模块Module封装控制器Controller
 * 必须先定义模块，然后在模块中定义控制器
 */

/**
 * 定义一个模块
 * 第一个参数表示模块名，用于ng-app指令
 * 第二个参数表示要注入的内容，指定依赖模块
 */
var app=angular.module('myApp',[]);


/**
 * 在模块中定义一个控制器
 * 第一个参数表示控制器名，用于ng-controller指令
 * 第二个参数有两种写法：
 * 	方式1：直接传递一个回调函数
 * 	方式2：传递一个数组，包含两个元素（推荐）
 * 		第一个元素表示要注入的参数
 * 		第二个元素表示一个回调函数
 * 	注：方式2可防止压缩js后看不懂形参
 */
/*app.controller('MyController',($scope)=>{
	$scope.name='tom cruise';
});*/
app.controller('MyController',['$scope',function(a){
	a.name='jack';
}]);

var app=angular.module('myApp',[]);

/**
 * 控制器命名规则：
 * 1.采用帕斯卡式命名法，即每个单词首字母大写
 * 2.以Controller结尾
 */
app.controller('FirstController', ['$scope', function($scope){
	$scope.name='tom';
	$scope.age=21;
	$scope.user={
		name:'唐伯虎',
		age:19,
		sex:'男'
	};
}]);

app.controller('SecondController', ['$scope', function($scope){
	$scope.name='alice';
}]);

/**
 * 添加多个控制器，使用链接操作，类似于jQuery语法
 * AngularJS内置了jqLite库，jqLite是jQuery库的子集，只包含jQuery的部分方法，相当于jQuery的简化版，更轻量
 */
app.controller('ThirdController', ['$scope', function($scope){
	$scope.hobby='eat';
}]).controller('FourthController', ['$scope', function($scope){
	$scope.address='南京';
}]);

var app=angular.module('myApp',[]);

/**
 * 根作用域对象$rootScope，全局作用域，每个app只有一个
 * run()方法用于初始化全局数据，仅对全局作用域起作用
 */
 app.run(['$rootScope', function($rootScope){
 	$rootScope.height='180.5';
 	$rootScope.name='alice';
 }]);

app.controller('FirstController', ['$scope', function($scope){
	$scope.name='tom';
	$scope.age=21;
	
}]);

app.controller('SecondController', ['$scope', function($scope){
	$scope.name='zhangsan';
}]);

var app=angular.module('myApp',[]);

app.controller('FirstController', ['$scope', function($scope){
	$scope.name='tom'; //在作用域中定义变量
	$scope.show=function(){ //在作用域中定义方法
		console.log('Hello '+$scope.name);
	};
}]);

app.controller('SecondController', ['$scope', function($scope){
	// $scope.name='汤姆';
	/*$scope.show=function(){
		console.log('您好：'+$scope.name);
	};*/
	
}]);

window.onload=function(){
	document.getElementById('btn').onclick=function(){
		console.log(this); //事件源
	};
};

var app=angular.module('myApp',[]);

app.controller('EventController', ['$scope', function($scope){
	$scope.name='tom';
	$scope.show=function(e){
		// console.log(this); //this表示当前作用域对象，即$scope，不是事件源
		// console.log(this===$scope);
		// console.log($scope.name);
		// console.log(this.name);
		
		/*for(var index in e){
			console.log(index+'='+e[index]);
		}*/
		// console.log(e.target); //事件源

		// console.log(e.target.innerHTML);
		// console.log($(e.target).html()); //AngularJS虽然内置了jqLite，但没有暴露出来，不能直接使用
		// var obj=angular.element(e.target);
		// console.log(obj.html());
		// obj.css('color','red'); //调用jQuery中的方法

		//AngularJS也可以结合jQuery一起使用
		console.log($(e.target).html()); 
	};
}])

Kevin-anycode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS Day01

AngularJS简介AngularJS是为了克服HTML在构建应用上的不足而设计的.AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发，但会损失一部分灵活性.AngularJS主要考虑的是构建CRUD应用.AngularJS是什么是一个JS框架.是一个MVVM 、MVW、MVC框架.是一个构建在前端HTML中的MVC框架.是一个可以快速构建复杂的单页w...
复制链接

扫一扫