angular1.0初识

Angular是一款来自谷歌的开源的web前端框架，Angular基于typescript，相比于其他两个框架，Angular更适合中大型企业级项目。

安装angular-cli脚手架：

npm install -g @angular/cli  
或者
cnpm install -g @angular/cli

npm i          //安装依赖，如果觉得太慢可以采用cnpm来进行安装
npm new 项目名       
ng new 项目名 --skip-install            //创建新项目的时候跳过安装步骤

    cd 目录路径

进行依赖的安装

    cnpm install

运行项目

ng serve-open

创建组件

ng g component component/news

声明属性的几种方式：

public 可以在当前类中使用，也可以在类外使用
protected 它只有在当前类和它的子类里面可以访问
private 只有在当前类中才可以放问这个属性
或者干脆省略，这样的话默认是public

demos

$http是angular应用中最常用的服务，服务向服务器发送请求，应用相应服务器传送过来的数据

var app = angular.module(‘myApp’,[]);
        app.controller(‘myCtrl’,function($scope,$http){
        $http.get(‘后台数据地址url’).then(function(response){
        $scope.myWelcome = response.data;
        });
    });

     
//$timeout服务

    $timeout(function(){
    },2000);

//创建自定义服务

    app.service(‘myserver’,function(){
    this.myFunc = function(x){
    return x.toString(16);
    }
    });

//在控制器中使用自定义服务

    app.controller(‘myCtrl’,function($scope,myserver){
    $scope.myser = myserver.myFunc(255);
    });

 //在过滤器中使用自定义服务

    app.filter(‘myFormat’,[‘myserver’,function(myserver){
    return function(x){
    return myserver.myFunc(x);
    };
    }]);

//在对象数组中获取值时可以使用过滤器

    <ul>
    <li ng-repeat=”x in counts”>{{ x | myFormat  }}</li>
    </ul>
//在angular中阻止事件冒泡的方法

$event.stopPropagation()

设置请求头信息，在$httpProvider.defaults.headers属性上直接配置（.common .get .post .put等）common是指所有的请求方式，这种方式添加请求头信息的优势就是可以给不同请求方式添加相同的请求头信息，缺点就是不能够为某些请求path添加个性化头信息

  app.config(function($httpProvider) {
        var rand = Math.random();
        $httpProvider.defaults.headers.common = { 'spm' : rand,'X-Requested-With': 'XMLHttpRequest' }
    })

声明属性的几种方式：

demos

猜你喜欢