Angular.js入门的样例

感觉这下子，前端的路也宽多了，从容不迫了。

因为可控制的节点又推前了，

有空了好好学一下。

然后结合EXPRESS或METEOR，是不是有点爽？

参考URL：

https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="js/angular.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body ng-app="myApp">
  <div >
    <div ng-controller="MainCtrl">
      {{ text }}
      <p> {{ data1.length > 0 && 'My data' || 'No data' }} </p>
      <p> {{ data2.length > 0 && 'My data' || 'No data' }} </p>
      <ul>
          <li ng-repeat="number in numbers | filter:oddNumber">
              {{ number }}
          </li>
          <input type="text" ng-model="myModel" placeholder="Start typing..." />
          <p>My model data: {{ myModel }} </p>
          <li ng-repeat="number in numbers | filter:greaterThanNum">
              {{ number }}
          </li>
      </ul>
    </div>
    <div ng-controller="XHRCtrl">
      {{ ubb.ubbname }}
      <a href="" ng-click="toggle = !toggle">Toggle nav</a>
        <ul ng-show="toggle">
            <li>LINK 1</li>
            <li>LINK 2</li>
            <li>LINK 3</li>
            <li>LINK 4</li>
        </ul>
    </div>
    <div ng-controller="EmailCtrl">
      <ul>
          <li ng-repeat="message in emails.messages">
              <p>From: {{ message.from }}</p>
              <p>Subject: {{ message.subject }}</p>
              <p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
              <a ng-click="deleteEmail($index)"> Delete email </a>
          </li>
      </ul>

    </div>
    <div ng-controller="MathCtrl">
      {{ result }}
    </div>
    <div ng-controller="FacCtrl">
      {{ result }}dgf
    </div>
    <div ng-controller="FilCtrl">
      <p>No filter: {{ greeting }}</p>
      <p>Reverse: {{ greeting | reverse }}</p>
    </div>
    <div ng-controller="UserCtrl">
      <p class="username"> Welcome, {{ user.details.username }} </p>
      <p class="id">User ID: {{ user.details.id }} </p>
    </div>
    <a custom-button>Click me</a>

  </div>
</body>

</html>

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

myApp.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.text = "Heloo, Angular fanitic.";
    $scope.numbers = [10, 25, 35, 45, 60, 80, 100];
    $scope.lowerBound = 42;
    $scope.greaterThanNum = function(item) {
        return item > $scope.lowerBound;
    };
    $scope.myModel = '';
    $scope.data1 = [];
    $scope.data2 = "my dole data";
}]);

myApp.controller('XHRCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.ubb = {};
    $scope.ubb.ubbname = '';
    $http({
        method: 'GET',
        URL: 'http://127.0.0.1/templates/customButton.html'
    })
    .success(function(data, status, headers, config) {
        $scope.ubb.ubbname = 'from ajax data';
    })
    .error(function(data, status, headers, config) {
        $scope.ubb.ubbname = 'from ajax error data';
    });
}]);

myApp.controller('EmailCtrl', ['$scope', function($scope) {
    $scope.emails = {};
    $scope.emails.messages = [{
        "from": "Steve Jobs",
        "subject": "I think I'm holding my phone wrong.",
        "sent": "2015-12-01T08:05:59Z"
    }, {
        "from": "Ellie Goulding",
        "subject": "I got Starry Eyes. lulz",
        "sent": "2015-11-01T08:05:59Z"
    },{
        "from": "Michal Stipe",
        "subject": "Everybody hurts, simteime",
        "sent": "2015-11-05T08:05:59Z"
    }];
    $scope.deleteEmail = function(index) {
        $scope.emails.messages.splice(index, 1);
    };
}]);

myApp.controller('UserCtrl', ['$scope', function ($scope) {
    $scope.user = {};
    $scope.user.details = {
        "username": "Chen Gang",
        "id": "8910112"
    };
}]);
myApp.service('Math', function() {
    this.multiply = function(x, y) {
        return x * y;
    };
});
myApp.controller('MathCtrl', ['$scope', 'Math', function($scope, Math) {
    var a = 12;
    var b = 245;
    var result = Math.multiply(a, b);
    $scope.result = result;
}]);
myApp.factory('Server', ['$http', function($http) {
    return {
        get: function(URL) {
            return $http.get(URL);
        },
    };
}]);

myApp.controller('FacCtrl', ['$scope', 'Server', function($scope, Server) {
    var jsonGet = 'http://127.0.0.1/templates/customButton.html';
    Server.get(jsonGet);
}]);

myApp.filter('reverse', function() {
    return function(Input, uppercase) {
        var out = '';
        for(var i = 0; i < Input.length; i++) {
            out = Input.charAt(i) + out;
        }
        if(uppercase) {
            out = out.toUpperCase();
        }
        return out;
    }
});

myApp.controller('FilCtrl', ['$scope', function($scope) {
    $scope.greeting = 'Todd Motto';
}]);

myApp.directive('customButton', function() {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        template: '<a href="http://www.baidu.com" class="myawesomebutton" ng-transclude>' +
                            '< i class="icon-ok-sign"><i>' +
                            '</a>',
        link: function(scope, element, attrs) {
        }
    };
});

截图：

巴特西

Angular.js入门的样例

最新文章

热门文章