AngularJS从入门到精通

时间:2023-10-03 08:29:08

第一

AngularJS的四大特性

1. MVC

例如:使用angularjs向模板传递数据

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="user.js"></script>
</head>
<body ng-app="myApp" ng-controller="user">
<p>{{user_name}}</p>
</body>
</html>
var app = angular.module('myApp', []);

app.controller('user', function($scope) {
    $scope.user_name = "liudaoqiang";
});

  

2 模块化

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

/*
app.controller('user', function($scope) {
    $scope.user_name = "liudaoqiang";
});
*/

app.controller('user', ['$scope', function user($scope){
	$scope.user_name = 'liuzhiqiangxyz';
}]);

3.指令

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="directive.js"></script>
</head>
<body ng-app="myApp">
<username></username/>
</body>
</html>
var app = angular.module('myApp', []);

app.directive('username', function(){
	return {
		'retrict':'E',
		'template':'<div>liudaoqiang</div>',
		'replace':true,
	}
});

4.双向数据绑定

例如:显示和输入的数据一致实时同步

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<input name="python" ng-model="user_input">
<p>{{user_input}}</p>
</body>
</html>

注意:

angularjs的代码要记住ng-app, ng-controller, ng-model这三个基本属性,若发现代码没有效果,需检查这些属性

第二

前端开发环境搭建

1. 代码编辑工具

例如:

sublime和webstorm

2. 断点调试工具

工具为chrome浏览器的batarang

3. 版本管理工具

例如:

git

4. 代码合并和混淆工具

使用nodejs的插件,例如npm,grunt

grunt为代码混淆工具,官网为gruntjs.com

5. 依赖管理工具

依赖管理工具为bower,官网为bower.io

使用bower下载js插件例如

bower install jquery

bower install bootstrap

当使用bower uninstall jquery是会提示是否真的卸载,因为bootstrap是依赖于jquery的

作用有:

自动安装依赖的组件

解决组件之间的兼容性

解决版本之间的兼容性

6. 轻量级httpserver

即nodejs的插件http-server

下载地址为github.com/nodeapps/http-server

启动http-server的命令为http-server

安装为:

npm install karma

npm install jasmine

7. 单元测试工具

工具为karma, karma为单元测试容器,真正单元测试工具为jasmine

下载地址为jasmine.github.io

8. 集成测试工具

工具为protractor,专门为angularjs而设计的

MVC

js的执行顺序为首先浏览器加载js,然后由JIT编译执行

1.为什么使用MVC

切分职责,复用,后期维护方便

注意:MVC只是手段,终极目的是模块化和复用

2. 前端MVC的困难

DOM操作必须等待所有页面加载完成

各个浏览器加载不同js的顺序是不一样,js之间的依赖需要程序员手动解决

js的原型继承也给MVC的实现带来了困难

3. 使用控制器应该注意的事项

不要复用控制器,控制器一般只负责一小块视图

不要在控制器中操作DOM,这不是控制器的职责

不要在控制器里做数据格式化,ng有很好用的表单空间

不要在控制器中做数据过滤,ng有$filter服务

不要在控制器中相互调用,控制器之间的交互通过事件