AngularJS从入门到精通

最新推荐文章于 2023-07-17 18:34:58 发布

会做饭的技术男

最新推荐文章于 2023-07-17 18:34:58 发布

阅读量217

点赞数

分类专栏：前端文章标签： 1.编程语言之javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=h1jj1ja1jcab&title=AngularJS%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

第一

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服务

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

会做饭的技术男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS从入门到精通

第一 AngularJS的四大特性 1. MVC 例如：使用angularjs向模板传递数据 <!doctype html><html><head><meta charset="UTF-8">...
复制链接

扫一扫