angular

http://blog.csdn.net/shenlei19911210/article/details/51325707 ui-router文章

http://blog.csdn.net/huinsysu/article/details/51786822 非常好的ui-router文章，有小实例！

https://www.jianshu.com/p/cba3fa12f0a3 angular CLI

https://www.jianshu.com/p/327d88284abb Angular CLI 安装和使用

angular只能做跟数据交互相关的东西

MVC：M -- ng-model($scope)

　　　V -- directive

　　　C -- controller

angularjs的MVC全部借助作用域来实现的。

angularjs模块化：它是由什么东西构成的呢？是模型、视图、控制器、过滤器、服务等等这些东西把它组合在一起，实现了某一个功能，就叫一个模块。

是一个MVC框架：数据、表现分离

数据、业务逻辑、表现层的这些东西分离

angular是什么？能用他干什么？用angular和不用angular有什么区别？

传统开发需要一堆重复性操作，比如获取一个文本框数据，传统需要获取元素，加事件，读取它的值，这些操作是重复性的，angular的作用是想减轻程序员的负担，希望降低程序员重复性的劳动量，能够专心的把精力放在你的业务逻辑上，这就是angular的作用。

angular扩展了HTML的功能，传统的HTML不会有ng-model、ng-bind、ng-app这些指令，但是angular可以。

angular是颠覆性的，跟传统开发不一样，不需要获取元素，添加事件等。

angular可扩展，可以加很多自定义的东西。

MVC：

　　M：model 模型 -- 数据

　　V：view 视图 -- 表现层

　　C：controller 控制器 -- 业务逻辑

ng-app：代表angular掌管的范围

依赖注入：，倒着来，要什么给什么，比如，需要$scope,$http，在定义的时候就传入。

ng-bind 不常用，不是很好用，bind的功能有点弱，有很多个性化的需求没法实现。一般使用{{}}

angular和普通的JavaScript不互通，angular用不了JavaScript的东西，JavaScript也用不了angular的东西。函数不互通，变量也不互通，事件也不互通。

angular开发模式和传统开发模式完全不同，只需要定住数据，数据是核心。传统的需要关心样式、元素，angular里面完全不需要。数据是核心，数据是核心，数据是核心

ng-click：点击事件

ng-init：初始化数据

angular的兼容性，必须是高版本浏览器，IE6、IE7不用想，移动端是完全支持的！

controller：控制器，逻辑性的代码都应该放到控制器里面，不应该写在HTML里面，专门用来放代码。桥梁，正常情况下，普通JavaScript和angular是不互通的，但是通过controller就可以完成互通。

controller：需要定义、调用才能起作用

　　<div ng-controller="zhangsan">
        <span>{{a}}</span>
    </div>
    <script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app = angular.module('test',[]);
        
        app.controller('zhangsan',function ($scope) {
            $scope.a = 12;
        });
    </script>

angular和普通js不互通就是因为$scope，因为angular里面的内容都存在在$scope里面，而不是散落在各个地方，所以，我只有往$scope上加东西，angular才能访问到。

angularjs的数据就在$scope上，所以，给ng-init加，也是加在$scope上。

一个页面里可以有多个module，一个module里可以有多个controller

发挥controller桥梁的作用，window.alert加在$scope上，就可以用了

    <div ng-controller="cont1">
        <input type="text" ng-model="text" />
        <button ng-click="alert(text)">点击</button>
    </div>
    <script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app = angular.module('test',[]);
        
        app.controller('cont1',function ($scope) {
            $scope.alert = function (s) {
                window.alert(s);
            }
        });
    </script>

循环展示：（注意：大写M代表月份，小写m代表分钟）

