URL：

https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/?utm_source=javascriptweekly&utm_medium=email

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="js/lib/angular.min.js"></script>
    <script >
        var myApp = angular.module('myApp', []);
        myApp.controller('MainCtrl', ['$scope', 'Math',  function($scope, Math) {
            var a = 12;
            var b = 24;
            $scope.myModel = '';
            $scope.result = Math.multiply(a, b);
            $scope.greeting = 'Todd Motto';
            $scope.numbers = [10, 25, 35, 45, 60, 80, 100];
            $scope.lowerBound = 42;
            $scope.greaterThanNum = function(item) {
                return item > $scope.lowerBound;
            };
            $scope.user = {};
            $scope.user.details = {
                "username": "Todd Motto",
                "id": "89101112"
            };
        }]);
        myApp.directive('customButton', function() {
            return {
                restrict: 'A',
                replace: true,
                transclude: true,
                templateUrl: 'templates/customButton.html',
                link: function (scope, element, attrs) {
                    //dom mani/event
                }
            };
        });
        myApp.service('Math', function() {
            this.multiply = function(x, y) {
                return x * y;
            };
        });
        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('EmailsCtrl', ['$scope', function($scope) {
            $scope.emails = {};
            $scope.emails.messages = [{
                "from": "Steve Jobs",
                "subject": "I think I'm holding my phone wrong :/",
                "sent": "2013-10-01T08:05:59Z"
            },{
                "from": "Ellie Goulding",
                "subject": "I've got Starry Eyes, lulz",
                "sent": "2013-09-21T19:45:00Z"
            },{
                "from": "Michael Stipe",
                "subject": "Everybody hurts, sometimes.",
                "sent": "2013-09-12T11:38:30Z"
            },{
                "from": "Jeremy Clarkson",
                "subject": "Think I've found the best car... In the world",
                "sent": "2013-09-03T13:15:11Z"
            }];
            $scope.deleteEmail = function(index) {
                $scope.emails.messages.splice(index, 1);
            };
            $scope.main = {};
            $scope.main.test1 = [];
            $scope.main.test2 = [{"some": "data"}];
        }]);

    </script>

</head>
<body>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        welcome, {{ user.details.username}}.<br>
        user ID: {{ user.details.id }}<br>
        {{result}}<br>
        <a custom-button>Click Me</a><br>
        no filter: {{greeting}}<br>
        Reverse: {{greeting|reverse}}<br>
        <input type="text" ng-model="lowerBound" /><br>
        <li ng-repeat="number in numbers|filter: greaterThanNum">
            {{number}}
        </li><br>
        <input type="text" ng-model="myModel" placeholder="Start typing..." />
        <p>My model data: {{ myModel }} </p>
    </div>
    <div ng-controller="EmailsCtrl">
        <ul>
            <li ng-repeat="message in emails.messages">
                <p>{{ message.index }}</p>
                <p>From: {{ message.from }}</p>
                <p>Subject: {{ message.subject }}</p>
                <p>{{message.sent|date:'MMM d, y h:mm:ss a'}}</p>
                <p><a ng-click="deleteEmail($index)">Delete email</a></p>
            </li>
        </ul>
         <p>Test 1: {{ main.test1.length > 0 && 'My data' || 'No data' }}</p>
        <p>Test 2: {{ main.test2.length > 0 && 'My data' || 'No data' }}</p>
    </div>
    <a href="" ng-click="toggle = !toggle">Toggle nav</a>
    <ul ng-show="toggle">
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Kub 3</li>
    </ul>
</div>
</body>
</html>

