新航路师徒学院

 找回密码
 立即注册
搜索
查看: 383|回复: 0

【新航路】angular 部分知识点

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-26 11:31:58 | 显示全部楼层 |阅读模式
  1. // 初始化
  2. angular.bootstrap(dom,['appName']);

  3. //html 转化
  4. // 需传参 $sce
  5. $scope.escape = function(html) {
  6.    return $sce.trustAsHtml(html);
  7. };

  8. // html
  9. <div ng-bind-html="escape(data)"></div>



  10. // http
  11. $http({  
  12.      method:'get',  // post ....
  13.      url:'/Service/resume', // url
  14.      params: {id: uid}
  15. }).success(function(data){
  16.      console.log(data)
  17. })

  18. // filter
  19. .filter('getCity', function(){
  20.         return function(city){
  21.             return $.parseJSON(city).city;
  22.         }
  23. });

  24. //html
  25. {{city | getCity}}

  26. //标签切换
  27. <span class="{{curShow=='register'?'current':''}}" ng-click="switchView('register')">个人注册</span>
  28. <span class="{{curShow=='login'?'current':''}}" ng-click="switchView('login')">个人登录</span>
  29. <div class="{{curShow!='register'?'hide':''}}">
  30.     // register
  31. </div>
  32. <div class="{{curShow!='login'?'hide':''}}">
  33.     //login
  34. </div>
  35. //初始化
  36. $scope.curShow = 'register';
  37. $scope.switchView = function(view) {
  38.     $scope.curShow = view;
  39. }

  40. //ng-click="switchView('login')"

  41. <div class="jd">
  42.     <label for="company"><input type="radio" ng-model="checkboxSelection" name="type" value="1" checked="checked" id="company">企业</label>
  43.     <label for="personl"><input type="radio" ng-model="checkboxSelection" name="type" value="2" id="personl">个人</label>
  44. </div>

  45. //radio 切换
  46. <div class="jd">
  47.    <div ng-show="isCheckboxSelected('1')">
  48.         <label for="leader"><input type="radio" name="guanxi" id="leader">主管</label>
  49.         <label for="hr"><input type="radio" name="guanxi" id="hr">HR</label>
  50.    </div>
  51.    <div ng-show="isCheckboxSelected('2')">
  52.         <label for="workmate"><input type="radio" name="guanxi" id="workmate">同事</label>
  53.         <label for="students"><input type="radio" name="guanxi" id="students">同学</label>
  54.         <label for="friend"><input type="radio" name="guanxi" id="friend">朋友</label>
  55.    </div>
  56. </div>
  57. $scope.checkboxSelection = '1';
  58. $scope.isCheckboxSelected = function(index) {
  59.     return index === $scope.checkboxSelection;
  60. };

  61. // factory
  62. var app = angular.module('factory',[]);
  63.         app.factory('testFactory', function () {
  64.            //   return {
  65.            //      lable: function(){
  66.            //          return  [
  67.                     //     {'id' : 1, 'name':'Ted', 'total': 5.996},
  68.                     //     {'id' : 2, 'name':'Michelle', 'total': 10.996},
  69.                     //     {'id' : 3, 'name':'Zend', 'total': 10.99},
  70.                     //     {'id' : 4, 'name':'Tina', 'total': 15.996}
  71.                     // ];
  72.            //      }
  73.            //  }

  74.            // * edit new methods
  75.            var data = [
  76.                 {'id' : 1, 'name':'Ted', 'total': 5.996},
  77.                 {'id' : 2, 'name':'Michelle', 'total': 10.996},
  78.                 {'id' : 3, 'name':'Zend', 'total': 10.99},
  79.                 {'id' : 4, 'name':'Tina', 'total': 15.996}
  80.             ];
  81.            var factory = {};
  82.            factory.lable = function(){
  83.                 return data;
  84.            }
  85.            return factory;
  86.         });

  87. app.controller('TestController',function($scope,testFactory){
  88.     $scope.customers = testFactory.lable();
  89. })

  90. // service.js
  91. var app = angular.module('factory',[]);
  92. app.factory('testFactory', function ($http) {
  93.       var factory = {};
  94.       factory.lable = function(){
  95.          return $http.get('/js/test.json');
  96.       }
  97.        return factory;
  98. });
  99. // controller.js
  100. app.controller('TestController',function($scope,testFactory){
  101.     function init(){
  102.         testFactory.lable().success(function(data){
  103.             $scope.customers = data;
  104.             })
  105.     }
  106.     init();
  107. })

  108. //service、provider、factory写法
  109. var app = angular.module('appName', []);
  110.         app.service('testService',function(){
  111.              this.lable = 'this is service';
  112.         });
  113.         app.factory('testFactory', function () {
  114.              return{
  115.                 lable: function(){
  116.                 return 'this is factory';
  117.                 }
  118.             }
  119.         });
  120.         app.provider('testProvider', function(){
  121.             this.$get = function(){
  122.                 return 'this is provider';
  123.             }
  124.         });
  125.         <body ng-controller='outputCtrl'>
  126.             <p>{{ output1 }}</p>
  127.             <p>{{ output2 }}</p>
  128.             <p>{{ output3 }}</p>
  129.         </body>
  130.         var app = angular.module('appName');
  131.         app.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
  132.             $scope.output1 = testService.lable;
  133.             $scope.output2 = testFactory.lable();
  134.             $scope.output3 = testProvider;
  135.         });

  136. require('lib/angular-route');//引入 route
  137. var app = angular.module('testApp',['ngRoute','factory','ctrl']);// ngRoute
  138.     app.config(function($routeProvider) {
  139.          $routeProvider.when('/', {
  140.              templateUrl: '/view/index.html',  // 模板路径
  141.              controller: 'TestController'   // 模板 中的 controller
  142.            })
  143.          .when('/book', {
  144.              templateUrl: '/view/book.html',
  145.              controller: 'BookController'
  146.            })
  147.          .when('/test', {
  148.              templateUrl: '/view/test.html',
  149.              controller: 'txController'
  150.            })
  151.          .otherwise({
  152.               redirectTo:'/'
  153.             });
  154.     });
  155. //显示 隐藏 ng-show ng-hide
  156. //html
  157. <p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
  158. <div class="test" ng-show="olive.oliveDetail">
  159.   test
  160. </div>
  161. // controller
  162. $scope.olive = {};
  163. $scope.showDetail = function(olive){
  164.     olive.oliveDetail = ! olive.oliveDetail;
  165. }
  166. <tr ng-repeat="olive in customers | filter:searchText">
  167. <td>
  168.     <p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
  169.     {{olive}} <!-- {"id":1,"name":"Ted","total":5.996,"oliveDetail":true/false} -->
  170.     {{olive.oliveDetail}}<!-- true/false -->
  171.     <div class="test" ng-show="olive.oliveDetail">
  172.                         test
  173.     </div>
  174. </td>
  175. </tr>
  176. //controller

  177. $scope.showDetail = function(olive){
  178.     olive.oliveDetail = ! olive.oliveDetail;
  179. }
  180. 新航路HTML5培训团队
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-5-25 11:34 , Processed in 0.158132 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表