angular js 17年1月小结 （包括简单的指令和模块 服务等）

在工作中，也是初次使用angular js，学到的只是冰山一角，我是前端开发的小白，从事前端工作时间不长，快满3个月，是在工作之余想要记录一下自己新学到的知识。

      1. angular js  最重要的思想，我想就是双向数据绑定了，摒除过去jquery  操作DOM节点的想法，牢记 后台传递的数据是直接通过 $scope 和{{     }}双向绑定显示在页面上的。

      2. 思想具备了，我想实现起来也就简单多了。当然首先还是去官网将angular  js 下载并引入，之后需要用到angular js 的js 文件都要 放到 这个文件之后。

      3.之后学习我学习到的主要是三块了。angular  js 现有的插件，服务 $内容,指令。

      下面详细来说一下我学到的指令。

        指令    

       1.ng-app=" app名称"    控制整个html 页面，将整个angular  js 应用到html 中。

        var app = angular.module("app名称",[''pascalprecht.translate']);后边为注入的模块（需要用到的）

2.ng-controller=“controller名称”  每一模块的控制指令。

       app.controller("controller 名称",function($scope,$compile){

        后边为用到的服务

)

3.控制样式指令

ng-class    css样式选择性显示。值为false 或true.

<div ng-class="{true: 'active'}[判断条件 比如 $index==index]"> angular js 中$scope.active ='active' css中设置相应样式.active{}

ng-style ="样式名称"  ，后边只要  $scope.样式名称 = {

        “key”:"value";

        }格式就可以.

       4. ng-repeat     这个指令大大减轻了代码量， $index 是每次循环的次数，从0开始。

      这里需要注意有时候  从后台传来的若为数组格式     [{"key":"value"},{"key":"value"}] 直接用就好  ng-repeat ="item  in  items"    angular js   $scope.items = [   ]     页面 {{item.key}}

键值对格式     ["key1":{“key”:'value",“key”:'value" },"key2":{“key”:'value",“key”:'value" }]  

     遍历循环时格式不能随意更换     (key,val) in items

      {{key}}     {value.key}

5.ng-show   ng-hide  显示隐藏      值同样为true  false   同ng-class 一样，也可以加条件[   ]

6 .ng-bind    同{{    }}实现效果相同，都用来实现数据绑定，但是可以避免   页面闪烁出现  {{   } }问题

        7.一些操作指令    同js 相同

ng-click = "函数名（“参数”）"         angular js    $scope.函数名  = function(参数){

}

ng-mouseover    ng-mouseout       ng-change    ng-blur   等等

8. ng-inclue     引入html   片段       新建一个   名为   new.html    

       <div    ng-include="  '   路径         '    "><div/> 相对于引入 html  的html  路径，注意这里  单纯   html 字符串 需要加单引号，变量什么都不加

  注   angular   js   传参或其他是变量 的话，单引号和   {{    }}都不加。

9.ng-view   配合路由使用。主要是用来切换不同页面使用。

10.ng-model   这次用的少。。。。。

11.ng-bind-template  绑定两个元素 不用另外用标签。

指令我目前用到的就这些了。

        下边再说一下用到的服务。。。

1.不同控制器之间 互相传值

方法一：广播    

父向子元素    传值        $broardcast          子向父元素      传值    $emit       接收   $on

        方法:

传递方：$rootScope.$broadcast(“函数名”，传递的变量)

接收方：

$rootScope.$on("函数名",function(event, data) {

})

data  为传递过来的变量

方法二：service   服务  无关系控制器

    app.factory(中间值，function(){
return {};

})

后面 哪用到      注入这个中间值，然后将变量赋给这个中间值就可以啦

形如    

app.factory(param，function(){
return {};

})

一个控制器

app.controller(“a”,function(param){

var a=0;

param = a;

)

app.controller(“B”,function(param){

var b=0;

b = param

)

2.$compile $digest 解决将html 片段 含有双向绑定的数据显示在html中，而不是 {{ }} 具体并没深入研究。以后回来补充。

3.$rootScope 全局的scope $scope重要性就不说了

4.$http.post $http.get

$http.post('地址',参数 {key:value}).success(function(data) {

}

5 路由    注入ngRoute   它本身不在angular js中，需要再引入  angular-route.js  与ng-view  搭配用

app.config(function($routeProvider) {

    $routeProvider
        .when('路径（在主页面后拼）/:参数', {
            templateUrl: 'a.html',
            controller: 'Model'
        })
        .when('/b/:参数', {
            templateUrl: 'b.html',
            controller: 'Model'
        })  

}）

这里写了控制器，html 中就不用再写了.地址后传递参数

点击切换路由   <a  href="#/b/参数"  >

angular js 中可以通过 $routeParams   来获取到这个参数

5 其他服务大都为使用插件时注入

最后来说一下这次用到的几个angular   的插件 和其中遇到的一些问题。

1 angular-translate  中英翻译       写一个    js  或json   文件用来存放所有的   中英编码，用键值对形式保存

同一个键值对应    不同的中英文

app.config(function($translateProvider){
$translateProvider.translations('cn', language_cn)
.translations('en',language_en);
$translateProvider.preferredLanguage('cn');
});

app.controller('translateCtrl', function($translate）{

$scope.changeLanguage = function(langKey) {
$translate.use(langkey);
} 

}）

html    {{“键值码”|translate}}

 js    引入$translate   $translate.instant("键值码")

点击切换语言

2 angular-tree   树 详见API文档    包括展开树及默认选择。

3. uib-alert     提示框

4.ui-bootstrap    弹出框

5.image-crop   头像上传

原来写点东西好累，尽管写的模糊不清，，，以后慢慢进步啦。