首页 > 代码库 > angular 项目回顾

angular 项目回顾

2024-07-16 18:17:39   227人阅读

从学习angular，到实际项目开发不到一周，完全是边写边学呀，都是为了项目，已使用angular 开发了两个项目了，有些技术当时只是会用，都没好好回顾一下，现在有时间回顾一下，项目中用到的一些指令，服务，路由，filter 等，

一点点记录一来

// 初始化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=http://www.mamicode.com/"1" checked="checked" id="company">企业</label>    <label for="personl"><input type="radio" ng-model="checkboxSelection" name="type" value=http://www.mamicode.com/"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 =http://www.mamicode.com/ [                {‘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.jsvar app = angular.module(‘factory‘,[]);app.factory(‘testFactory‘, function ($http) {      var factory = {};      factory.lable = function(){         return $http.get(‘/js/test.json‘);      }       return factory;});// controller.jsapp.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‘);//引入 routevar 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:‘/‘            });    });

 

待续....

 


联系
我们