angular js学习笔记

参考教程:
https://xdsnet.gitbooks.io/angular-phonecat-book-zhcn/content/chapter4/chapter4.html
安装依赖:npm install
运行程序: npm start
运行karma单元测试: npm test
运行protractor端到端测试: npm run protractor

学习笔记:

1.为了使用Angular服务,你只用在控制器中需要的地方简单把调用名字作为构造函数的参数,例如:
phonecatApp.controller(‘PhoneListCtrl’, function ( scope, http) {…}

因为Angular的依赖控制采用了以名字作为构造函数的参数传入机制运行,所以如果你想压缩你的PhoneListCtrl控制器部分JavaScript代码就需要注意一些细节,否则自动机制下所有的参数名会自动压缩而导致依赖注入功能出错。

对于这样的问题就是提供一个禁止压缩的依赖名称列表,这样列表中的名称在压缩时不会进行缩减替换,这样就能保证压缩后的代码能够正常工作了,对此有两个方法:

方法一:在控制器构造函数上创建一个inject(注入)字符串数组,数组中每个字符串都是需要注入的服务名。在我们的例子中就是这样写:

  function PhoneListCtrl($scope, $http) {...}
  PhoneListCtrl.$inject = ['$scope', '$http'];
  phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

方法二:使用内联注解语句,函数不是仅仅提供功能要求,还包括一个功能名的字符串数组(内联注解数组),例如:

function PhoneListCtrl($scope, $http) {...}
  phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);

这两种方法都可以被Angular正常识别进行注入,所以你只需要依据你项目风格选择一种即可。

当采用第二种方式,通常定义一个内联的匿名函数供注册器实施注入:

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

从现在开始,教程中我们将采用内联注解方式(第二种方法)进行处理,使得代码支持压缩。让我们为PhoneListCtrl添加一个内联注解: app/js/controllers.js:

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值