Angular.js 小结

最新推荐文章于 2020-03-19 21:14:24 发布

润砾成珠

最新推荐文章于 2020-03-19 21:14:24 发布

阅读量881

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/u011569805/article/details/21090895

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 首先

ng-app 指定为 “contact” （模块名）

<!doctype html>
<html lang="en" ng-app="contact">

2.app.js

可以加入依赖，service,filter 然后配置路由 routeProvider;

templateUrl 指定模版会替换至 ng-view位置;

controller 用指定ContactController 控制

redirectTo: 跳转都另一个url

var contact = angular.module('contact', ['contactServices', 'contactFilters']).
    config(
        ['$routeProvider', function($routeProvider) {
            $routeProvider.
                when('/contact', {templateUrl: 'contact.html', controller: ContactController}).
                /*when('/contact/:contactId', {templateUrl: 'contact-detail.html', controller: ContactController}).*/

                otherwise({redirectTo: '/contact'});
        }]
    );

3.controller.js

用一句话概括，作为 view 与 data 的桥梁

$scope

function ContactController($scope, $resource, Contact) {
}

function PhoneListCtrl($scope, Phone) {
  $scope.phones = Phone.query();
  $scope.orderProp = 'age';
}

//PhoneListCtrl.$inject = ['$scope', 'Phone'];



function PhoneDetailCtrl($scope, $routeParams, Phone) {
  $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
    $scope.mainImageUrl = phone.images[0];
  });

  $scope.setImage = function(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
}

remove

 $scope.removeContact = function(id) {
        Contact.remove(
            {contactId:id},
            function(data) {
                $scope.remove($scope.contacts, data.id);
            },
            function(response) {
                $scope.processErrors(response);
            }
        );
    };

4.service.js

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
      return $resource('phones/:phoneId.json', {}, {
        query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
      });
    });

angular.module('contactServices', ['ngResource']).
    factory('Contact', function ($resource) {
        return $resource('api/contact/:contactId', {}, {
            remove:{
                method:"DELETE",
                isArray:false,
                headers:{'Accept':'application/json', 'Content-Type':'application/json'}
            }
        });
    })
;

rest url 客户端这样地以后就可以用 Phone.query(); Contact.remove()

5.filter.js

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

{{phone.connectivity.gps | checkmark}}

过滤器使用 checkmark 名字

6.模版中view

<li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>

<div ng-view></div>

templateUrl指定的页面会自动替换

<i class="icon-{{searchIcon}}"></i>

通过 $scope.searchIcon 变换 class

<div class="btn-group" ng-class="{open: !searchCollapse}">

表达式控制 class

指定在controller 中指定的click 事件

<input class="span2" type="text" ng-model="searchValue" />

ng-model 指定变量模型

润砾成珠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular.js 小结

1. 首先 ng-app 指定为 “contact” （模块名）2.app.js可以加入依赖，service,filter 然后配置路由 routeProvider; templateUrl 指定模版会替换至 ng-view位置;controller 用指定ContactController 控制redirectTo: 跳转都另一个urlvar conta
复制链接

扫一扫

专栏目录