　　<ul ng-controller="cont1">
        <li ng-repeat="item in items">
            <h3>{{item.title}}</h3>
            <span>{{item.price|currency}}</span>
            <i>{{item.time|date:"yyyy年MM月dd日 hh:mm:ss"}}</i>
        </li>
    </ul>
    <script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.controller('cont1',function ($scope) {
            $scope.items = [
                {
                    title:'花花公子男士打底衫保暖圆领冬季加绒加厚宽松青年长袖t恤衣服男',
                    price:139.9,
                    time:1515035993388
                },
                {
                    title:'短袖T恤男士纯白色修身圆领运动衣服体恤t桖血纯色秋季纯棉打底衫',
                    price:68.8,
                    time:1515039993388
                },
                {
                    title:'七匹狼棉衣男外套冬季加厚短款中青年户外运动棉服时尚保暖外衣服',
                    price:54.3,
                    time:1515042993388
                }
            ]
        });
    </script>

ng-src：用来给图片加地址的一个命令

ng-href：专门用来加地址的

ng-hide

ng-show

ng-clack：当页面还没加载完的时候，先不显示

目前页面的内容都是静态的，没有从服务器读取数据，从服务器读取数据需要$http

普通的ajax或者是jsonp在angular里用不了

第一种方式，then

　　　　　<script type="text/javascript">
            var app = angular.module('test', []);
            app.controller('cont1', function($scope, $http) {
                $http.get('./demo.php',{
                    params:{a:12,b:5},
                    responseType:'json'
                }).then(function (res) {
                    alert(res.data + 5)
                },function () {
                    alert('失败了')
                })
            });
        </script>

另一种方式，比较常用：

　　　　　　　　　 $http.get('./demo.php',{
                    params:{a:4,b:5},
                    responseType:'json'
                }).success(function (res) {
                    alert(res+5)
                }).error(function () {
                    alert('失败了')
                });

需要注意，后台传过来的参数是以秒为单位的，所以，前端在处理时间戳的时候，需要先乘以1000转换成毫秒，在使用日期过滤器。

ng-minlength：最小长度

ng-maxlength：最大长度

<body ng-app="test" ng-controller="cont1">
    <!--ng-class="{ 'error':sign.username.$invalid && sign.username.$touched}" 
    开启验证，如果不符合，则添加error样式，并且满足已经点击过的，防止上来就添加error样式-->
    <form name="sign" ng-submit="submitForm()">
        <div class="form-group">
            <label for="">用户名：</label>
            <input class="form-control" 
                name="username" 
                ng-class="{ 'error':sign.username.$invalid && sign.username.$touched}" 
                ng-minlength="4" 
                required 
                ng-model="a" />
            <div ng-if="sign.username.$invalid && sign.username.$touched">您的输入有误请检查</div>
        </div>
    </form>
    
    <script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.controller('cont1',function ($scope) {
            $scope.submitForm = function () {
                console.log('表单提交了');
            }
        })
    </script>
</body>

//错误样式　　
<style type="text/css">
        .error{
            border-color: red;            
        }
    </style>

ng-disabled：禁用

angular的directive（指令）机制

http://www.jb51.net/article/83051.htm 讲的很全面！

指令的作用：实现语义化标签

E - 元素名称： <my-directive></my-directive>
A - 属性名：<div my-directive=”exp”></div>
C - class名： <div class=”my-directive:exp;”></div>
M - 注释：

compile阶段进行标签解析和变换，link阶段进行数据绑定等操作

angularjs指令定义中的require参数：

require - 请求另外的controller，传入当前directive的link function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。名称可以加入以下前缀：

? - 不要抛出异常。这使这个依赖变为一个可选项。

^ - 允许查找父元素的controller

控制器的意义：是一个分发者，处理一些临时数据，以及对域进行一个划分

指令的意义：可以重用，在页面中，重复出现的元素，元素背后有一些功能就可以用指令写出来

cnpm install bower -g   安装bower

bower install jquery    //bower会自动去网上找到最新版本的jquery

bower uninstall jquery    //卸载jquery

//因为我安装了bootstrap，所以，会提示：bower ECONFLICT     bootstrap depends on jquery，说bootstrap依赖于jquery，无法卸载

bower还会帮我们去检查版本之间的兼容性。

这个工具一般小型的项目中不会用到，因为总共就是那么十几个js文件，用到它反而需要很多的配置文件，所以，大型的项目中会使用，但是小项目没有用到。

cnpm install http-server -g   //安装http-server

