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入门的样例的更多相关文章

【Unity 3D 游戏开发】Unity3D 入门 - 工作区域介绍与入门演示样例
一. 工作区域具体解释 1. Scence视图 (场景设计面板) scence视图简单介绍 : 展示创建的游戏对象, 能够对全部的游戏对象进行移动, 操作和放置; -- 演示样例 : 创建一个球 ...
Angular.js 入门（一）
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
Angular.js入门
一.引入angular.js <script type="text/javascript" src="../plugins/angularjs/angular.m ...
Angular.js入门教程
简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.首先Html是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. 通常,我们可以通过以下技术来解 ...
angular.js 入门
1.安装nodejs 首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题. 没有安装的直接去nodejs官网下载nodejs安装.安装过程很简单,官网有教程. 安 ...
一些常用的js，jquerry 样例
1 设置属性 $(document).attr("title", str) 2 删除属性在增加属性 $("#" + bottonname).remo ...
Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
Ext JS学习第十六天事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例第十五节：深入理解async和await的作用及各种适用场景和用法第十五节：深入理解async和await的作用及各种适用场景和用法前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习今天我们来说一说什么是事件,对于事件 ...

随机推荐

JAVA中RSS解析器(rome.jar和jdom.jar)范例
1.需要 jdom.jar 和 rome.jar 这两个包.2.创建一个项目,web.xml的内容如下: 代码如下复制代码 <?xml version="1.0" enco ...
如何让Eclipse的智能提示像VS一样霸气
说起来用 Eclipse 也有一段时间了,相信每一个用过的人都知道他的智能提示功能真的是糟糕透了,与 VisualStudio2008 简直不是一个档次的!我就纳闷了,他为什么不弄好一点呢!今天我实在 ...
OC6_复合类的类存管理
// // Person.h // OC6_复合类的类存管理 // // Created by zhangxueming on 15/6/18. // Copyright (c) 2015年 zhan ...
Windows远程centos6.5
linux系统:Centos6.5 1.首先确定是不是图形化界面: yum -y groupinstall Desktop "X Window System" chinese-su ...
L1范式和L2范式的区别
L1 and L2 regularization add a cost to high valued weights to prevent overfitting. L1 regularization ...
编译安装php Cannot find MySQL header files under /usr/include/mysql.
编译php-5.5-6的mysql支持,出现Cannot find MySQL header files under /usr/include/mysql. Note that the MySQL c ...
c# 类型初始值设定项引发异常
今天使用VS2010编译c#程序,编译顺利通过,点击运行启动程序,弹框提示如题错误.断点调试,程序甚至都没有进入main函数!!查阅网上资料,几种分析如下(1)反射机制 (2)app.config文件 ...
php 字母大小写转换的函数
分享下,在php编程中,将字母大小写进行转换的常用函数. 1.将字符串转换成小写strtolower(): 该函数将传入的字符串参数所有的字符都转换成小写,并以小定形式放回这个字符串 2.将字符转成大 ...
PHP加解密相关函数
openssl_public_encrypt() - Encrypts data with public keyopenssl_public_decrypt() - Decrypts data w ...
RFC822DateGMT
function RFC822DateGMT(dd: TDateTime): string; const Days:..] of string= ('Sun','Mon','Tue','Wed','T ...

Angular.js入门的样例

Angular.js入门的样例的更多相关文章

随机推荐

热门专题