AngularJSAngularJS从入门到掌握

第一

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

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

 

相关文章