http-server   //使用这个命令，就启动了服务

karma-coverage：代码覆盖率检查

test目录下的两个文件夹：e2e--集成测试，unit--单元测试

我们会把通用的东西抽成一个服务，让控制器去调用他，而不是让控制器继承。

UI-Router：使用它就不需要使用原生的ngRoute，ngRoute不能实现深层次的路由，但是ui-router可以。需要下载ur-router这个js文件并引入。

开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。

与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ui-router里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。

directive 指令

angularjs不直接操作DOM，那是因为直接操作DOM是在directive指令的link里面进行的：

指令与控制器交互：

<body ng-app="test" ng-controller="cont1">
        <hello>滑动加载..</hello>
        <script type="text/javascript">
            var app = angular.module('test', []);
            app.controller('cont1',function ($scope) {
                $scope.loadData = function () {
                    console.log('数据加载中...')                
                }
            })
            app.directive('hello', function(){
                return {
                    restrict: 'AE',
                    //templateUrl : 'from_3.html'
                    link:function (scope,element,attr) {
                        element.bind('mouseover',function () {
                            scope.loadData();
                        })
                    }
                }
            });
        </script>
    </body>

之所以定义成指令，就是为了要复用，指令复用，指令一定是可以用在不同的controller里面的，为了在不同的controller里面使用指令，我们需要给指令许多的配置项，z这样才可以和外面的控制器进行交互

下面的例子就是不同的控制器复用指令的效果：

<body ng-app="test">
        <div ng-controller="cont1">
            <hello howToLoad = 'loadData()'>滑动加载..</hello>
        </div>
        <div ng-controller="cont2">
            <hello howToLoad = 'loadData2()'>滑动加载..222</hello>
        </div>
        <script type="text/javascript">
            var app = angular.module('test', []);
            app.controller('cont1',function ($scope) {
                $scope.loadData = function () {
                    console.log('数据加载中...')                
                }
            });
            
            app.controller('cont2',function ($scope) {
                $scope.loadData2 = function () {
                    console.log('数据加载中...222')                
                }
            });
            
            app.directive('hello', function(){
                return {
                    restrict: 'AE',
                    //templateUrl : 'from_3.html'
                    link:function (scope,element,attr) {
                        element.bind('mouseover',function () {
                            //scope.loadData();
　　　　　　　　　　　　 //需要注意一个坑：就是在HTML里面是驼峰命名法，但是在这里要全部小写
                            scope.$apply(attr.howtoload);
                        })
                    }
                }
            });
        </script>
    </body>

指令间的交互：

指令内部的controller和外面的controller不是一个东西，是用来给我们的指令暴露出一组public的方法，给外部去调用的

angularjs内置了简化版的jquery，所以可以使用jquery的语法。

什么时候把逻辑写在controller里面？什么时候把逻辑写在link里面呢？

如果你想要你的指令暴露出一些方法给外部去调用，那么你就写在controller里面，link是用来处理指令内部的一些事务的，比如给元素绑定事件、绑定数据啊之类的。

require：我这个指令是依赖于哪个指令的，写了require之后，link函数就可以写第四个参数，angularjs在处理的时候，会把第四个参数注射到我们的link函数里面来，这样我们就可以调用控制器暴露出来的方法了。

<body>
    <div>
        <superman strength>strength</superman>
    </div>
    
    <div>
        <superman strength speed>strength speed</superman>
    </div>
    
    <div>
        <superman strength speed light>strength speed light</superman>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.directive('superman',function () {
            return {
                scope : {},
                restrict : 'AE',
                controller : function ($scope) {
                    $scope.abilities = [];
                    this.addStrength = function () {
                        $scope.abilities.push('strength');
                    };
                    
                    this.addSpeed = function () {
                        $scope.abilities.push('speed');
                    };
                    
                    this.addLigth = function () {
                        $scope.abilities.push('light');
                    };
                },
                link : function (scope,element,attrs) {
                    element.bind('mouseover',function () {
                        console.log(scope.abilities);
                    });
                }
            }
        });
        app.directive('strength',function () {
            return {
                require : '^superman',
                link : function (scope,element,attrs,supermanCtrl) {
                    supermanCtrl.addStrength();
                }
            }
        });
        
        app.directive('speed',function () {
            return {
                require : '^superman',
                link : function (scope,element,attrs,supermanCtrl) {
                    supermanCtrl.addSpeed();
                }
            }
        });
        
        app.directive('light',function () {
            return {
                require : '^superman',
                link : function (scope,element,attrs,supermanCtrl) {
                    supermanCtrl.addLigth();
                }
            }
        });
    </script>
