AngularJS从入门到精通
第一
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服务
不要在控制器中相互调用，控制器之间的交互通过事件
AngularJS从入门到精通的更多相关文章
- laravel从5.2到5.5从入门到精通视频教程共16套
laravel从5.2到5.5从入门到精通视频教程共16套,大部分都是实战项目比如P2P.博客.短网址.知乎门户.app软件开发.微信商城实战等 课程目录: 01.Laravel框架从入门到精通02. ...
- <程序员从入门到精通> -- How
定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...
- 【无私分享：从入门到精通ASP.NET MVC】从0开始，一起搭框架、做项目 目录索引
索引 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(1)搭建MVC环境 注册区域 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(2)创建 ...
- ASP.NET MVC4入门到精通系列目录汇总
序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- 1、ASP.NET MVC入门到精通——新语法
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...
- 5、ASP.NET MVC入门到精通——NHibernate代码映射
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 上一篇NHibernate学习笔记—使用 NHibernate构建一个ASP.NET MVC应用程序 使用的是xml进行orm映射,那么这一 ...
- 6、ASP.NET MVC入门到精通——ASP.Net的两种开发方式
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 目前,ASP.NET中两种主流的开发方式是:ASP.NET Webform和ASP.NET MVC.从下图可以看到ASP.NET WebFo ...
- 7、ASP.NET MVC入门到精通——第一个ASP.NET MVC程序
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 开发流程 新建Controller 创建Action 根据Action创建View 在Action获取数据并生产ActionResult传递 ...
随机推荐
- day 07 字符编码
一:字符编码 1.字符编码 什么是字符编码:将人能识别的字符转换为计算机能识别的01二进制的过程就是字符编码,转换的规则就是字符编码表 常用的编码表:ASCII.GBK.Unicode.UTF-8 了 ...
- 009_一行python重要工具
一.一行启动httpserver 你可以先登录容器(webssh),然后(注意必须是在/data/log/debug/pprof/目录) 例如生成 jvm dump文件 jmap -dump:form ...
- Java IO（三）——字节流
一.流类 Java的流式输入/输出是建立在四个抽象类的基础上的:InputStream.OutputStream.Reader.Writer.它们用来创建具体的流式子类.尽管程序通过具体子类执行输入/ ...
- Git-命令行-使用 Tag 标记你的代码
前言 正文开始之前,我想我们需要弄明白几个问题: 1.tag 是什么? 2.使用tag 的好处? 3.tag 和 branch 的区别以及使用场景? tag 是什么? tag , 翻译过来是标签的意思 ...
- 提取jedis源码的一致性hash代码作为通用工具类
一致性Hash热点 一致性Hash算法是来解决热点问题,如果虚拟节点设置过小热点问题仍旧存在. 关于一致性Hash算法的原理我就不说了,网上有很多人提供自己编写的一致性Hash算法的代码示例,我在跑网 ...
- Minesweeper
你玩过扫雷吗?这个可爱的小游戏带有一个我们记不住名字的操作系统.游戏的目标是找到所有地雷在M x N场中的位置.游戏在一个正方形中显示一个数字,它告诉你在这个正方形附近有 多少个地雷.每个方块最多有八 ...
- poj3984 广度搜索BFS
迷宫问题 Description 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1 ...
- Yii1.1框架关于日志的配置的简单使用
最近开始接触新项目,新项目用的框架是Yii1.1版本的,通过看框架文档大致熟悉了解了Yii在日志方面的使用. 首先在protected/config/main.php配置文件中加入日志相关配置,如下图 ...
- （第十三周）Final Review会议
项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 Final Review会议 时间:2016.12.2 13:00——15:00 地点:冬华楼一楼大厅 会 ...
- Stack Sorting CodeForces - 911E （思维+单调栈思想）
Let's suppose you have an array a, a stack s (initially empty) and an array b (also initially empty) ...