再次实操一次angular的基本语法的更多相关文章

  1. 新硬盘挂载-fdisk+mount案例实操

    新硬盘挂载-fdisk+mount案例实操 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 现在很多服务器都支持热插拔了,当有新的硬盘插入到服务器上我们需要将其分区,格式化,然后挂载 ...

  2. linux基础实操四

    实操一: 1)为新加的硬盘分区,一个主分区大小为10剩余空间给扩展分区,在扩展分区上划分2个逻辑分别为5G 2)式化主分区为ext3系统 #mkfs.ext3 /dev/sdb1 3 将逻辑分区设置为 ...

  3. 【Social listening实操】作为一个合格的“增长黑客”，你还得重视外部数据的分析！

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 在本文中,作者引出了"外部数据"这一概 ...

  4. （二）Linux实操之——网络配置、进程管理、服务管理、组管理、YUM

    接上段   (一)Linux实操之——权限.任务调度.磁盘分区 4.网络配置 4.1 NAT模式的网络配置 目前我们采用的网络配置是NAT模式. windows下cmd通过 ipconfig 命令可以 ...

  5. 大数据学习笔记——Linux完整部署篇(实操部分)

    Linux环境搭建完整操作流程(包含mysql的安装步骤) 从现在开始,就正式进入到大数据学习的前置工作了,即Linux的学习以及安装,作为运行大数据框架的基础环境,Linux操作系统的重要性自然不言 ...

  6. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  7. css知识笔记：垂直居中（别只看，请实操！！！）

    css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  8. css知识笔记：水平居中（别只看，请实操！！！）

    css实现元素的水平居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  9. 干货 | 京东云应用负载均衡（ALB）多功能实操

    应用负载均衡(Application Load Balancer,简称ALB)是京东云自主研发的一款七层负载均衡产品,主要面向HTTP和HTTPS流量的WEB应用程序,提供灵活的功能配置.应用负载均衡 ...

随机推荐

  1. vagrant 错误记录

    使用Vagrant配置本地开发环境 从二零一四年开始使用vagrant+VirtualBox搭建linux开发环境,配置简单灵活,后台运行占用内存少,比vmware好用很多,果断弃用vmware转投v ...

  2. xss实例-什么都没过滤的情况

    1. XSS的存在,一定是伴随着输入,与输出2个概念的. 2. 要想过滤掉XSS,你可以在输入层面过滤,也可以在输出层面过滤. 3. 如果输入和输出都没过滤. 那么漏洞将是显而易见的. 4. 作为第一 ...

  3. javax.inject中@Inject、@Named、@Qualifier和@Provider用法

    @Inject @Inject支持构造函数.方法和字段注解,也可能使用于静态实例成员.可注解成员可以是任意修饰符(private,package-private,protected,public).注 ...

  4. linux useradd(adduser)命令参数及用法详解(linux创建新用户命令)

    linux useradd(adduser)命令参数及用法详解(linux创建新用户命令) useradd可用来建立用户帐号.帐号建好之后,再用passwd设定帐号的密码．而可用userdel删除帐号 ...

  5. linux 中\r

    工作中遇到的一个处理\r和\n的问题,看了一下\r是啥... void File_translater::EspEntr(string& strSrc){ int iPos; while((i ...

  6. ubuntu下手把手教你搭建SVN服务器

    序,我的ubuntu服务器版本是14.04 ,x64(64位)操作系统,服务器在国内. 目录 一.安装SVN服务器 1 安装svn2 创建目录3 创建版本仓库4 配置5 启动SVN服务器6 验证svn ...

  7. Entity Framework Repository模式

    Repository模式之前 如果我们用最原始的EF进行设计对每个实体类的“C(增加).R(读取).U(修改).D(删除)”这四个操作. 第一个:先来看看查询,对于实体类简单的查询操作,每次都是这样的 ...

  8. Spring AOP使用整理：各种通知类型的介绍

    2.PersonImpl类的源码 public class PersonImpl implements Person { private String name; private int age; p ...

  9. Windows下tcp参数优化

    Windows系统下的TCP参数优化2013-04-25      0 个评论       作者:最初的幸福ever收藏     我要投稿Windows系统下的TCP参数优化 TCP连接的状态与关闭方 ...

  10. Linux文件权限管理（持续更新）

    文章是从我的个人博客上粘贴过来的, 大家也可以访问我的主页 www.iwangzheng.com 以root身份登录linux以后, ls -al 可以看到 -rw-rw-r--  1 wangzhe ...