</body>

独立scope

如果不是独立scope，互相之间是影响的

所以，需要独立scope，每个指令都有他独立的scope空间，互不影响：

<body>
    <hello></hello>
    <hello></hello>
    <hello></hello>
    <hello></hello>
    
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.directive('hello',function () {
            return {
                scope : {},   //独立scope
                restrict : 'AE',
                template : '<div><input ng-model="user" type="text" /><span>{{user}}</span></div>',
                replace:true
            }
        })
    </script>
</body>

scope：@

<body ng-app="test" ng-controller="cont">
    
    <drink flavor="{{ctrlFlavor}}"></drink>
    
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.controller('cont',function ($scope) {
            $scope.ctrlFlavor = '百威';
        });
        app.directive('drink',function () {
            return {
                restrict : 'AE',
                template : '<div>{{flavor}}</div>',
                scope : {
                    flavor : '@'
                }
                /*link : function(scope,ele,attr){
                    scope.flavor = attr.flavor
                }*/
            }
        })
    </script>
</body>

scope：=

<body ng-app="test" ng-controller="cont">
    Ctrl : 
    <input type="text" ng-model="ctrlFlavor" />
    Directive :
    <drink flavor="ctrlFlavor"></drink>
    
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.controller('cont',function ($scope) {
            $scope.ctrlFlavor = '百威';
        });
        app.directive('drink',function () {
            return {
                restrict : 'AE',
                template : '<input type="text" ng-model="flavor" />',
                scope : {
                    flavor : '='
                }
            }
        })
    </script>
</body>

scope：&

<body ng-app="test" ng-controller="cont">
    <ha greet = 'sayHello(name)'></ha>
    <ha greet = 'sayHello(name)'></ha>
    <ha greet = 'sayHello(name)'></ha>
    
    <script type="text/javascript">
        var app = angular.module('test',[]);
        app.controller('cont',function ($scope) {
            $scope.sayHello = function (name) {
                alert('hello '+name)
            };
        });
        
        app.directive('ha',function () {
            return {
                restrict : 'AE',
                scope : {
                    greet : '&'
                },
                template : '<input type="text" ng-model="hName" />'+
                '<button ng-click="greet({name:hName})">点击</button>'
            }
        })
    </script>
</body>

scope三种不同的绑定方式差别在哪里呢？

@是绑定字符串的

=号是进行双向绑定的

&传递一个函数的，调用父层作用域的函数的

用angularjs开发移动APP

开发APP的三种方式：

Native APP（原生应用）

WEB APP（HTML、JavaScript开发）

Hybird APP（复合开发，一部分原生，一部分JavaScript、HTML）

Native APP

WEB APP

Android、iOS打包过程

没有原生应用流畅，比较卡。

这篇文章需要读一读：

外面切换的时候用原生的代码进行开发，内部的一些图文混排、列表用JavaScript和HTML去写，获得一个比较综合的结果。

最核心的东西就是为每个activity嵌入一个webview（前端）页面。在交互的时候我们通过webview这个类提供了一些API，对js的一些事件进行拦截，这样可以进行一些处理，内外互相调用都是可以实现的

Hybird 这种混合开发方式本质上还是要调用浏览器内核的，浏览器内核目前占主流的两大平台也就是iOS和Android，他们内核的东西本质上都是webkit，但是是有区别的，Google的webview是在webkit内核上进行的一些封装，webkti内核原来苹果的，后来他把它开源了，Google在上面做了很多事情。Android上面叫webview，OC上面叫UI webview

