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

 

  1. 断点调试工具

工具也chrome浏览器的batarang

 

  1. 本子管理工具

例如:

git

 

  1. 代码合并及模糊工具

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

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

 

  1. 依靠管理工具

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

用bower下载js插件例如

bower install jquery

bower install bootstrap

当用bower uninstall
jquery是碰头提示是否真的卸载,因为bootstrap是借助让jquery的

 作用有:

机动装依赖的组件

缓解组件之间的兼容性

解决版本之间的兼容性

 

  1. 轻量级httpserver

即nodejs的插件http-server

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

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

安装为:

npm install karma

npm install jasmine

 

  1. 单元测试工具

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

下载地址为jasmine.github.io

 

  1. 集成测试工具

 工具为protractor,专门为angularjs而计划之

 

MVC

js的执行各个吧第一浏览器加载js,然后由JIT编译执行

1.胡采取MVC

切分职责,复用,后期维护好

留意:MVC只是伎俩,终极目的是模块化和复用

  1. 前端MVC的困难

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

逐条浏览器加载不同js的次第是免雷同,js之间的依靠需要程序员手动解决

js的原型继承也为MVC的兑现带来了不方便

  1. 行使控制器应该专注的事项

并非复用控制器,控制器一般就负责同多少片视图

决不当控制器中操作DOM,这不是控制器的职责

不要当控制器里举行多少格式化,ng有酷好用之表单空间

并非以控制器中举行多少过滤,ng有$filter服务

决不以控制器中相互调用,控制器之间的互通过波

 

相关文章