angular 项目回顾

// 初始化
angular.bootstrap(dom,[‘appName‘]);

//html 转化
// 需传参 $sce
$scope.escape = function(html) {
   return $sce.trustAsHtml(html);
};
// html
<div ng-bind-html="escape(data)"></div>

// http
$http({  
     method:‘get‘,  // post ....
     url:‘/Service/resume‘, // url
     params: {id: uid} 
}).success(function(data){
     console.log(data)
})

// filter
.filter(‘getCity‘, function(){
        return function(city){
            return $.parseJSON(city).city;
        }
});

//html
{{city | getCity}}

//标签切换
<span class="{{curShow==‘register‘?‘current‘:‘‘}}" ng-click="switchView(‘register‘)">个人注册</span>
<span class="{{curShow==‘login‘?‘current‘:‘‘}}" ng-click="switchView(‘login‘)">个人登录</span>
<div class="{{curShow!=‘register‘?‘hide‘:‘‘}}">
    // register
</div>
<div class="{{curShow!=‘login‘?‘hide‘:‘‘}}">
    //login
</div>
//初始化
$scope.curShow = ‘register‘;
$scope.switchView = function(view) {
    $scope.curShow = view;
}

//ng-click="switchView(‘login‘)"

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

//ｒａｄｉｏ　切换
<div class="jd">
   <div ng-show="isCheckboxSelected(‘1‘)">
        <label for="leader"><input type="radio" name="guanxi" id="leader">主管</label>
        <label for="hr"><input type="radio" name="guanxi" id="hr">HR</label>
   </div>
   <div ng-show="isCheckboxSelected(‘2‘)">
        <label for="workmate"><input type="radio" name="guanxi" id="workmate">同事</label>
        <label for="students"><input type="radio" name="guanxi" id="students">同学</label>
        <label for="friend"><input type="radio" name="guanxi" id="friend">朋友</label>
   </div>
</div>
 $scope.checkboxSelection = ‘1‘;
$scope.isCheckboxSelected = function(index) {
    return index === $scope.checkboxSelection;
};

//　ｆａｃｔｏｒｙ
var app = angular.module(‘factory‘,[]);
        app.factory(‘testFactory‘, function () {
           //   return {
           //      lable: function(){
           //          return  [
                    //     {‘id‘ : 1, ‘name‘:‘Ted‘, ‘total‘: 5.996},
                    //     {‘id‘ : 2, ‘name‘:‘Michelle‘, ‘total‘: 10.996},
                    //     {‘id‘ : 3, ‘name‘:‘Zend‘, ‘total‘: 10.99},
                    //     {‘id‘ : 4, ‘name‘:‘Tina‘, ‘total‘: 15.996}
                    // ];
           //      }
           //  }

           // * edit new methods
           var data = [
                {‘id‘ : 1, ‘name‘:‘Ted‘, ‘total‘: 5.996},
                {‘id‘ : 2, ‘name‘:‘Michelle‘, ‘total‘: 10.996},
                {‘id‘ : 3, ‘name‘:‘Zend‘, ‘total‘: 10.99},
                {‘id‘ : 4, ‘name‘:‘Tina‘, ‘total‘: 15.996}
            ];
           var factory = {};
           factory.lable = function(){
                return data;
           }
           return factory;
        });

app.controller(‘TestController‘,function($scope,testFactory){
    $scope.customers = testFactory.lable();
 })
//　代码详见，ｇｉｔｈｕｂ
//　https://github.com/llqfront/angular/tree/master/angular

// service.js
var app = angular.module(‘factory‘,[]);
app.factory(‘testFactory‘, function ($http) {
      var factory = {};
      factory.lable = function(){
         return $http.get(‘/js/test.json‘);
      }
       return factory;
});
// controller.js
app.controller(‘TestController‘,function($scope,testFactory){
    function init(){
        testFactory.lable().success(function(data){
            $scope.customers = data;
            })
    }
    init();
})

//service、provider、factory写法
var app = angular.module(‘appName‘, []);
        app.service(‘testService‘,function(){
             this.lable = ‘this is service‘;
        });
        app.factory(‘testFactory‘, function () {
             return{
                lable: function(){
                return ‘this is factory‘;
                }
            }
        });
        app.provider(‘testProvider‘, function(){
            this.$get = function(){
                return ‘this is provider‘;
            }
        });
        <body ng-controller=‘outputCtrl‘>
            <p>{{ output1 }}</p>
            <p>{{ output2 }}</p>
            <p>{{ output3 }}</p>
        </body>
        var app = angular.module(‘appName‘);
        app.controller(‘outputCtrl‘, function($scope,testService, testFactory, testProvider){
            $scope.output1 = testService.lable;
            $scope.output2 = testFactory.lable();
            $scope.output3 = testProvider;
        });

require(‘lib/angular-route‘);//引入 route
var app = angular.module(‘testApp‘,[‘ngRoute‘,‘factory‘,‘ctrl‘]);// ngRoute
    app.config(function($routeProvider) {
         $routeProvider.when(‘/‘, {
             templateUrl: ‘/view/index.html‘,  // 模板路径
             controller: ‘TestController‘   // 模板 中的 controller
           })
         .when(‘/book‘, {
             templateUrl: ‘/view/book.html‘,
             controller: ‘BookController‘
           })
         .when(‘/test‘, {
             templateUrl: ‘/view/test.html‘,
             controller: ‘txController‘
           })
         .otherwise({ 
              redirectTo:‘/‘
            });
    });