webview嵌一个服务端一个页面，可以随时修改

TDD：由测试驱动的开发，这种开发是一种敏捷开发理念，在你开发一些应用的时候，先把测试用例写好，然后再去编写功能，需要一些实战去支撑的，国内实现起来还是比较困难，但是最好还是要尝试一下这种开发的模式，尝试学习！！

单元测试、集成测试

angular CLI

angular CLI的命令都是使用ng

安装angular CLI

cnpm install @angular/cli -g

查看angular-CLI版本

ng -v

创建项目

ng-new helloAngular   //创建项目

ng-serve   //进行项目的编译以及运行

但是ng-new会执行大概10-20分钟，比较漫长，所以

ng new helloAngular --skip-install   //阻止npm安装相应的依赖库

我们进入目录使用cnpm淘宝镜像自己安装相应的依赖库
cnpm install 

ng-serve

ng help  //展示所有的ng命令

ng n aTest --skip-install --routing //创建带路由的文件夹

ng-serve

代码的同步编译、同步更新

ng serve --port 4201    //端口号是4201

ng-generate

ng g 要生成的文件的类型（最常用的两个：一个是component，组件，相当于是我们给用户去看的一部分界面，一个是service，在后台跑的各个服务）

ng g component test

生成了4个文件，更新了一个文件

把这个component注册到APP module里面去

打开，可以看到已经注册了刚才执行的TestComponent

component是默认注册的，但是service自动是不注册的，所以我们需要手动注册

ng g service test -m    //创建一个service，-m就是把我们的service注册到APP module里面去，service会注册到provider的对应数组里面

ng test 单元测试

每一个component在创建的时候，都创建了.spec.ts测试文件，整个ng库里面的测试框架使用的就是现在最流行的karma+jasmine这个组合，直接ng test就可以自动进行测试了

ng build 发布的过程中最重要的就是要进行打包

开发项目要求就是模块化分离，每一个文件都要可读、易修改，但是这样的前段项目如果发布到服务器上是可以运行，但是由于文件比较分散，就有多次读写，请求包括并发数量都会提高，使服务器的性能降低，所以，为了使前端性能提升，就要进行打包，把所有的功能尽可能合并。

ls -alh dist/     //这个命令可以像列表一样查看dist文件夹里面的文件

du -h dist/       //查看dist文件夹有多大

使用ng2中特有的编译方式，就是预编译技术，称为aot，使用它有什么好处呢？就是把我们引用的angular框架尽可能的进行压缩，把一些浏览器进行解释的部分直接编译成浏览器可以执行的部分，通过这个过程，使我们整个项目体积变小。

ng build --aot

到现在位置，我们打包的dist文件还是开发模式，我们还可以更好，就是打包成生产模式

ng build -prod

angular CLI给我们做了非常多的事情，从开发，到测试，到打包都一并完成了！

每次写代码都会对应一段测试，写新代码的时候，会跑你的老的测试，当你老的测试通过了，你可以认为你老的代码没有被新代码影响。

e2e测试：功能测试，只关心输入和输出

unit测试：了解整个代码的流程，根据输入和输出了解整个代码的逻辑，这个就是单元测试。

什么样的代码是需要单元测试的？

posted @ 2018-01-03 21:00 晴晴加油阅读(352) 评论(0) 收藏举报

刷新页面返回顶部

晴晴加油

再牛逼的梦想也抵不过你傻逼似的坚持

angular

angular的directive（指令）机制

directive 指令

指令与控制器交互：

指令间的交互：

独立scope

用angularjs开发移动APP

Native APP

WEB APP

Android、iOS打包过程

单元测试、集成测试

angular CLI

公告

晴晴加油

再牛逼的梦想 也抵不过你傻逼似的坚持

angular

angular的directive（指令）机制

directive 指令

指令与控制器交互：

指令间的交互：

独立scope

用angularjs开发移动APP

Native APP

WEB APP

Android、iOS打包过程

单元测试、集成测试

angular CLI

公告

再牛逼的梦想也抵不过你傻逼似的坚持